Navbar barrierearm

components/Navbar/Navbar.tsx

@@ -11,6 +11,7 @@ import { useSupportsHover } from "@/hooks/useSupportsHover";
 import { useToggleBodyOverflow } from "@/hooks/useToggleBodyOverflow";
 import styles from "./Navbar.module.css";
 import { NavbarSubMenu } from "./NavbarSubMenu";
+import { useIsDesktop } from "@/hooks/useIsDesktop";
 
 type BasicLink = {
   label: string;
@@ -21,10 +22,13 @@ export default function Navbar() {
   const pathname = usePathname();
   const navRef = useRef<HTMLElement | null>(null);
   const supportsHover = useSupportsHover();
+  const isDesktop = useIsDesktop(1024);
 
   const [instantSwitch, setInstantSwitch] = useState(false);
   const raf1Ref = useRef<number | null>(null);
   const raf2Ref = useRef<number | null>(null);
+  const hamburgerRef = useRef<HTMLButtonElement | null>(null);
+  const navLinksRef = useRef<HTMLUListElement | null>(null);
 
   const {
     menuOpen,
@@ -92,6 +96,66 @@ export default function Navbar() {
     </li>
   );
 
+  useEffect(() => {
+    if (isDesktop || !menuOpen) return;
+
+    const navEl = navRef.current;
+    if (!navEl) return;
+
+    const getFocusableElements = () =>
+      Array.from(
+        navEl.querySelectorAll<HTMLElement>(
+          'a[href], button:not([disabled]), [tabindex]:not([tabindex="-1"])',
+        ),
+      ).filter((el) => {
+        if (el.hasAttribute("inert")) return false;
+        if (el.closest("[inert]")) return false;
+        return true;
+      });
+
+    const firstMenuFocusable = navLinksRef.current?.querySelector<HTMLElement>(
+      'a[href], button:not([disabled]), [tabindex]:not([tabindex="-1"])',
+    );
+
+    firstMenuFocusable?.focus();
+
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        toggleMenu();
+        requestAnimationFrame(() => {
+          hamburgerRef.current?.focus();
+        });
+        return;
+      }
+
+      if (e.key !== "Tab") return;
+
+      const currentFocusable = getFocusableElements();
+      const currentFirst = currentFocusable[0];
+      const currentLast = currentFocusable[currentFocusable.length - 1];
+
+      if (!currentFirst || !currentLast) return;
+
+      if (e.shiftKey) {
+        if (document.activeElement === currentFirst) {
+          e.preventDefault();
+          currentLast.focus();
+        }
+      } else {
+        if (document.activeElement === currentLast) {
+          e.preventDefault();
+          currentFirst.focus();
+        }
+      }
+    };
+
+    document.addEventListener("keydown", onKeyDown);
+    return () => {
+      document.removeEventListener("keydown", onKeyDown);
+    };
+  }, [isDesktop, menuOpen, toggleMenu]);
+
   return (
     <nav className={styles["nav"]} ref={navRef} aria-label="Hauptnavigation">
       <div className={styles["nav-logo"]}>
@@ -107,20 +171,22 @@ export default function Navbar() {
         </Link>
       </div>
       <button
+        ref={hamburgerRef}
         type="button"
         className={`${styles["nav-hamburger"]} ${menuOpen ? styles.open : ""}`}
         onClick={toggleMenu}
         aria-label={menuOpen ? "Menü schließen" : "Menü öffnen"}
         aria-expanded={menuOpen}
-        aria-controls="Hauptmenü"
+        aria-controls="main-navigation"
       >
         <span></span>
         <span></span>
         <span></span>
       </button>
       <ul
+        ref={navLinksRef}
         id="main-navigation"
-        inert={!menuOpen}
+        inert={!isDesktop && !menuOpen}
         className={[
           styles["nav-links"],
           menuOpen ? styles.open : "",

hooks/useIsDesktop.ts

@@ -11,14 +11,11 @@ export function useIsDesktop(breakpoint = 1024) {
     const update = () => setIsDesktop(mql.matches);
 
     update();
+    mql.addEventListener("change", update);
 
-    if (mql.addEventListener) {
+    return () => {
-      mql.addEventListener("change", update);
+      mql.removeEventListener("change", update);
-      return () => mql.removeEventListener("change", update);
+    };
-    }
-
-    mql.addListener(update);
-    return () => mql.removeListener(update);
   }, [breakpoint]);
 
   return isDesktop;