fix (a11y): trap focus when navigation flyout is active (#829)

* fix (a11y): trap focus when flyout is active * chore: improve readability * chore: use a constant for readability --------- Co-authored-by: noa.santo <[email protected]>
satellytes · Nov 6, 2024 · b634e86 · b634e86
1 parent 72f9357
commit b634e86
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 1 deletion.
diff --git a/src/components/layout/header/header.tsx b/src/components/layout/header/header.tsx
@@ -137,6 +137,7 @@ const Header: React.FC<HeaderProps> = (props) => {
     Boolean(props.transparent),
   );
   const [hoverWithTransition, setHoverWithTransition] = useState(true);
+  const burgerMenuRef = React.createRef<HTMLButtonElement>();
 
   const transparent = Boolean(props.transparent);
 
@@ -186,6 +187,7 @@ const Header: React.FC<HeaderProps> = (props) => {
             setIsNavigationVisible(!isNavigationVisible);
             setHoverWithTransition(false);
           }}
+          ref={burgerMenuRef}
         >
           {!isNavigationVisible ? (
             <BurgerMenu
@@ -204,6 +206,7 @@ const Header: React.FC<HeaderProps> = (props) => {
         )}
         translation={props.translation}
         setIsNavigationVisible={setIsNavigationVisible}
+        burgerRef={burgerMenuRef}
       />
     </StyledHeader>
   );

diff --git a/src/components/layout/header/menu-flyout.tsx b/src/components/layout/header/menu-flyout.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import styled, { createGlobalStyle } from 'styled-components';
 import Navigation from '../navigation/navigation';
 
@@ -60,12 +60,65 @@ interface NavigationFlyoutProp {
   translation?: string;
   showLanguageSwitch?: boolean;
   setIsNavigationVisible: (b: boolean) => void;
+  burgerRef: React.RefObject<HTMLButtonElement>;
 }
 
 export const NavigationFlyout: React.FC<NavigationFlyoutProp> = (props) => {
+  const overlayRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const preventFocusOfNonFlyoutContent = (visible: boolean) => {
+      const focusableElements = overlayRef.current?.querySelectorAll(
+        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])',
+      ) as NodeListOf<HTMLElement>;
+
+      const firstFocusableElement = focusableElements?.[0];
+      const lastFocusableElement =
+        focusableElements?.[focusableElements.length - 1];
+
+      const handleFocus = (event: KeyboardEvent) => {
+        if (event.key !== 'Tab') {
+          return;
+        }
+        const shiftKeyPressed = event.shiftKey;
+        const activeElement = document.activeElement;
+        const burgerElement = props.burgerRef.current;
+        if (shiftKeyPressed && activeElement === burgerElement) {
+          lastFocusableElement?.focus();
+          event.preventDefault();
+        }
+        if (!shiftKeyPressed && activeElement === burgerElement) {
+          firstFocusableElement?.focus();
+          event.preventDefault();
+        }
+        if (shiftKeyPressed && activeElement === firstFocusableElement) {
+          burgerElement?.focus();
+          event.preventDefault();
+        }
+        if (!shiftKeyPressed && activeElement === lastFocusableElement) {
+          burgerElement?.focus();
+          event.preventDefault();
+        }
+      };
+
+      if (visible) {
+        document.addEventListener('keydown', handleFocus);
+      } else {
+        document.removeEventListener('keydown', handleFocus);
+      }
+
+      return () => {
+        document.removeEventListener('keydown', handleFocus);
+      };
+    };
+
+    preventFocusOfNonFlyoutContent(props.visible);
+  }, [props.visible]);
+
   return (
     <>
       <FullscreenOverlay
+        ref={overlayRef}
         $visible={props.visible}
         onClick={props.onClick}
         aria-hidden={!props.visible}