fix: safari focus

src/components/modal/content/US/parts/Content.jsx

@@ -152,7 +152,9 @@ const Content = ({ headerRef, contentWrapper }) => {
                 <div>Subject to credit approval.</div>
                 <hr className="divider" />
             </div>
-            <main className="main">{tabsContent}</main>
+            <main className="main" aria-label={`More info on the Pay Later offer${tabs.length > 1 ? 's' : ''}.`}>
+                {tabsContent}
+            </main>
         </div>
     );
 };

src/components/modal/lib/hooks/helpers.js

@@ -1,17 +1,5 @@
 import { useEffect, useLayoutEffect, useRef } from 'preact/hooks';
 
-export function useAutoFocus() {
-    const ref = useRef();
-
-    useEffect(() => {
-        if (ref.current) {
-            ref.current.focus();
-        }
-    });
-
-    return ref;
-}
-
 export function useDidUpdateEffect(fn, deps) {
     const mounted = useRef(false);
 

src/components/modal/lib/utils.js

@@ -55,13 +55,18 @@ export function setupTabTrap() {
             const tabArray = arrayFrom(document.querySelectorAll(focusableElementsString)).filter(
                 node => window.getComputedStyle(node).visibility === 'visible'
             );
+            let nextElement;
             // SHIFT + TAB
             if (e.shiftKey && document.activeElement === tabArray[0]) {
+                nextElement = tabArray[tabArray.length - 1];
+            } else if (document.activeElement === tabArray[tabArray.length - 1]) {
+                // eslint-disable-next-line prefer-destructuring
+                nextElement = tabArray[0];
+            }
+
+            if (typeof nextElement !== 'undefined') {
                 e.preventDefault();
-                tabArray[tabArray.length - 1].focus();
-            } else if (!e.shiftKey && document.activeElement === tabArray[tabArray.length - 1]) {
-                e.preventDefault();
-                tabArray[0].focus();
+                nextElement.focus();
             }
         }
     }

src/components/modal/v2/lib/hooks/helpers.js

@@ -1,17 +1,5 @@
 import { useEffect, useLayoutEffect, useRef } from 'preact/hooks';
 
-export function useAutoFocus() {
-    const ref = useRef();
-
-    useEffect(() => {
-        if (ref.current) {
-            ref.current.focus();
-        }
-    });
-
-    return ref;
-}
-
 export function useDidUpdateEffect(fn, deps) {
     const mounted = useRef(false);
 

src/components/modal/v2/lib/providers/transition.js

@@ -27,8 +27,10 @@ export const TransitionStateProvider = ({ children }) => {
      * Particularly useful for those using screen readers and other accessibility functions.
      */
     const focusCloseBtnOnModalOpen = () => {
-        const btn = document.querySelector('.close');
-        btn?.focus();
+        // give the document time to update before trying to focus the close button
+        setTimeout(() => {
+            document.querySelector('.close')?.focus();
+        }, 10);
     };
 
     useEffect(() => {

src/components/modal/v2/lib/utils.js

@@ -80,13 +80,17 @@ export function setupTabTrap() {
             const tabArray = arrayFrom(document.querySelectorAll(focusableElementsString)).filter(
                 node => window.getComputedStyle(node).visibility === 'visible'
             );
+            let nextElement;
             // SHIFT + TAB
             if (e.shiftKey && document.activeElement === tabArray[0]) {
-                e.preventDefault();
-                tabArray[tabArray.length - 1].focus();
+                nextElement = tabArray[tabArray.length - 1];
             } else if (document.activeElement === tabArray[tabArray.length - 1]) {
+                // eslint-disable-next-line prefer-destructuring
+                nextElement = tabArray[0];
+            }
+            if (typeof nextElement !== 'undefined') {
                 e.preventDefault();
-                tabArray[0].focus();
+                nextElement.focus();
             }
         }
     }

src/components/modal/v2/parts/BodyContent.jsx

@@ -13,6 +13,15 @@ import {
 import Header from './Header';
 import { LongTerm, ShortTerm, NoInterest, ProductList, PayIn1 } from './views';
 
+const VIEW_IDS = {
+    // TODO: add an error view in case we receive an invalid view?
+    PAYPAL_CREDIT_NO_INTEREST: 'PAYPAL_CREDIT_NO_INTEREST',
+    PAY_LATER_LONG_TERM: 'PAY_LATER_LONG_TERM',
+    PAY_LATER_PAY_IN_1: 'PAY_LATER_PAY_IN_1',
+    PAY_LATER_SHORT_TERM: 'PAY_LATER_SHORT_TERM',
+    PRODUCT_LIST: 'PRODUCT_LIST'
+};
+
 const BodyContent = () => {
     const { views } = useServerData();
     const { offer } = useXProps();
@@ -29,12 +38,12 @@ const BodyContent = () => {
 
         let defaultViewName;
 
-        const productViews = views.filter(view => view?.meta?.product !== 'PRODUCT_LIST');
-        const hasProductList = views.find(view => view?.meta?.product === 'PRODUCT_LIST');
+        const productViews = views.filter(view => view?.meta?.product !== VIEW_IDS.PRODUCT_LIST);
+        const hasProductList = views.find(view => view?.meta?.product === VIEW_IDS.PRODUCT_LIST);
         if (productViews?.length === 1) {
             defaultViewName = productViews[0]?.meta?.product;
         } else if (productViews?.length > 1 && hasProductList) {
-            defaultViewName = 'PRODUCT_LIST';
+            defaultViewName = VIEW_IDS.PRODUCT_LIST;
         } else if (productViews?.length > 1 && !hasProductList) {
             defaultViewName = productViews[0]?.meta?.product;
         }
@@ -49,7 +58,7 @@ const BodyContent = () => {
     const { headline, subheadline, qualifyingSubheadline = '', closeButtonLabel } = content;
     const isQualifying = productMeta?.qualifying;
 
-    const openProductList = () => setViewName('PRODUCT_LIST');
+    const openProductList = () => setViewName(VIEW_IDS.PRODUCT_LIST);
 
     useDidUpdateEffect(() => {
         scrollTo(0); // Reset scroll position to top when view changes
@@ -71,13 +80,13 @@ const BodyContent = () => {
 
     // Add views to viewComponents object where the keys are the product name and the values are the view component
     const viewComponents = {
-        PAYPAL_CREDIT_NO_INTEREST: <NoInterest content={content} openProductList={openProductList} />,
-        PAY_LATER_LONG_TERM: <LongTerm content={content} openProductList={openProductList} />,
-        PAY_LATER_PAY_IN_1: <PayIn1 content={content} openProductList={openProductList} />,
-        PAY_LATER_SHORT_TERM: (
+        [VIEW_IDS.PAYPAL_CREDIT_NO_INTEREST]: <NoInterest content={content} openProductList={openProductList} />,
+        [VIEW_IDS.PAY_LATER_LONG_TERM]: <LongTerm content={content} openProductList={openProductList} />,
+        [VIEW_IDS.PAY_LATER_PAY_IN_1]: <PayIn1 content={content} openProductList={openProductList} />,
+        [VIEW_IDS.PAY_LATER_SHORT_TERM]: (
             <ShortTerm content={content} productMeta={productMeta} openProductList={openProductList} />
         ),
-        PRODUCT_LIST: <ProductList content={content} setViewName={setViewName} />
+        [VIEW_IDS.PRODUCT_LIST]: <ProductList content={content} setViewName={setViewName} />
     };
 
     // IMPORTANT: These elements cannot be nested inside of other elements.
@@ -95,7 +104,10 @@ const BodyContent = () => {
                 viewName={viewName}
             />
             <div className="content__container">
-                <main className="main">
+                <main
+                    className="main"
+                    aria-label={`More info on the Pay Later offer${viewName === VIEW_IDS.PRODUCT_LIST ? 's' : ''}.`}
+                >
                     <div className="content__body">{viewComponents[viewName]}</div>
                 </main>
             </div>

src/components/modal/v2/parts/Header.jsx

@@ -56,6 +56,8 @@ const Header = ({
                         aria-label={closeButtonLabel}
                         type="button"
                         id="close-btn"
+                        autofocus
+                        aria-keyshortcuts="escape"
                         onClick={() => handleClose('Close Button')}
                     >
                         <Icon name="close" />

src/library/zoid/modal/containerTemplate.jsx

@@ -47,6 +47,7 @@ export default ({ uid, frame, prerenderFrame, doc, event, state, props: { cspNon
             replaceViewport();
             setTimeout(() => {
                 wrapper.classList.add(CLASS.HIDDEN);
+                wrapper.querySelector('iframe')?.blur();
             }, TRANSITION_DELAY);
         };
 
@@ -60,8 +61,10 @@ export default ({ uid, frame, prerenderFrame, doc, event, state, props: { cspNon
             ZalgoPromise.delay(TRANSITION_DELAY)
                 .then(() => overlay.classList.add(CLASS.TRANSITION))
                 .then(() => ZalgoPromise.delay(TRANSITION_DELAY))
-                .then(() => destroyElement(prerenderFrame));
+                .then(() => destroyElement(prerenderFrame))
+                .then(() => wrapper.querySelector('iframe')?.focus());
         };
+
         // When the show function was called before zoid had a chance to render
         if (state.open) {
             handleShow();

src/library/zoid/modal/prerenderTemplate.jsx

@@ -1,9 +1,3 @@
-/* eslint-disable eslint-comments/disable-enable-pair */
-/* eslint-disable no-param-reassign */
-/* eslint-disable react/self-closing-comp */
-/* eslint-disable jsx-a11y/click-events-have-key-events */
-/* eslint-disable jsx-a11y/control-has-associated-label */
-/* eslint-disable jsx-a11y/no-static-element-interactions */
 /** @jsx node */
 import { node, dom } from '@krakenjs/jsx-pragmatic/src';
 import { Spinner } from '@paypal/common-components';
@@ -84,7 +78,6 @@ export default ({ doc, props, event }) => {
             position: relative !important;
         }
         .close-button > button {
-             background-image: url("data:image/svg+xml,%3Csvg width='48' height='48' viewBox='0 0 44 44' fill='transparent' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 0L0 12' transform='translate(12 12)' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M0 0L12 12' transform='translate(12 12)' stroke='white' stroke-width='2' stroke-linecap='round' /%3E%3C/svg%3E");
             background-color: transparent;
             width: 48px;
             height: 48px;
@@ -95,6 +88,13 @@ export default ({ doc, props, event }) => {
             position: absolute;
             z-index: 50;
             right: 0;
+            margin-right: 2px;
+            margin-top: 2px;
+        }
+
+        .close-button > button > svg {
+            width: 48px;
+            height: 48px;
         }
 
         .error{
@@ -123,16 +123,23 @@ export default ({ doc, props, event }) => {
     const closeModal = () => event.trigger('modal-hide');
     const checkForErrors = element => {
         ZalgoPromise.delay(ERROR_DELAY).then(() => {
+            const errorElement = element.querySelector('#errMsg');
             // check to see if modal content class exists
-            if (element.querySelector('.error')) {
+            if (errorElement) {
                 // looks like there is an error if modal content class does not exist.
                 // assign variable to state and access in UI
-                element.querySelector('.error').style.display = 'block';
-                element.querySelector('.error').textContent = 'Error loading Modal';
+                errorElement.style.display = 'block';
+                errorElement.textContent = 'Error loading Modal';
+                // TODO: should we report this failure to our log endpoint?
             }
         });
     };
-
+    const focusCloseButton = element => {
+        window.requestAnimationFrame(() => {
+            // TODO: determine how to get this to re-focus if the prerender is dismissed and re-opened
+            element.focus();
+        });
+    };
     return (
         <html lang="en">
             <head>
@@ -141,14 +148,45 @@ export default ({ doc, props, event }) => {
             </head>
             <style nonce={props.cspNonce}>{styles}</style>
             <body onRender={checkForErrors}>
-                <div class="modal">
-                    <div class="overlay" onClick={closeModal} />
+                <div class="modal" aria-errormessage="errMsg">
+                    {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions */}
+                    <div class="overlay" role="dialog" onClick={closeModal} />
                     <div class="top-overlay" />
                     <div class="modal-content">
                         <div class="close-button">
-                            <button onClick={closeModal} type="button" />
+                            <button
+                                id="prerender-close-btn"
+                                onClick={closeModal}
+                                type="button"
+                                aria-label="Close"
+                                onRender={focusCloseButton}
+                            >
+                                <svg
+                                    aria-hidden="true"
+                                    width="36"
+                                    height="36"
+                                    viewBox="0 0 36 36"
+                                    fill="none"
+                                    xmlns="http://www.w3.org/2000/svg"
+                                >
+                                    <path
+                                        d="M12 0L0 12"
+                                        transform="translate(12 12)"
+                                        stroke="white"
+                                        stroke-width="2"
+                                        stroke-linecap="round"
+                                    />
+                                    <path
+                                        d="M0 0L12 12"
+                                        transform="translate(12 12)"
+                                        stroke="white"
+                                        stroke-width="2"
+                                        stroke-linecap="round"
+                                    />
+                                </svg>
+                            </button>
                         </div>
-                        <div class="error"></div>
+                        <div id="errMsg" class="error" />
                         <Spinner nonce={props.cspNonce} />
                     </div>
                 </div>

tests/unit/spec/src/components/lib/hooks/helpers.test.js

@@ -1,24 +1,7 @@
 import { renderHook } from '@testing-library/preact-hooks';
-import { useAutoFocus, useDidUpdateEffect } from 'src/components/modal/lib/hooks/helpers';
+import { useDidUpdateEffect } from 'src/components/modal/lib/hooks/helpers';
 
 describe('hooks helpers', () => {
-    describe('useAutoFocus', () => {
-        test('Auto focuses the returned ref', () => {
-            const button = document.createElement('button');
-            button.focus = jest.fn();
-            const { rerender } = renderHook(() => {
-                const focustRef = useAutoFocus();
-                focustRef.current = button;
-            });
-
-            expect(button.focus).toHaveBeenCalledTimes(1);
-
-            rerender();
-
-            expect(button.focus).toHaveBeenCalledTimes(2);
-        });
-    });
-
     describe('useDidUpdateEffect', () => {
         test('Runs effect function only when dependencies update', () => {
             const effectFn = jest.fn();