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,21 @@ 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();
+        // focus the close button
+        document.querySelector('.close')?.focus();
     };
 
     useEffect(() => {

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

@@ -134,17 +134,7 @@ export default createGlobalVariableGetter('__paypal_credit_message__', () =>
                     const { onClick } = props;
 
                     return ({ meta }) => {
-                        const {
-                            modal,
-                            index,
-                            account,
-                            merchantId,
-                            currency,
-                            amount,
-                            buyerCountry,
-                            onApply,
-                            getContainer
-                        } = props;
+                        const { modal, index, account, merchantId, currency, amount, buyerCountry, onApply } = props;
                         const { offerType, offerCountry, messageRequestId } = meta;
 
                         // Avoid spreading message props because both message and modal
@@ -160,10 +150,7 @@ export default createGlobalVariableGetter('__paypal_credit_message__', () =>
                             offerCountry,
                             refId: messageRequestId,
                             refIndex: index,
-                            src: 'message_click',
-                            onClose: () => {
-                                getContainer().querySelector('iframe').focus();
-                            }
+                            src: 'message_click'
                         });
 
                         logger.track({

src/library/zoid/modal/containerTemplate.jsx

@@ -17,6 +17,7 @@ export default ({ uid, frame, prerenderFrame, doc, event, state, props: { cspNon
     // cannot overlay across the entire screen
     if (context === 'popup') return undefined;
 
+    state.previousFocus = document.activeElement;
     const [hijackViewport, replaceViewport] = viewportHijack();
 
     const CLASS = {
@@ -30,13 +31,19 @@ export default ({ uid, frame, prerenderFrame, doc, event, state, props: { cspNon
 
         const handleShow = () => {
             state.open = true;
+            state.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);
+                    if (state.renderedModal && window.document.activeElement !== frame) {
+                        frame.focus();
+                    } else if (window.document.activeElement !== prerenderFrame) {
+                        prerenderFrame.focus();
+                    }
                 });
             });
         };
@@ -47,6 +54,7 @@ export default ({ uid, frame, prerenderFrame, doc, event, state, props: { cspNon
             replaceViewport();
             setTimeout(() => {
                 wrapper.classList.add(CLASS.HIDDEN);
+                state.previousFocus.focus();
             }, TRANSITION_DELAY);
         };
 
@@ -57,11 +65,18 @@ export default ({ uid, frame, prerenderFrame, doc, event, state, props: { cspNon
         };
 
         const handleTransition = () => {
+            state.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();