Trap focus when navigation is open

Author: mcecode

src/components/page/header.astro

@@ -3,6 +3,7 @@ import "@styles/header.scss";
 
 import {
   headerId,
+  logoId,
   logoTitleId,
   menuButtonId,
   menuTemplateId,
@@ -18,7 +19,7 @@ import {
 ---
 
 <header id={headerId} class="header no-decor">
-  <a class="logo" href="/" aria-labelledby={logoTitleId}>
+  <a id={logoId} class="logo" href="/" aria-labelledby={logoTitleId}>
     <svg
       class="logo-svg"
       width="124"
@@ -95,6 +96,7 @@ import {
 <script>
   import {
     headerId,
+    logoId,
     menuButtonId,
     menuTemplateId,
     modeButtonId,
@@ -105,6 +107,7 @@ import {
     navId,
     navListId
   } from "@components/page/header.ids";
+  import FocusTrap from "@lib/focus-trap";
   import Store from "@lib/store.ts";
   import { colors } from "@styles/data/colors.json";
 
@@ -117,9 +120,11 @@ import {
     (document.getElementById(menuTemplateId) as HTMLTemplateElement).content
   );
 
+  const logo = document.getElementById(logoId) as HTMLAnchorElement;
   const navList = document.getElementById(navListId) as HTMLUListElement;
   const menuButton = document.getElementById(menuButtonId) as HTMLButtonElement;
   const modeButton = document.getElementById(modeButtonId) as HTMLButtonElement;
+  const headerFocusTrap = new FocusTrap(header, logo, modeButton);
 
   menuButton.addEventListener("click", () => {
     document.body.classList.toggle("open-nav");
@@ -144,6 +149,8 @@ import {
         modeButton.classList.add("vanish");
       });
     }
+
+    headerFocusTrap.toggleLock();
   });
 
   // 'navList' and 'modeButton' animations end at the same time so put

src/components/page/header.ids.ts

@@ -1,5 +1,6 @@
 export const headerId = "";
 
+export const logoId = "";
 export const logoTitleId = "";
 
 export const navId = "";

src/lib/focus-trap.ts

@@ -0,0 +1,100 @@
+export default class FocusTrap {
+  static #isLocked = false;
+  static #currentKey = "";
+
+  #container: HTMLElement;
+  #key: string;
+  #listener: (e: KeyboardEvent) => void;
+
+  constructor(container: HTMLElement, start: HTMLElement, end: HTMLElement) {
+    this.#container = container;
+    this.#key = crypto.getRandomValues(new Uint8Array(10)).join("");
+    this.#listener = (e) => {
+      if (e.key.toLowerCase() !== "tab") {
+        return;
+      }
+
+      if (e.shiftKey && document.activeElement === start) {
+        e.preventDefault();
+        end.focus();
+        return;
+      }
+
+      if (!e.shiftKey && document.activeElement === end) {
+        e.preventDefault();
+        start.focus();
+      }
+    };
+  }
+
+  get isLocked() {
+    return FocusTrap.#isLocked;
+  }
+
+  lock() {
+    if (FocusTrap.#isLocked) {
+      throw new Error("Focus trap is already locked.");
+    }
+
+    addEventListener("keydown", this.#listener);
+    FocusTrap.#isLocked = true;
+    FocusTrap.#currentKey = this.#key;
+
+    this.#hideElements(document.body, this.#container);
+  }
+
+  #hideElements(root: Element, exception: Element) {
+    for (const child of root.children) {
+      if (child === exception) {
+        continue;
+      }
+
+      if (child.contains(exception)) {
+        this.#hideElements(child, exception);
+        continue;
+      }
+
+      child.setAttribute("aria-hidden", "true");
+    }
+  }
+
+  unlock() {
+    if (!FocusTrap.#isLocked) {
+      return;
+    }
+
+    if (FocusTrap.#currentKey !== this.#key) {
+      throw new Error("Cannot unlock a lock set by another focus trap.");
+    }
+
+    removeEventListener("keydown", this.#listener);
+    FocusTrap.#isLocked = false;
+    FocusTrap.#currentKey = "";
+
+    this.#unhideElements(document.body, this.#container);
+  }
+
+  #unhideElements(root: Element, exception: Element) {
+    for (const child of root.children) {
+      if (child === exception) {
+        continue;
+      }
+
+      if (child.contains(exception)) {
+        this.#hideElements(child, exception);
+        continue;
+      }
+
+      child.removeAttribute("aria-hidden");
+    }
+  }
+
+  toggleLock() {
+    if (FocusTrap.#isLocked) {
+      this.unlock();
+      return;
+    }
+
+    this.lock();
+  }
+}