@reshaped/utilities 3.9.1-canary.3 → 3.10.0-canary.5

package/dist/a11y/focus.js

@@ -0,0 +1,101 @@
+import { getShadowRoot } from "../dom/index.js";
+const pseudoFocusAttribute = "data-rs-focus";
+export const focusableSelector = 'a,button,input:not([type="hidden"]),textarea,select,details,[tabindex],[contenteditable]';
+export const getActiveElement = (originEl) => {
+    const shadowRoot = originEl ? getShadowRoot(originEl) : null;
+    const rootEl = shadowRoot ?? document;
+    const pseudoFocusedEl = rootEl.querySelector(`[${pseudoFocusAttribute}]`);
+    return (pseudoFocusedEl || rootEl.activeElement);
+};
+export const focusElement = (el, options) => {
+    const shadowRoot = getShadowRoot(el);
+    const rootEl = shadowRoot ?? document;
+    rootEl.querySelector(`[${pseudoFocusAttribute}]`)?.removeAttribute(pseudoFocusAttribute);
+    if (options?.pseudoFocus) {
+        el.setAttribute(pseudoFocusAttribute, "true");
+    }
+    else {
+        el.focus();
+    }
+};
+export const getFocusableElements = (rootEl, options) => {
+    const focusableElements = Array.from(rootEl.querySelectorAll(focusableSelector));
+    const filteredElements = focusableElements.filter((el) => {
+        if (el.hasAttribute("disabled"))
+            return false;
+        if (el.clientHeight === 0)
+            return false;
+        // Using getAttribute here since browser sets el.tabIndex to -1 by default
+        if (!options?.includeNegativeTabIndex && el.getAttribute("tabindex") === "-1")
+            return false;
+        if (el.type === "radio") {
+            let sameNameRadioEls;
+            if (el.form) {
+                const formInputs = el.form.elements.namedItem(el.name);
+                // Synthetic error handling for narrowing down types
+                // Radio element can't find itself in the form, so we don't need to include it in the array
+                if (!formInputs)
+                    return false;
+                const multipleElementsFound = "length" in formInputs;
+                if (!multipleElementsFound) {
+                    // Single element found is always an input radio since we're inside the condition
+                    sameNameRadioEls = [formInputs];
+                }
+                else {
+                    sameNameRadioEls = Array.from(formInputs).filter((el) => "type" in el && el.type === "radio");
+                }
+            }
+            else {
+                sameNameRadioEls = Array.from(rootEl.querySelectorAll(`[type="radio"][name="${el.name}"]`));
+            }
+            if (sameNameRadioEls?.length) {
+                const checkedEl = Array.from(sameNameRadioEls).find((el) => el.checked);
+                if (checkedEl && el !== checkedEl)
+                    return false;
+                if (!checkedEl && el !== sameNameRadioEls[0])
+                    return false;
+            }
+        }
+        return true;
+    });
+    if (options?.additionalElement && filteredElements.length) {
+        filteredElements.unshift(options.additionalElement);
+    }
+    return filteredElements;
+};
+export const getFocusData = (args) => {
+    const { root, target, options } = args;
+    const focusable = getFocusableElements(root, {
+        additionalElement: options?.additionalElement,
+        includeNegativeTabIndex: options?.includeNegativeTabIndex,
+    });
+    const focusableLimit = focusable.length - 1;
+    const currentElement = getActiveElement(root);
+    const currentIndex = focusable.indexOf(currentElement);
+    const positions = {
+        next: currentIndex + 1,
+        prev: currentIndex - 1,
+        first: 0,
+        last: focusableLimit,
+    };
+    let nextIndex = positions[target];
+    const isOverflow = nextIndex > focusableLimit || nextIndex < 0;
+    if (isOverflow) {
+        if (options?.circular) {
+            nextIndex = target === "prev" ? positions.last : positions.first;
+        }
+        else {
+            nextIndex = target === "prev" ? positions.first : positions.last;
+        }
+    }
+    return { overflow: isOverflow, el: focusable[nextIndex], focusableElements: focusable };
+};
+const focusTargetElement = (root, target, options) => {
+    const data = getFocusData({ root, target, options });
+    focusElement(data.el);
+    return { el: data.el, focusableElements: data.focusableElements };
+};
+export const focusNextElement = (root, options) => focusTargetElement(root, "next", { ...options, includeNegativeTabIndex: true });
+export const focusPreviousElement = (root, options) => focusTargetElement(root, "prev", { ...options, includeNegativeTabIndex: true });
+export const focusFirstElement = (root) => focusTargetElement(root, "first", { includeNegativeTabIndex: true });
+export const focusLastElement = (root) => focusTargetElement(root, "last", { includeNegativeTabIndex: true });

package/dist/a11y/index.d.ts

@@ -0,0 +1,4 @@
+export { focusableSelector, getActiveElement, getFocusableElements, focusNextElement, focusPreviousElement, focusFirstElement, focusLastElement, } from "./focus";
+export { activateKeyboardMode, deactivateKeyboardMode, checkKeyboardMode } from "./keyboardMode";
+export { default as TrapFocus } from "./TrapFocus";
+export type { TrapMode, FocusableElement } from "./types";

package/dist/a11y/index.js

@@ -0,0 +1,3 @@
+export { focusableSelector, getActiveElement, getFocusableElements, focusNextElement, focusPreviousElement, focusFirstElement, focusLastElement, } from "./focus.js";
+export { activateKeyboardMode, deactivateKeyboardMode, checkKeyboardMode } from "./keyboardMode.js";
+export { default as TrapFocus } from "./TrapFocus.js";

package/dist/a11y/keyboardMode.d.ts

@@ -0,0 +1,4 @@
+export declare const keyboardModeAttribute = "data-rs-keyboard";
+export declare const activateKeyboardMode: () => void;
+export declare const deactivateKeyboardMode: () => void;
+export declare const checkKeyboardMode: () => boolean;

package/dist/a11y/keyboardMode.js

@@ -0,0 +1,10 @@
+export const keyboardModeAttribute = "data-rs-keyboard";
+export const activateKeyboardMode = () => {
+    document.documentElement.setAttribute(keyboardModeAttribute, "true");
+};
+export const deactivateKeyboardMode = () => {
+    document.documentElement.removeAttribute(keyboardModeAttribute);
+};
+export const checkKeyboardMode = () => {
+    return document.documentElement.hasAttribute(keyboardModeAttribute);
+};

package/dist/a11y/tests/Chain.test.js

@@ -0,0 +1,88 @@
+import { expect, test, describe, beforeEach } from "vitest";
+import Chain from "../Chain.js";
+describe("a11y/Chain", () => {
+    let chain;
+    beforeEach(() => {
+        chain = new Chain();
+    });
+    test("initializes as empty", () => {
+        expect(chain.isEmpty()).toBe(true);
+        expect(chain.getAll()).toEqual({});
+        expect(chain.tailId).toBe(null);
+    });
+    test("adds items and maintains chain order", () => {
+        const id1 = chain.add("first");
+        const id2 = chain.add("second");
+        const id3 = chain.add("third");
+        expect(chain.isEmpty()).toBe(false);
+        expect(chain.get(id1)).toEqual({ previousId: null, data: "first", nextId: id2 });
+        expect(chain.get(id2)).toEqual({ previousId: id1, data: "second", nextId: id3 });
+        expect(chain.get(id3)).toEqual({ previousId: id2, data: "third" });
+        expect(chain.tailId).toBe(id3);
+    });
+    test("identifies last item correctly", () => {
+        const id1 = chain.add("first");
+        const id2 = chain.add("second");
+        expect(chain.isLast(id1)).toBe(false);
+        expect(chain.isLast(id2)).toBe(true);
+    });
+    test("removes middle item and reconnects chain", () => {
+        const id1 = chain.add("first");
+        const id2 = chain.add("second");
+        const id3 = chain.add("third");
+        const removed = chain.remove(id2);
+        expect(removed).toBe("second");
+        expect(chain.get(id1).nextId).toBe(id3);
+        expect(chain.get(id3).previousId).toBe(id1);
+        expect(chain.get(id2)).toBeUndefined();
+    });
+    test("removes last item and updates tail", () => {
+        const id1 = chain.add("first");
+        const id2 = chain.add("second");
+        chain.remove(id2);
+        expect(chain.tailId).toBe(id1);
+        expect(chain.get(id1).nextId).toBe(null);
+    });
+    test("removes first item", () => {
+        const id1 = chain.add("first");
+        const id2 = chain.add("second");
+        chain.remove(id1);
+        expect(chain.get(id2).previousId).toBe(null);
+        expect(chain.get(id1)).toBeUndefined();
+    });
+    test("removes all items leaving chain empty", () => {
+        const id1 = chain.add("only");
+        chain.remove(id1);
+        expect(chain.isEmpty()).toBe(true);
+        expect(chain.tailId).toBe(null);
+    });
+    test("handles removing non-existent item", () => {
+        chain.add("first");
+        const result = chain.remove(999);
+        expect(result).toBeUndefined();
+    });
+    test("removes previous items until condition is met", () => {
+        const id1 = chain.add("first");
+        const id2 = chain.add("second");
+        const id3 = chain.add("third");
+        const id4 = chain.add("fourth");
+        const result = chain.removePreviousTill(id4, (item) => item.data === "second");
+        // Last deleted id
+        expect(result).toBe("second");
+        // Keeps only the first item
+        expect(chain.get(id1)).toEqual({ previousId: null, nextId: null, data: "first" });
+        expect(chain.get(id2)).toBeUndefined();
+        expect(chain.get(id3)).toBeUndefined();
+        expect(chain.get(id4)).toBeUndefined();
+        expect(chain.tailId).toBe(id1);
+    });
+    test("removePreviousTill stops at first item when condition never met", () => {
+        const id1 = chain.add("first");
+        const id2 = chain.add("second");
+        const result = chain.removePreviousTill(id2, () => false);
+        expect(result).toBe("first");
+        expect(chain.get(id1)).toBeUndefined();
+        expect(chain.get(id2)).toBeUndefined();
+        expect(chain.isEmpty()).toBe(true);
+    });
+});

package/dist/a11y/tests/TrapFocus.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/a11y/tests/TrapFocus.test.js

@@ -0,0 +1,313 @@
+import { expect, test, describe, beforeEach, afterEach, vi } from "vitest";
+import TrapFocus from "../TrapFocus.js";
+describe("a11y/TrapFocus", () => {
+    let container;
+    let trigger;
+    beforeEach(() => {
+        container = document.createElement("div");
+        document.body.appendChild(container);
+        trigger = document.createElement("button");
+        trigger.textContent = "Trigger";
+        document.body.appendChild(trigger);
+        trigger.focus();
+    });
+    afterEach(() => {
+        document.body.removeChild(container);
+        document.body.removeChild(trigger);
+    });
+    describe("basic functionality", () => {
+        test("traps focus within root element", () => {
+            container.innerHTML = `
+				<button id="btn1">Button 1</button>
+				<button id="btn2">Button 2</button>
+			`;
+            const trap = new TrapFocus();
+            trap.trap(container);
+            expect(trap.trapped).toBe(true);
+            // Should focus first element
+            expect(document.activeElement?.id).toBe("btn1");
+        });
+        test("releases trap and returns focus to trigger", () => {
+            container.innerHTML = `
+				<button id="btn1">Button 1</button>
+				<button id="btn2">Button 2</button>
+			`;
+            const trap = new TrapFocus();
+            trap.trap(container);
+            trap.release();
+            expect(trap.trapped).toBe(false);
+            expect(document.activeElement).toBe(trigger);
+        });
+        test("does not trap when no focusable elements", () => {
+            container.innerHTML = `<div>No focusable content</div>`;
+            const trap = new TrapFocus();
+            trap.trap(container);
+            expect(trap.trapped).toBeUndefined();
+        });
+        test("focuses initialFocusEl when provided", () => {
+            container.innerHTML = `
+				<button id="btn1">Button 1</button>
+				<button id="btn2">Button 2</button>
+			`;
+            const btn2 = container.querySelector("#btn2");
+            const trap = new TrapFocus();
+            trap.trap(container, { initialFocusEl: btn2 });
+            expect(document.activeElement).toBe(btn2);
+        });
+        test("calls onRelease callback when trap is released by Tab navigation", () => {
+            container.innerHTML = `<button id="btn1">Button 1</button>`;
+            const onRelease = vi.fn();
+            const trap = new TrapFocus();
+            trap.trap(container, { mode: "action-menu", onRelease });
+            const btn1 = container.querySelector("#btn1");
+            btn1.focus();
+            // Tab should release action-menu mode
+            const event = new KeyboardEvent("keydown", { key: "Tab", bubbles: true });
+            document.dispatchEvent(event);
+            expect(onRelease).toHaveBeenCalled();
+        });
+    });
+    describe("dialog mode", () => {
+        test("navigates forward with Tab key", () => {
+            container.innerHTML = `
+				<button id="btn1">Button 1</button>
+				<button id="btn2">Button 2</button>
+				<button id="btn3">Button 3</button>
+			`;
+            const trap = new TrapFocus();
+            trap.trap(container, { mode: "dialog" });
+            const btn1 = container.querySelector("#btn1");
+            const btn2 = container.querySelector("#btn2");
+            btn1.focus();
+            const event = new KeyboardEvent("keydown", { key: "Tab", bubbles: true, cancelable: true });
+            document.dispatchEvent(event);
+            expect(document.activeElement).toBe(btn2);
+        });
+        test("navigates backward with Shift+Tab", () => {
+            container.innerHTML = `
+				<button id="btn1">Button 1</button>
+				<button id="btn2">Button 2</button>
+				<button id="btn3">Button 3</button>
+			`;
+            const trap = new TrapFocus();
+            trap.trap(container, { mode: "dialog" });
+            const btn1 = container.querySelector("#btn1");
+            const btn2 = container.querySelector("#btn2");
+            btn2.focus();
+            const event = new KeyboardEvent("keydown", {
+                key: "Tab",
+                shiftKey: true,
+                bubbles: true,
+                cancelable: true,
+            });
+            document.dispatchEvent(event);
+            expect(document.activeElement).toBe(btn1);
+        });
+        test("wraps focus to first element when tabbing from last", () => {
+            container.innerHTML = `
+				<button id="btn1">Button 1</button>
+				<button id="btn2">Button 2</button>
+			`;
+            const trap = new TrapFocus();
+            trap.trap(container, { mode: "dialog" });
+            const btn1 = container.querySelector("#btn1");
+            const btn2 = container.querySelector("#btn2");
+            btn2.focus();
+            const event = new KeyboardEvent("keydown", { key: "Tab", bubbles: true, cancelable: true });
+            document.dispatchEvent(event);
+            expect(document.activeElement).toBe(btn1);
+        });
+    });
+    describe("action-menu mode", () => {
+        test("navigates with ArrowDown key", () => {
+            container.innerHTML = `
+				<button id="btn1">Button 1</button>
+				<button id="btn2">Button 2</button>
+			`;
+            const trap = new TrapFocus();
+            trap.trap(container, { mode: "action-menu" });
+            const btn1 = container.querySelector("#btn1");
+            const btn2 = container.querySelector("#btn2");
+            btn1.focus();
+            const event = new KeyboardEvent("keydown", {
+                key: "ArrowDown",
+                bubbles: true,
+                cancelable: true,
+            });
+            document.dispatchEvent(event);
+            expect(document.activeElement).toBe(btn2);
+        });
+        test("navigates with ArrowUp key", () => {
+            container.innerHTML = `
+				<button id="btn1">Button 1</button>
+				<button id="btn2">Button 2</button>
+			`;
+            const trap = new TrapFocus();
+            trap.trap(container, { mode: "action-menu" });
+            const btn1 = container.querySelector("#btn1");
+            const btn2 = container.querySelector("#btn2");
+            btn2.focus();
+            const event = new KeyboardEvent("keydown", {
+                key: "ArrowUp",
+                bubbles: true,
+                cancelable: true,
+            });
+            document.dispatchEvent(event);
+            expect(document.activeElement).toBe(btn1);
+        });
+        test("releases trap when Tab is pressed", () => {
+            container.innerHTML = `<button id="btn1">Button 1</button>`;
+            const trap = new TrapFocus();
+            trap.trap(container, { mode: "action-menu" });
+            const btn1 = container.querySelector("#btn1");
+            btn1.focus();
+            const event = new KeyboardEvent("keydown", { key: "Tab", bubbles: true, cancelable: true });
+            document.dispatchEvent(event);
+            expect(trap.trapped).toBe(false);
+        });
+    });
+    describe("action-bar mode", () => {
+        test("navigates with ArrowRight key", () => {
+            container.innerHTML = `
+				<button id="btn1">Button 1</button>
+				<button id="btn2">Button 2</button>
+			`;
+            const trap = new TrapFocus();
+            trap.trap(container, { mode: "action-bar" });
+            const btn1 = container.querySelector("#btn1");
+            const btn2 = container.querySelector("#btn2");
+            btn1.focus();
+            const event = new KeyboardEvent("keydown", {
+                key: "ArrowRight",
+                bubbles: true,
+                cancelable: true,
+            });
+            document.dispatchEvent(event);
+            expect(document.activeElement).toBe(btn2);
+        });
+        test("navigates with ArrowLeft key", () => {
+            container.innerHTML = `
+				<button id="btn1">Button 1</button>
+				<button id="btn2">Button 2</button>
+			`;
+            const trap = new TrapFocus();
+            trap.trap(container, { mode: "action-bar" });
+            const btn1 = container.querySelector("#btn1");
+            const btn2 = container.querySelector("#btn2");
+            btn2.focus();
+            const event = new KeyboardEvent("keydown", {
+                key: "ArrowLeft",
+                bubbles: true,
+                cancelable: true,
+            });
+            document.dispatchEvent(event);
+            expect(document.activeElement).toBe(btn1);
+        });
+    });
+    describe("content-menu mode", () => {
+        test("releases trap when tabbing past last element", () => {
+            container.innerHTML = `
+				<button id="btn1">Button 1</button>
+				<button id="btn2">Button 2</button>
+			`;
+            const trap = new TrapFocus();
+            trap.trap(container, { mode: "content-menu" });
+            const btn2 = container.querySelector("#btn2");
+            btn2.focus();
+            const event = new KeyboardEvent("keydown", { key: "Tab", bubbles: true, cancelable: true });
+            document.dispatchEvent(event);
+            expect(trap.trapped).toBe(false);
+        });
+        test("continues navigation when not at boundaries", () => {
+            container.innerHTML = `
+				<button id="btn1">Button 1</button>
+				<button id="btn2">Button 2</button>
+				<button id="btn3">Button 3</button>
+			`;
+            const trap = new TrapFocus();
+            trap.trap(container, { mode: "content-menu" });
+            const btn1 = container.querySelector("#btn1");
+            const btn2 = container.querySelector("#btn2");
+            btn1.focus();
+            const event = new KeyboardEvent("keydown", { key: "Tab", bubbles: true, cancelable: true });
+            document.dispatchEvent(event);
+            expect(document.activeElement).toBe(btn2);
+            expect(trap.trapped).toBe(true);
+        });
+    });
+    describe("selection-menu mode", () => {
+        test("uses pseudo focus with data-rs-focus attribute", () => {
+            container.innerHTML = `
+				<button id="btn1">Button 1</button>
+				<button id="btn2">Button 2</button>
+			`;
+            const trap = new TrapFocus();
+            trap.trap(container, { mode: "selection-menu" });
+            const btn1 = container.querySelector("#btn1");
+            const btn2 = container.querySelector("#btn2");
+            // First element should have pseudo focus
+            expect(btn1.getAttribute("data-rs-focus")).toBe("true");
+            // Navigate with arrow down
+            const event = new KeyboardEvent("keydown", {
+                key: "ArrowDown",
+                bubbles: true,
+                cancelable: true,
+            });
+            document.dispatchEvent(event);
+            // Pseudo focus should move
+            expect(btn1.hasAttribute("data-rs-focus")).toBe(false);
+            expect(btn2.getAttribute("data-rs-focus")).toBe("true");
+        });
+    });
+    describe("includeTrigger option", () => {
+        test("includes trigger in focus navigation when enabled", () => {
+            container.innerHTML = `<button id="btn1">Button 1</button>`;
+            const trap = new TrapFocus();
+            trap.trap(container, { mode: "dialog", includeTrigger: true });
+            const btn1 = container.querySelector("#btn1");
+            // Trigger should be first in navigation order
+            expect(document.activeElement).toBe(trigger);
+            // Tab should move to btn1
+            const event = new KeyboardEvent("keydown", { key: "Tab", bubbles: true, cancelable: true });
+            document.dispatchEvent(event);
+            expect(document.activeElement).toBe(btn1);
+        });
+    });
+    describe("chain management", () => {
+        test("manages multiple traps in a chain", () => {
+            const container1 = document.createElement("div");
+            container1.innerHTML = `<button id="btn1">Container 1</button>`;
+            document.body.appendChild(container1);
+            const container2 = document.createElement("div");
+            container2.innerHTML = `<button id="btn2">Container 2</button>`;
+            document.body.appendChild(container2);
+            const trap1 = new TrapFocus();
+            const trap2 = new TrapFocus();
+            trap1.trap(container1);
+            const btn1 = container1.querySelector("#btn1");
+            btn1.focus();
+            trap2.trap(container2);
+            // Only the last trap should respond to events
+            const btn2 = container2.querySelector("#btn2");
+            expect(document.activeElement).toBe(btn2);
+            // Release second trap
+            trap2.release();
+            // First trap should be restored
+            expect(document.activeElement).toBe(btn1);
+            trap1.release();
+            document.body.removeChild(container1);
+            document.body.removeChild(container2);
+        });
+    });
+    describe("release options", () => {
+        test("does not return focus to trigger with withoutFocusReturn option", () => {
+            container.innerHTML = `<button id="btn1">Button 1</button>`;
+            const btn1 = container.querySelector("#btn1");
+            const trap = new TrapFocus();
+            trap.trap(container);
+            btn1.focus();
+            trap.release({ withoutFocusReturn: true });
+            expect(document.activeElement).not.toBe(trigger);
+        });
+    });
+});

package/dist/a11y/tests/TrapScreenReader.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/a11y/tests/TrapScreenReader.test.js

@@ -0,0 +1,126 @@
+import { expect, test, describe, beforeEach, afterEach } from "vitest";
+import TrapScreenReader from "../TrapScreenReader.js";
+describe("a11y/TrapScreenReader", () => {
+    let container;
+    beforeEach(() => {
+        container = document.createElement("div");
+        document.body.appendChild(container);
+    });
+    afterEach(() => {
+        document.body.removeChild(container);
+    });
+    test("hides siblings from screen reader when trap is activated", () => {
+        container.innerHTML = `
+			<div id="sibling1">Sibling 1</div>
+			<div id="target">Target</div>
+			<div id="sibling2">Sibling 2</div>
+		`;
+        const target = container.querySelector("#target");
+        const sibling1 = container.querySelector("#sibling1");
+        const sibling2 = container.querySelector("#sibling2");
+        const trap = new TrapScreenReader(target);
+        trap.trap();
+        expect(sibling1.getAttribute("aria-hidden")).toBe("true");
+        expect(sibling2.getAttribute("aria-hidden")).toBe("true");
+        expect(target.hasAttribute("aria-hidden")).toBe(false);
+    });
+    test("releases trapped elements and removes aria-hidden", () => {
+        container.innerHTML = `
+			<div id="sibling1">Sibling 1</div>
+			<div id="target">Target</div>
+			<div id="sibling2">Sibling 2</div>
+		`;
+        const target = container.querySelector("#target");
+        const sibling1 = container.querySelector("#sibling1");
+        const sibling2 = container.querySelector("#sibling2");
+        const trap = new TrapScreenReader(target);
+        trap.trap();
+        trap.release();
+        expect(sibling1.hasAttribute("aria-hidden")).toBe(false);
+        expect(sibling2.hasAttribute("aria-hidden")).toBe(false);
+    });
+    test("traverses up the DOM tree and hides siblings at each level", () => {
+        container.innerHTML = `
+			<div id="outer-sibling">Outer Sibling</div>
+			<div id="parent">
+				<div id="inner-sibling">Inner Sibling</div>
+				<div id="target">Target</div>
+			</div>
+		`;
+        const target = container.querySelector("#target");
+        const innerSibling = container.querySelector("#inner-sibling");
+        const outerSibling = container.querySelector("#outer-sibling");
+        const parent = container.querySelector("#parent");
+        const trap = new TrapScreenReader(target);
+        trap.trap();
+        // Inner sibling should be hidden
+        expect(innerSibling.getAttribute("aria-hidden")).toBe("true");
+        // Outer sibling should be hidden
+        expect(outerSibling.getAttribute("aria-hidden")).toBe("true");
+        // Parent and target should not be hidden
+        expect(parent.hasAttribute("aria-hidden")).toBe(false);
+        expect(target.hasAttribute("aria-hidden")).toBe(false);
+    });
+    test("does not hide elements that already have aria-hidden", () => {
+        container.innerHTML = `
+			<div id="sibling1" aria-hidden="true">Already Hidden</div>
+			<div id="target">Target</div>
+			<div id="sibling2">Sibling 2</div>
+		`;
+        const target = container.querySelector("#target");
+        const sibling1 = container.querySelector("#sibling1");
+        const sibling2 = container.querySelector("#sibling2");
+        const trap = new TrapScreenReader(target);
+        trap.trap();
+        // sibling1 should still be aria-hidden but not tracked
+        expect(sibling1.getAttribute("aria-hidden")).toBe("true");
+        expect(sibling2.getAttribute("aria-hidden")).toBe("true");
+        trap.release();
+        // sibling1 should still have aria-hidden (wasn't added by trap)
+        expect(sibling1.getAttribute("aria-hidden")).toBe("true");
+        // sibling2 should have aria-hidden removed (was added by trap)
+        expect(sibling2.hasAttribute("aria-hidden")).toBe(false);
+    });
+    test("stops at body level and does not hide body siblings", () => {
+        const outsideContainer = document.createElement("div");
+        outsideContainer.id = "outside";
+        document.body.appendChild(outsideContainer);
+        container.innerHTML = `<div id="target">Target</div>`;
+        const target = container.querySelector("#target");
+        const trap = new TrapScreenReader(target);
+        trap.trap();
+        // Container's sibling (outsideContainer) should be hidden
+        expect(outsideContainer.getAttribute("aria-hidden")).toBe("true");
+        trap.release();
+        document.body.removeChild(outsideContainer);
+    });
+    test("releases previous trap when trap is called again", () => {
+        container.innerHTML = `
+			<div id="sibling1">Sibling 1</div>
+			<div id="target">Target</div>
+			<div id="sibling2">Sibling 2</div>
+		`;
+        const target = container.querySelector("#target");
+        const sibling1 = container.querySelector("#sibling1");
+        const sibling2 = container.querySelector("#sibling2");
+        const trap = new TrapScreenReader(target);
+        // First trap
+        trap.trap();
+        expect(sibling1.getAttribute("aria-hidden")).toBe("true");
+        // Second trap should release first
+        trap.trap();
+        expect(sibling1.getAttribute("aria-hidden")).toBe("true");
+        expect(sibling2.getAttribute("aria-hidden")).toBe("true");
+    });
+    test("ignores non-element nodes", () => {
+        const parent = document.createElement("div");
+        parent.appendChild(document.createTextNode("Text node"));
+        const target = document.createElement("div");
+        target.textContent = "Target";
+        parent.appendChild(target);
+        container.appendChild(parent);
+        const trap = new TrapScreenReader(target);
+        // Should not throw error when encountering text nodes
+        expect(() => trap.trap()).not.toThrow();
+    });
+});

package/dist/a11y/tests/focus.test.d.ts

@@ -0,0 +1 @@
+export {};