@rivetjs/cdk 0.0.0-stage → 0.1.0-alpha.0

package/a11y/focus-trap.js

@@ -0,0 +1,378 @@
+// FocusTrap (tab anchors before / after the region, `cdkFocusRegionStart` / `End` / `cdkFocusInitial`
+// markers), FocusTrapFactory, the CdkTrapFocus directive behaviour, and the configurable focus trap
+// (FocusTrapManager stack + inert strategy that pulls escaped focus back).
+// Ported from Angular CDK a11y focus-trap (angular/components), MIT, © Google LLC.
+//
+// Rivet: no DI / NgZone; constructors take the element (+ optional checker / document). The
+// directive is `CdkTrapFocus` (a class: `attach()` after mount, `destroy()` on unmount); the
+// declarative `<FocusScope contain>` (react-aria) is the component-level alternative. "When ready"
+// waits for the next animation frame (Angular `afterNextRender`). Anchors carry Rivet's visually
+// hidden styles (`hideVisually`) next to the `cdk-visually-hidden` class. Browser only.
+import { hideVisually } from "./index.js";
+import { getInteractivityChecker } from "./interactivity-checker.js";
+function nextRender(fn) {
+    if (typeof requestAnimationFrame === "function")
+        requestAnimationFrame(() => fn());
+    else
+        setTimeout(fn);
+}
+/** The focused element, through open shadow roots. */
+export function _getFocusedElementPierceShadowDom() {
+    let activeElement = typeof document !== "undefined" && document ? document.activeElement : null;
+    while (activeElement && activeElement.shadowRoot) {
+        const newActiveElement = activeElement.shadowRoot.activeElement;
+        if (newActiveElement === activeElement)
+            break;
+        activeElement = newActiveElement;
+    }
+    return activeElement;
+}
+/**
+ * Traps Tab focus inside a region: focusable anchors before and after the element wrap focus to the
+ * last / first tabbable element. Does not stop programmatic or pointer focus from leaving.
+ */
+export class FocusTrap {
+    _startAnchor = null;
+    _endAnchor = null;
+    _hasAttached = false;
+    startAnchorListener = () => {
+        const isSuccess = this.focusLastTabbableElement();
+        if (!isSuccess && this._checker.isFocusable(this._element))
+            this._element.focus();
+    };
+    endAnchorListener = () => {
+        const isSuccess = this.focusFirstTabbableElement();
+        if (!isSuccess && this._checker.isFocusable(this._element))
+            this._element.focus();
+    };
+    /** Whether the trap is active (anchors tabbable). */
+    get enabled() {
+        return this._enabled;
+    }
+    set enabled(value) {
+        this._enabled = value;
+        if (this._startAnchor && this._endAnchor) {
+            this._toggleAnchorTabIndex(value, this._startAnchor);
+            this._toggleAnchorTabIndex(value, this._endAnchor);
+        }
+    }
+    _enabled = true;
+    _element;
+    _checker;
+    _document;
+    constructor(element, checker = getInteractivityChecker(), doc = document, deferAnchors = false) {
+        this._element = element;
+        this._checker = checker;
+        this._document = doc;
+        if (!deferAnchors)
+            this.attachAnchors();
+    }
+    /** Remove the anchors. */
+    destroy() {
+        const startAnchor = this._startAnchor;
+        const endAnchor = this._endAnchor;
+        if (startAnchor) {
+            startAnchor.removeEventListener("focus", this.startAnchorListener);
+            startAnchor.remove();
+        }
+        if (endAnchor) {
+            endAnchor.removeEventListener("focus", this.endAnchorListener);
+            endAnchor.remove();
+        }
+        this._startAnchor = this._endAnchor = null;
+        this._hasAttached = false;
+    }
+    /** Insert the anchors around the element; false when it has no parent yet. */
+    attachAnchors() {
+        if (this._hasAttached)
+            return true;
+        if (!this._startAnchor) {
+            this._startAnchor = this._createAnchor();
+            this._startAnchor.addEventListener("focus", this.startAnchorListener);
+        }
+        if (!this._endAnchor) {
+            this._endAnchor = this._createAnchor();
+            this._endAnchor.addEventListener("focus", this.endAnchorListener);
+        }
+        if (this._element.parentNode) {
+            this._element.parentNode.insertBefore(this._startAnchor, this._element);
+            this._element.parentNode.insertBefore(this._endAnchor, this._element.nextSibling);
+            this._hasAttached = true;
+        }
+        return this._hasAttached;
+    }
+    /** `focusInitialElement` after the next render. */
+    focusInitialElementWhenReady(options) {
+        return new Promise((resolve) => this._executeOnStable(() => resolve(this.focusInitialElement(options))));
+    }
+    /** `focusFirstTabbableElement` after the next render. */
+    focusFirstTabbableElementWhenReady(options) {
+        return new Promise((resolve) => this._executeOnStable(() => resolve(this.focusFirstTabbableElement(options))));
+    }
+    /** `focusLastTabbableElement` after the next render. */
+    focusLastTabbableElementWhenReady(options) {
+        return new Promise((resolve) => this._executeOnStable(() => resolve(this.focusLastTabbableElement(options))));
+    }
+    _getRegionBoundary(bound) {
+        // `cdk-focus-region-*` / `cdk-focus-*` are the deprecated spellings; still honoured.
+        const markers = this._element.querySelectorAll(`[cdk-focus-region-${bound}], [cdkFocusRegion${bound}], [cdk-focus-${bound}]`);
+        if (bound === "start")
+            return markers.length ? markers[0] : this._getFirstTabbableElement(this._element);
+        return markers.length ? markers[markers.length - 1] : this._getLastTabbableElement(this._element);
+    }
+    /** Focus the `[cdkFocusInitial]` element (or its first tabbable child), else the first tabbable element. */
+    focusInitialElement(options) {
+        const redirectToElement = this._element.querySelector(`[cdk-focus-initial], [cdkFocusInitial]`);
+        if (redirectToElement) {
+            if (!this._checker.isFocusable(redirectToElement)) {
+                const focusableChild = this._getFirstTabbableElement(redirectToElement);
+                focusableChild?.focus(options);
+                return !!focusableChild;
+            }
+            redirectToElement.focus(options);
+            return true;
+        }
+        return this.focusFirstTabbableElement(options);
+    }
+    /** Focus the `[cdkFocusRegionStart]` element or the first tabbable element. */
+    focusFirstTabbableElement(options) {
+        const redirectToElement = this._getRegionBoundary("start");
+        if (redirectToElement)
+            redirectToElement.focus(options);
+        return !!redirectToElement;
+    }
+    /** Focus the `[cdkFocusRegionEnd]` element or the last tabbable element. */
+    focusLastTabbableElement(options) {
+        const redirectToElement = this._getRegionBoundary("end");
+        if (redirectToElement)
+            redirectToElement.focus(options);
+        return !!redirectToElement;
+    }
+    /** Whether the anchors are in the DOM. */
+    hasAttached() {
+        return this._hasAttached;
+    }
+    _getFirstTabbableElement(root) {
+        if (this._checker.isFocusable(root) && this._checker.isTabbable(root))
+            return root;
+        const children = root.children;
+        for (let i = 0; i < children.length; i++) {
+            const tabbableChild = children[i].nodeType === this._document.ELEMENT_NODE ? this._getFirstTabbableElement(children[i]) : null;
+            if (tabbableChild)
+                return tabbableChild;
+        }
+        return null;
+    }
+    _getLastTabbableElement(root) {
+        if (this._checker.isFocusable(root) && this._checker.isTabbable(root))
+            return root;
+        const children = root.children;
+        for (let i = children.length - 1; i >= 0; i--) {
+            const tabbableChild = children[i].nodeType === this._document.ELEMENT_NODE ? this._getLastTabbableElement(children[i]) : null;
+            if (tabbableChild)
+                return tabbableChild;
+        }
+        return null;
+    }
+    _createAnchor() {
+        const anchor = this._document.createElement("div");
+        this._toggleAnchorTabIndex(this._enabled, anchor);
+        anchor.classList.add("cdk-visually-hidden", "cdk-focus-trap-anchor");
+        hideVisually(anchor);
+        anchor.setAttribute("aria-hidden", "true");
+        return anchor;
+    }
+    _toggleAnchorTabIndex(isEnabled, anchor) {
+        if (isEnabled)
+            anchor.setAttribute("tabindex", "0");
+        else
+            anchor.removeAttribute("tabindex");
+    }
+    /** Toggle the anchors' tabindex. */
+    toggleAnchors(enabled) {
+        if (this._startAnchor && this._endAnchor) {
+            this._toggleAnchorTabIndex(enabled, this._startAnchor);
+            this._toggleAnchorTabIndex(enabled, this._endAnchor);
+        }
+    }
+    _executeOnStable(fn) {
+        nextRender(fn);
+    }
+}
+/** Creates FocusTraps. */
+export class FocusTrapFactory {
+    _checker;
+    _document;
+    constructor(checker = getInteractivityChecker(), doc = document) {
+        this._checker = checker;
+        this._document = doc;
+    }
+    /** A focus trap for `element`; `deferCaptureElements` defers anchor insertion to `attachAnchors()`. */
+    create(element, deferCaptureElements = false) {
+        return new FocusTrap(element, this._checker, this._document, deferCaptureElements);
+    }
+}
+/**
+ * The `cdkTrapFocus` directive: call `attach()` once the element is in the DOM (a client effect)
+ * and `destroy()` on unmount.
+ */
+export class CdkTrapFocus {
+    focusTrap;
+    _previouslyFocusedElement = null;
+    _autoCapture;
+    constructor(element, options = {}, factory = new FocusTrapFactory()) {
+        this.focusTrap = factory.create(element, true);
+        this.focusTrap.enabled = options.enabled ?? true;
+        this._autoCapture = !!options.autoCapture;
+    }
+    get enabled() {
+        return this.focusTrap?.enabled || false;
+    }
+    set enabled(value) {
+        this.focusTrap.enabled = value;
+    }
+    get autoCapture() {
+        return this._autoCapture;
+    }
+    set autoCapture(value) {
+        const changed = value && !this._autoCapture;
+        this._autoCapture = value;
+        if (changed && this.focusTrap.hasAttached())
+            this._captureFocus();
+    }
+    /** ngAfterContentInit: attach anchors, auto-capture. */
+    attach() {
+        this.focusTrap.attachAnchors();
+        if (this._autoCapture)
+            this._captureFocus();
+    }
+    /** ngDoCheck: retry anchors when the element had no parent at attach time. */
+    check() {
+        if (!this.focusTrap.hasAttached())
+            this.focusTrap.attachAnchors();
+    }
+    destroy() {
+        this.focusTrap.destroy();
+        if (this._previouslyFocusedElement) {
+            this._previouslyFocusedElement.focus();
+            this._previouslyFocusedElement = null;
+        }
+    }
+    _captureFocus() {
+        this._previouslyFocusedElement = _getFocusedElementPierceShadowDom();
+        void this.focusTrap.focusInitialElementWhenReady();
+    }
+}
+/** Keeps only the most recently registered trap active. */
+export class FocusTrapManager {
+    _focusTrapStack = [];
+    /** Disable the active trap and activate `focusTrap`. */
+    register(focusTrap) {
+        // Dedupe when re-enabled.
+        this._focusTrapStack = this._focusTrapStack.filter((ft) => ft !== focusTrap);
+        const stack = this._focusTrapStack;
+        if (stack.length)
+            stack[stack.length - 1]._disable();
+        stack.push(focusTrap);
+        focusTrap._enable();
+    }
+    /** Disable `focusTrap` and re-activate the previous one. */
+    deregister(focusTrap) {
+        focusTrap._disable();
+        const stack = this._focusTrapStack;
+        const i = stack.indexOf(focusTrap);
+        if (i !== -1) {
+            stack.splice(i, 1);
+            if (stack.length)
+                stack[stack.length - 1]._enable();
+        }
+    }
+}
+/** Pulls focus back into the trap when it moves outside (except into `div.cdk-overlay-pane`). */
+export class EventListenerFocusTrapInertStrategy {
+    _listener = null;
+    preventFocus(focusTrap) {
+        // Only one trap is active at a time.
+        if (this._listener)
+            focusTrap._document.removeEventListener("focus", this._listener, true);
+        this._listener = (e) => this._trapFocus(focusTrap, e);
+        focusTrap._document.addEventListener("focus", this._listener, true);
+    }
+    allowFocus(focusTrap) {
+        if (!this._listener)
+            return;
+        focusTrap._document.removeEventListener("focus", this._listener, true);
+        this._listener = null;
+    }
+    _trapFocus(focusTrap, event) {
+        const target = event.target;
+        const focusTrapRoot = focusTrap._element;
+        // Overlay panes opened from inside the trap may take focus.
+        if (target && !focusTrapRoot.contains(target) && !target.closest?.("div.cdk-overlay-pane, [data-rv-top-layer]")) {
+            // Let the focus land first: a refocus inside the handler confuses screen readers.
+            setTimeout(() => {
+                if (focusTrap.enabled && !focusTrapRoot.contains(focusTrap._document.activeElement))
+                    focusTrap.focusFirstTabbableElement();
+            });
+        }
+    }
+}
+/** A FocusTrap managed by a FocusTrapManager, with an inert strategy for non-Tab focus moves. */
+export class ConfigurableFocusTrap extends FocusTrap {
+    _focusTrapManager;
+    _inertStrategy;
+    get enabled() {
+        return this._enabled;
+    }
+    set enabled(value) {
+        this._enabled = value;
+        if (this._enabled)
+            this._focusTrapManager.register(this);
+        else
+            this._focusTrapManager.deregister(this);
+    }
+    constructor(element, checker, doc, focusTrapManager, inertStrategy, config) {
+        // Anchors attach after the manager fields are set (fields initialise after super()).
+        super(element, checker, doc, true);
+        this._focusTrapManager = focusTrapManager;
+        this._inertStrategy = inertStrategy;
+        if (!config.defer)
+            this.attachAnchors();
+        this._focusTrapManager.register(this);
+    }
+    destroy() {
+        this._focusTrapManager.deregister(this);
+        super.destroy();
+    }
+    /** @internal */
+    _enable() {
+        this._inertStrategy.preventFocus(this);
+        this.toggleAnchors(true);
+    }
+    /** @internal */
+    _disable() {
+        this._inertStrategy.allowFocus(this);
+        this.toggleAnchors(false);
+    }
+}
+let sharedManager = null;
+/** The shared FocusTrapManager. */
+export function getFocusTrapManager() {
+    return (sharedManager ??= new FocusTrapManager());
+}
+/** Creates ConfigurableFocusTraps (default inert strategy: EventListenerFocusTrapInertStrategy). */
+export class ConfigurableFocusTrapFactory {
+    _inertStrategy;
+    _checker;
+    _focusTrapManager;
+    _document;
+    constructor(inertStrategy = new EventListenerFocusTrapInertStrategy(), checker = getInteractivityChecker(), focusTrapManager = getFocusTrapManager(), doc = document) {
+        this._inertStrategy = inertStrategy;
+        this._checker = checker;
+        this._focusTrapManager = focusTrapManager;
+        this._document = doc;
+    }
+    create(element, config = { defer: false }) {
+        return new ConfigurableFocusTrap(element, this._checker, this._document, this._focusTrapManager, this._inertStrategy, config);
+    }
+}

package/a11y/high-contrast.d.ts

@@ -0,0 +1,26 @@
+export declare const HighContrastMode: {
+    readonly NONE: 0;
+    readonly BLACK_ON_WHITE: 1;
+    readonly WHITE_ON_BLACK: 2;
+};
+export type HighContrastMode = (typeof HighContrastMode)[keyof typeof HighContrastMode];
+/** Body class in black-on-white high-contrast mode. */
+export declare const BLACK_ON_WHITE_CSS_CLASS = "cdk-high-contrast-black-on-white";
+/** Body class in white-on-black high-contrast mode. */
+export declare const WHITE_ON_BLACK_CSS_CLASS = "cdk-high-contrast-white-on-black";
+/** Body class in any high-contrast mode. */
+export declare const HIGH_CONTRAST_MODE_ACTIVE_CSS_CLASS = "cdk-high-contrast-active";
+export declare class HighContrastModeDetector {
+    private _hasCheckedHighContrastMode;
+    private _document;
+    private _cleanup;
+    constructor(doc?: Document | null);
+    /** The current high-contrast mode, from the coerced color of a test element. */
+    getHighContrastMode(): HighContrastMode;
+    /** Stop listening for forced-colors changes. */
+    destroy(): void;
+    /** Apply the high-contrast body classes (once until the mode changes). */
+    _applyBodyHighContrastModeCssClasses(): void;
+}
+/** The shared detector (created on first call). */
+export declare function getHighContrastModeDetector(): HighContrastModeDetector;

package/a11y/high-contrast.js

@@ -0,0 +1,84 @@
+// HighContrastModeDetector: detect Windows high-contrast (forced colors) mode and its theme by
+// computing a test element's coerced background, and apply `cdk-high-contrast-*` body classes.
+// Ported from Angular CDK a11y high-contrast-mode-detector (angular/components), MIT, © Google LLC.
+//
+// Rivet: BreakpointObserver replaced by a `(forced-colors: active)` matchMedia listener. Browser only;
+// on the server `getHighContrastMode()` returns NONE.
+export const HighContrastMode = { NONE: 0, BLACK_ON_WHITE: 1, WHITE_ON_BLACK: 2 };
+/** Body class in black-on-white high-contrast mode. */
+export const BLACK_ON_WHITE_CSS_CLASS = "cdk-high-contrast-black-on-white";
+/** Body class in white-on-black high-contrast mode. */
+export const WHITE_ON_BLACK_CSS_CLASS = "cdk-high-contrast-white-on-black";
+/** Body class in any high-contrast mode. */
+export const HIGH_CONTRAST_MODE_ACTIVE_CSS_CLASS = "cdk-high-contrast-active";
+export class HighContrastModeDetector {
+    _hasCheckedHighContrastMode = false;
+    _document;
+    _cleanup;
+    constructor(doc = typeof document === "undefined" ? null : document) {
+        this._document = doc;
+        const win = doc?.defaultView;
+        const query = win?.matchMedia?.("(forced-colors: active)");
+        if (query) {
+            const onChange = () => {
+                if (this._hasCheckedHighContrastMode) {
+                    this._hasCheckedHighContrastMode = false;
+                    this._applyBodyHighContrastModeCssClasses();
+                }
+            };
+            query.addEventListener?.("change", onChange);
+            this._cleanup = () => query.removeEventListener?.("change", onChange);
+        }
+    }
+    /** The current high-contrast mode, from the coerced color of a test element. */
+    getHighContrastMode() {
+        const doc = this._document;
+        if (!doc || !doc.body)
+            return HighContrastMode.NONE;
+        // An arbitrary color that is neither black nor white; high-contrast mode coerces it.
+        const testElement = doc.createElement("div");
+        testElement.style.backgroundColor = "rgb(1,2,3)";
+        testElement.style.position = "absolute";
+        doc.body.appendChild(testElement);
+        const documentWindow = doc.defaultView || window;
+        const computedStyle = documentWindow && documentWindow.getComputedStyle ? documentWindow.getComputedStyle(testElement) : null;
+        const computedColor = ((computedStyle && computedStyle.backgroundColor) || "").replace(/ /g, "");
+        testElement.remove();
+        switch (computedColor) {
+            // Pre Windows 11 dark theme; Windows 11 dark themes.
+            case "rgb(0,0,0)":
+            case "rgb(45,50,54)":
+            case "rgb(32,32,32)":
+                return HighContrastMode.WHITE_ON_BLACK;
+            // Pre Windows 11 light theme; Windows 11 light theme.
+            case "rgb(255,255,255)":
+            case "rgb(255,250,239)":
+                return HighContrastMode.BLACK_ON_WHITE;
+        }
+        return HighContrastMode.NONE;
+    }
+    /** Stop listening for forced-colors changes. */
+    destroy() {
+        this._cleanup?.();
+        this._cleanup = undefined;
+    }
+    /** Apply the high-contrast body classes (once until the mode changes). */
+    _applyBodyHighContrastModeCssClasses() {
+        const doc = this._document;
+        if (!this._hasCheckedHighContrastMode && doc && doc.body) {
+            const bodyClasses = doc.body.classList;
+            bodyClasses.remove(HIGH_CONTRAST_MODE_ACTIVE_CSS_CLASS, BLACK_ON_WHITE_CSS_CLASS, WHITE_ON_BLACK_CSS_CLASS);
+            this._hasCheckedHighContrastMode = true;
+            const mode = this.getHighContrastMode();
+            if (mode === HighContrastMode.BLACK_ON_WHITE)
+                bodyClasses.add(HIGH_CONTRAST_MODE_ACTIVE_CSS_CLASS, BLACK_ON_WHITE_CSS_CLASS);
+            else if (mode === HighContrastMode.WHITE_ON_BLACK)
+                bodyClasses.add(HIGH_CONTRAST_MODE_ACTIVE_CSS_CLASS, WHITE_ON_BLACK_CSS_CLASS);
+        }
+    }
+}
+let shared = null;
+/** The shared detector (created on first call). */
+export function getHighContrastModeDetector() {
+    return (shared ??= new HighContrastModeDetector());
+}

package/a11y/index.d.ts

@@ -0,0 +1,37 @@
+/**
+ * Styles of visually hidden but accessible content (react-aria `useVisuallyHidden`): `style={visuallyHidden}`.
+ * Inline on purpose: no stylesheet to import, and a class of your own cannot break it. Frozen: the DOM runtime writes a
+ * frozen style object on a fresh element as one CSSOM `cssText` (validated once), not ten `setProperty` calls.
+ */
+export declare const visuallyHidden: Readonly<{
+    readonly border: "0";
+    readonly clip: "rect(0 0 0 0)";
+    readonly clipPath: "inset(50%)";
+    readonly height: "1px";
+    readonly margin: "-1px";
+    readonly overflow: "hidden";
+    readonly padding: "0";
+    readonly position: "absolute";
+    readonly width: "1px";
+    readonly whiteSpace: "nowrap";
+}>;
+/** Hide `element` visually through the CSSOM (CSP-safe), keeping it for screen readers. */
+export declare function hideVisually(element: HTMLElement): void;
+export type Politeness = "polite" | "assertive";
+/**
+ * Announce `message` to screen readers through a live region (polite by default). Live regions must
+ * exist before their content changes: render `<Announcer/>` (`@rivetjs/cdk/announcer`) in the layout so
+ * the first announcement is not lost; without it the regions are created on first use. The text is
+ * cleared and set after a tick, so repeating a message announces it again. Browser only.
+ */
+export declare function announce(message: string, politeness?: Politeness): void;
+/** Clear pending and shown announcements (tests, route changes). */
+export declare function clearAnnouncements(): void;
+/** Whether `element` is rendered (not `display: none`, not in a closed `<details>`, not hidden). */
+export declare function isVisible(element: Element): boolean;
+/** Can receive focus (programmatically or by pointer): focusable element, not disabled, not inert, visible. */
+export declare function isFocusable(element: Element): boolean;
+/** Reachable with Tab: focusable and tabindex ≥ 0 (radio groups: only the checked / first radio). */
+export declare function isTabbable(element: Element): boolean;
+/** Tabbable descendants of `root` in DOM order (tabindex > 0 first is not modelled: avoid positive tabindex). */
+export declare function tabbables(root: Element): HTMLElement[];

package/a11y/index.js

@@ -0,0 +1,97 @@
+// Accessibility helpers: live announcements, focusability / visibility checks, the visually hidden
+// styles. No import-time work: the fallback live regions are created by the first `announce()`.
+import { cssEscape } from "../utils/dom.js";
+/**
+ * Styles of visually hidden but accessible content (react-aria `useVisuallyHidden`): `style={visuallyHidden}`.
+ * Inline on purpose: no stylesheet to import, and a class of your own cannot break it. Frozen: the DOM runtime writes a
+ * frozen style object on a fresh element as one CSSOM `cssText` (validated once), not ten `setProperty` calls.
+ */
+export const visuallyHidden = Object.freeze({
+    border: "0",
+    clip: "rect(0 0 0 0)",
+    clipPath: "inset(50%)",
+    height: "1px",
+    margin: "-1px",
+    overflow: "hidden",
+    padding: "0",
+    position: "absolute",
+    width: "1px",
+    whiteSpace: "nowrap",
+});
+/** Hide `element` visually through the CSSOM (CSP-safe), keeping it for screen readers. */
+export function hideVisually(element) {
+    Object.assign(element.style, visuallyHidden);
+}
+const created = {};
+let pending = {};
+/** The live region for `politeness`: a server-rendered `<Announcer/>` region, else one created now. */
+function region(politeness) {
+    const found = document.querySelector(`[data-rv-announcer="${politeness}"]`);
+    if (found)
+        return found;
+    let own = created[politeness];
+    if (!own?.isConnected) {
+        own = created[politeness] = document.createElement("div");
+        own.setAttribute("data-rv-announcer", politeness);
+        own.setAttribute("aria-live", politeness);
+        own.setAttribute("aria-atomic", "true");
+        if (politeness === "assertive")
+            own.setAttribute("role", "alert");
+        hideVisually(own);
+        document.body.append(own);
+    }
+    return own;
+}
+/**
+ * Announce `message` to screen readers through a live region (polite by default). Live regions must
+ * exist before their content changes: render `<Announcer/>` (`@rivetjs/cdk/announcer`) in the layout so
+ * the first announcement is not lost; without it the regions are created on first use. The text is
+ * cleared and set after a tick, so repeating a message announces it again. Browser only.
+ */
+export function announce(message, politeness = "polite") {
+    const target = region(politeness);
+    clearTimeout(pending[politeness]);
+    target.textContent = "";
+    pending[politeness] = setTimeout(() => (target.textContent = message), 50);
+}
+/** Clear pending and shown announcements (tests, route changes). */
+export function clearAnnouncements() {
+    for (const key of Object.keys(pending))
+        clearTimeout(pending[key]);
+    pending = {};
+    for (const el of document.querySelectorAll("[data-rv-announcer]"))
+        el.textContent = "";
+}
+const FOCUSABLE = "a[href],area[href],button,input,select,textarea,iframe,summary,audio[controls],video[controls],[contenteditable]:not([contenteditable=false]),[tabindex]";
+/** Whether `element` is rendered (not `display: none`, not in a closed `<details>`, not hidden). */
+export function isVisible(element) {
+    const check = element.checkVisibility;
+    if (typeof check === "function")
+        return check.call(element, { visibilityProperty: true });
+    return !element.hidden && element.offsetParent !== null;
+}
+/** Can receive focus (programmatically or by pointer): focusable element, not disabled, not inert, visible. */
+export function isFocusable(element) {
+    if (!element.matches(FOCUSABLE))
+        return false;
+    if (element.disabled || element.closest("[inert]"))
+        return false;
+    if (element.localName === "input" && element.type === "hidden")
+        return false;
+    return isVisible(element);
+}
+/** Reachable with Tab: focusable and tabindex ≥ 0 (radio groups: only the checked / first radio). */
+export function isTabbable(element) {
+    if (!isFocusable(element) || element.tabIndex < 0)
+        return false;
+    const input = element;
+    if (input.localName === "input" && input.type === "radio" && input.name && !input.checked) {
+        const group = [...(input.form ?? document).querySelectorAll(`input[type=radio][name="${cssEscape(input.name)}"]`)];
+        return !group.some((radio) => radio.checked) && group.find((radio) => isFocusable(radio)) === input;
+    }
+    return true;
+}
+/** Tabbable descendants of `root` in DOM order (tabindex > 0 first is not modelled: avoid positive tabindex). */
+export function tabbables(root) {
+    return [...root.querySelectorAll(FOCUSABLE)].filter(isTabbable);
+}

package/a11y/interactivity-checker.d.ts

@@ -0,0 +1,18 @@
+/** Options for `isFocusable`. */
+export declare class IsFocusableConfig {
+    /** Whether to count invisible elements as focusable. */
+    ignoreVisibility: boolean;
+}
+/** Checks interactivity of elements: disabled, visible, tabbable, focusable. */
+export declare class InteractivityChecker {
+    /** Whether the element has a `disabled` attribute (not `aria-disabled`). */
+    isDisabled(element: HTMLElement): boolean;
+    /** Whether the element is rendered (has geometry) and `visibility: visible`. */
+    isVisible(element: HTMLElement): boolean;
+    /** Whether Tab reaches the element (assumes it is visible). */
+    isTabbable(element: HTMLElement): boolean;
+    /** Whether the element can receive focus (native control, anchor with href, contenteditable, tabindex). */
+    isFocusable(element: HTMLElement, config?: IsFocusableConfig): boolean;
+}
+/** The shared InteractivityChecker. */
+export declare function getInteractivityChecker(): InteractivityChecker;