Handle focus leaving non-focusable header element backwards in FocusT…

…rapper
w3c · Dec 4, 2023 · 57012cb · 57012cb
1 parent 477abcb
commit 57012cb
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 8 deletions.
diff --git a/client/components/common/BasicModal/index.jsx b/client/components/common/BasicModal/index.jsx
@@ -48,7 +48,13 @@ const BasicModal = ({
     }, []);
 
     return (
-        <FocusTrapper isActive={show} trappedElId={`focus-trapped-${id}`}>
+        <FocusTrapper
+            isActive={show}
+            initialFocusRef={
+                initialFocusRef?.current ? initialFocusRef : headerRef
+            }
+            trappedElId={`focus-trapped-${id}`}
+        >
             <Modal
                 show={show}
                 id={`focus-trapped-${id}`}

diff --git a/client/components/common/FocusTrapper/index.jsx b/client/components/common/FocusTrapper/index.jsx
@@ -2,9 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { useEffect, useRef } from 'react';
 
-const FocusTrapper = ({ children, isActive, trappedElId }) => {
+const FocusTrapper = ({ children, isActive, initialFocusRef, trappedElId }) => {
     const focusableElsRef = useRef([]);
-
     const updateFocusableElements = () => {
         if (focusableElsRef.current.length > 0) return;
 
@@ -41,13 +40,22 @@ const FocusTrapper = ({ children, isActive, trappedElId }) => {
         const firstFocusableEl = focusableEls[1];
         // Last focusable element is before the blank 'after' div
         const lastFocusableEl = focusableEls[focusableEls.length - 2];
-
-        if (event.shiftKey && document.activeElement === firstFocusableEl) {
+        // When SHIFT + TAB is pressed and the active element is the first focusable element
+        if (
+            event.shiftKey &&
+            (document.activeElement === firstFocusableEl ||
+                document.activeElement === focusableEls[0] ||
+                document.activeElement === initialFocusRef.current)
+        ) {
             lastFocusableEl.focus();
             event.preventDefault();
-        } else if (
+        }
+        // When TAB is pressed and the active element is the last focusable element
+        else if (
             !event.shiftKey &&
-            document.activeElement === lastFocusableEl
+            (document.activeElement === lastFocusableEl ||
+                document.activeElement ===
+                    focusableEls[focusableEls.length - 1])
         ) {
             firstFocusableEl.focus();
             event.preventDefault();
@@ -60,9 +68,11 @@ const FocusTrapper = ({ children, isActive, trappedElId }) => {
             document.addEventListener('keydown', trapFocus);
         } else {
             document.removeEventListener('keydown', trapFocus);
+            focusableElsRef.current = [];
         }
 
         return () => {
+            focusableElsRef.current = [];
             document.removeEventListener('keydown', trapFocus);
         };
     }, [isActive]);
@@ -73,7 +83,10 @@ const FocusTrapper = ({ children, isActive, trappedElId }) => {
 FocusTrapper.propTypes = {
     children: PropTypes.node.isRequired,
     isActive: PropTypes.bool.isRequired,
-    trappedElId: PropTypes.string.isRequired
+    trappedElId: PropTypes.string.isRequired,
+    initialFocusRef: PropTypes.shape({
+        current: PropTypes.object
+    })
 };
 
 export default FocusTrapper;