Revert "Handle focus leaving non-focusable header element backwards i…

…n FocusTrapper" This reverts commit 57012cb.
w3c · Dec 4, 2023 · 7783342 · 7783342
1 parent 57012cb
commit 7783342
Show file tree

Hide file tree

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