@reshaped/utilities 3.9.1-canary.2 → 3.10.0-canary.4

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 {};