Fix email opt-in modal reflow at high zoom (#1779)

Author: benitoalba

src/emailOptIn/modal.js

@@ -11,6 +11,13 @@ import { createFocusTrap } from 'focus-trap';
 // Ensure the global variable is defined.
 window.edac_email_opt_in_form = window.edac_email_opt_in_form || {};
 
+const getOptInModal = () => {
+	const modal = document.getElementById( 'TB_window' );
+	modal?.classList.add( 'edac-email-opt-in-modal' );
+
+	return modal;
+};
+
 export const initOptInModal = () => {
 	window.addEventListener( 'load', () => {
 		window.addEventListener( 'mousemove', triggerModal, { once: true } );
@@ -28,6 +35,7 @@ const triggerModal = ( () => {
 		hasRun = true;
 
 		tb_show( 'Accessibility Checker', '#TB_inline?width=600&inlineId=edac-opt-in-modal', null );
+		getOptInModal();
 
 		// Loop and check for the close button before trying to bind the focus trap.
 		let attempts = 0;
@@ -49,7 +57,7 @@ const triggerModal = ( () => {
 } )();
 
 const bindFocusTrap = () => {
-	const modal = document.getElementById( 'TB_window' );
+	const modal = getOptInModal();
 	const closeIcon = modal?.querySelector( '.tb-close-icon' );
 	if ( ! modal || ! closeIcon ) {
 		return false;

src/emailOptIn/sass/email-opt-in.scss

@@ -2,6 +2,7 @@
 	padding: 0;
 	margin: 0;
 	input {
+		box-sizing: border-box;
 		width: 100%;
 	}
 
@@ -23,4 +24,32 @@
 	}
 }
 
+#TB_window.edac-email-opt-in-modal {
+	box-sizing: border-box;
+	width: calc(100vw - 2rem) !important;
+	max-width: 630px;
+	max-height: calc(100vh - 2rem);
+	margin: 0 !important;
+	transform: translate(-50%, -50%);
+
+	#TB_ajaxContent {
+		box-sizing: border-box;
+		width: 100% !important;
+		height: auto !important;
+		max-height: calc(100vh - 4rem) !important;
+		overflow-y: auto;
+	}
+}
+
+@media screen and (max-width: 600px) {
+	#TB_window.edac-email-opt-in-modal #_form_1_ ._button-wrapper {
+		flex-direction: column;
+		align-items: stretch;
+
+		button {
+			width: 100%;
+		}
+	}
+}
+
 

tests/jest/emailOptIn/modal.test.js

@@ -2,6 +2,7 @@
  * Tests for email opt-in modal initialization
  */
 
+import { createFocusTrap } from 'focus-trap';
 import { initOptInModal } from '../../../src/emailOptIn/modal';
 
 jest.mock(
@@ -15,9 +16,18 @@ jest.mock(
 describe( 'email opt-in modal init', () => {
 	beforeEach( () => {
 		jest.restoreAllMocks();
+		jest.useRealTimers();
+		document.body.innerHTML = '';
 		window.onload = null;
 	} );
 
+	afterEach( () => {
+		jest.clearAllTimers();
+		jest.useRealTimers();
+		delete window.tb_show;
+		delete window.jQuery;
+	} );
+
 	test( 'does not overwrite existing window.onload handler', () => {
 		const existingOnload = jest.fn();
 		window.onload = existingOnload;
@@ -43,4 +53,35 @@ describe( 'email opt-in modal init', () => {
 		expect( addEventListenerSpy ).toHaveBeenCalledWith( 'mousemove', expect.any( Function ), { once: true } );
 		expect( addEventListenerSpy ).toHaveBeenCalledWith( 'scroll', expect.any( Function ), { once: true } );
 	} );
+
+	test( 'marks the email opt-in ThickBox before activating its focus trap', () => {
+		jest.useFakeTimers();
+
+		const modal = document.createElement( 'div' );
+		modal.id = 'TB_window';
+		modal.innerHTML = '<button class="tb-close-icon">Close</button>';
+
+		const focusTrap = {
+			activate: jest.fn(),
+			deactivate: jest.fn(),
+		};
+		createFocusTrap.mockReturnValue( focusTrap );
+		window.tb_show = jest.fn( () => document.body.appendChild( modal ) );
+		window.jQuery = jest.fn( () => ( { one: jest.fn() } ) );
+
+		const addEventListenerSpy = jest.spyOn( window, 'addEventListener' );
+		initOptInModal();
+
+		const loadCall = addEventListenerSpy.mock.calls.find( ( call ) => call[ 0 ] === 'load' );
+		loadCall[ 1 ]();
+		const mousemoveCall = addEventListenerSpy.mock.calls.find( ( call ) => call[ 0 ] === 'mousemove' );
+		mousemoveCall[ 1 ]();
+
+		expect( modal.classList.contains( 'edac-email-opt-in-modal' ) ).toBe( true );
+
+		jest.advanceTimersByTime( 250 );
+
+		expect( createFocusTrap ).toHaveBeenCalledWith( modal );
+		expect( focusTrap.activate ).toHaveBeenCalled();
+	} );
 } );