fix: safari focus

.eslintrc

@@ -10,7 +10,7 @@
         "__MESSAGING_GLOBALS__": true,
         "__ENV__": true
     },
-    "plugins": ["prettier"],
+    "plugins": ["prettier","eslint-comments"],
     "rules": {
         "arrow-body-style": "off",
         "unicorn/prefer-spread": "off",

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/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

@@ -14,21 +14,23 @@ export const STATUS = {
 };
 
 const TransitionContext = createContext({
-    status: STATUS.OPEN,
+    status: STATUS.CLOSED,
     setStatus: () => {}
 });
 
 export const TransitionStateProvider = ({ children }) => {
     const { onShow } = useXProps();
-    const [state, setState] = useState(STATUS.OPEN);
+    const [state, setState] = useState(STATUS.CLOSED);
 
     /**
      * Set iniitial focus on modal open to the close button.
      * 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
+        window.requestAnimationFrame(() => {
+            document.querySelector('.close')?.focus();
+        });
     };
 
     useEffect(() => {
@@ -41,6 +43,7 @@ export const TransitionStateProvider = ({ children }) => {
                         if (entry.isIntersecting) {
                             // Removes .modal-closed class from modal iframe body when modal is open.
                             document.body.classList.remove('modal-closed');
+                            document.body.classList.add('modal-open');
                             setState(STATUS.OPEN);
                             onShow();
 
@@ -52,7 +55,10 @@ export const TransitionStateProvider = ({ children }) => {
                                  * The .modal-closed class is added via useTransitionState. If this class is not on the modal iframe body,
                                  * we know the modal is open and should not trigger the hook to reset the modal to the primary view.
                                  */
-                                if (document.body.classList.contains('modal-closed')) {
+                                if (
+                                    document.body.classList.contains('modal-closed') ||
+                                    !document.body.classList.contains('modal-open')
+                                ) {
                                     setState(STATUS.CLOSED);
                                 }
                             }, TRANSITION_DELAY);
@@ -85,6 +91,7 @@ export const useTransitionState = () => {
         linkName => {
             // Appends a class to the modal iframe body when handleClose is fired.
             document.body.classList.add('modal-closed');
+            document.body.classList.remove('modal-open');
             onClose({ linkName });
 
             if (window === window.top && typeof close === 'function') {

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,12 +58,13 @@ 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
-        const closeButton = window.document.querySelector('#close-btn');
-        if (closeButton) closeButton.focus();
+        if (transitionState === 'OPEN') {
+            window.document.querySelector('#close-btn')?.focus();
+        }
     }, [viewName]);
 
     useDidUpdateEffect(() => {
@@ -71,13 +81,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.

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

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

src/components/modal/v2/styles/components/_header.scss

@@ -140,6 +140,10 @@
             cursor: pointer;
             z-index: 9;
 
+            &:focus {
+                outline: -webkit-focus-ring-color solid 2px;
+            }
+
             @include desktop {
                 margin-left: auto;
                 margin-right: 2px;

src/library/zoid/message/component.js

@@ -162,7 +162,9 @@ export default createGlobalVariableGetter('__paypal_credit_message__', () =>
                             refIndex: index,
                             src: 'message_click',
                             onClose: () => {
-                                getContainer().querySelector('iframe').focus();
+                                window.requestAnimationFrame(() => {
+                                    getContainer().querySelector('iframe').focus();
+                                });
                             }
                         });
 

src/library/zoid/modal/containerTemplate.jsx

@@ -16,7 +16,8 @@ export default ({ uid, frame, prerenderFrame, doc, event, state, props: { cspNon
     // In this scenario we can skip creating container elements and transitions since we
     // cannot overlay across the entire screen
     if (context === 'popup') return undefined;
-
+    let renderedModal = false;
+    let previousFocus = document.activeElement;
     const [hijackViewport, replaceViewport] = viewportHijack();
 
     const CLASS = {
@@ -30,13 +31,21 @@ export default ({ uid, frame, prerenderFrame, doc, event, state, props: { cspNon
 
         const handleShow = () => {
             state.open = true;
+            previousFocus = document.activeElement;
             wrapper.classList.remove(CLASS.HIDDEN);
             hijackViewport();
             // Browser needs to repaint otherwise the transition happens immediately
             // Firefox requires 2 RAFs due to where they are called in the event loop
             requestAnimationFrame(() => {
                 requestAnimationFrame(() => {
                     overlay.classList.add(CLASS.MODAL_SHOW);
+                    requestAnimationFrame(() => {
+                        if (renderedModal) {
+                            frame.focus();
+                        } else if (window.document.activeElement !== prerenderFrame) {
+                            prerenderFrame.focus();
+                        }
+                    });
                 });
             });
         };
@@ -47,21 +56,36 @@ export default ({ uid, frame, prerenderFrame, doc, event, state, props: { cspNon
             replaceViewport();
             setTimeout(() => {
                 wrapper.classList.add(CLASS.HIDDEN);
+
+                requestAnimationFrame(() => {
+                    if (renderedModal) {
+                        frame.blur();
+                    } else {
+                        previousFocus.focus();
+                    }
+                });
             }, TRANSITION_DELAY);
         };
 
         const handleEscape = evt => {
-            if (state.open && (evt.key === 'Escape' || evt.key === 'Esc' || evt.charCode === 27)) {
+            if (state.open && (`${evt?.key}`.toLowerCase().startsWith('esc') || evt.charCode === 27)) {
                 handleHide();
             }
         };
 
         const handleTransition = () => {
+            renderedModal = true;
             ZalgoPromise.delay(TRANSITION_DELAY)
                 .then(() => overlay.classList.add(CLASS.TRANSITION))
                 .then(() => ZalgoPromise.delay(TRANSITION_DELAY))
-                .then(() => destroyElement(prerenderFrame));
+                .then(() => destroyElement(prerenderFrame))
+                .then(() => {
+                    if (state.open && document.activeElement !== frame) {
+                        frame.focus();
+                    }
+                });
         };
+
         // When the show function was called before zoid had a chance to render
         if (state.open) {
             handleShow();