@lessonkit/accessibility 1.2.0 → 1.3.1

package/dist/index.cjs

@@ -23,9 +23,11 @@ __export(index_exports, {
   createRovingTabIndex: () => createRovingTabIndex,
   focusFirst: () => focusFirst,
   getFocusableElements: () => getFocusableElements,
+  getPrefersReducedMotionSnapshot: () => getPrefersReducedMotionSnapshot,
   getReducedMotionPreference: () => getReducedMotionPreference,
   prefersReducedMotion: () => prefersReducedMotion,
   shouldAnimate: () => shouldAnimate,
+  subscribeReducedMotion: () => subscribeReducedMotion,
   trapFocus: () => trapFocus,
   visuallyHiddenStyle: () => visuallyHiddenStyle
 });
@@ -56,8 +58,23 @@ function isHTMLElement(v) {
   return typeof HTMLElement !== "undefined" && v instanceof HTMLElement;
 }
 function prefersReducedMotion() {
+  return getPrefersReducedMotionSnapshot();
+}
+function getPrefersReducedMotionSnapshot() {
   return typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
 }
+function subscribeReducedMotion(listener) {
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+    listener(false);
+    return () => {
+    };
+  }
+  const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
+  const onChange = () => listener(mq.matches);
+  listener(mq.matches);
+  mq.addEventListener("change", onChange);
+  return () => mq.removeEventListener("change", onChange);
+}
 function getReducedMotionPreference() {
   if (typeof window === "undefined" || typeof window.matchMedia !== "function") return "unknown";
   return window.matchMedia("(prefers-reduced-motion: reduce)").matches ? "reduce" : "no-preference";
@@ -70,22 +87,29 @@ function shouldAnimate(opts) {
 }
 function focusFirst(container) {
   if (!container) return false;
-  const el = container.querySelector(
-    [
-      "a[href]",
-      "button:not([disabled])",
-      "input:not([disabled])",
-      "select:not([disabled])",
-      "textarea:not([disabled])",
-      "[tabindex]:not([tabindex='-1'])"
-    ].join(",")
-  );
+  const el = container.querySelector(FOCUSABLE_SELECTORS);
   el?.focus();
   return Boolean(el);
 }
 function getFocusableElements(container) {
   const candidates = Array.from(container.querySelectorAll(FOCUSABLE_SELECTORS));
-  return candidates.filter((n) => isHTMLElement(n) && !n.hasAttribute("disabled"));
+  return candidates.filter(
+    (n) => isHTMLElement(n) && !n.hasAttribute("disabled") && isVisibleFocusable(n)
+  );
+}
+function isVisibleFocusable(el) {
+  if (el.closest("[inert], [aria-hidden='true']")) return false;
+  if (typeof el.checkVisibility === "function") {
+    try {
+      return el.checkVisibility();
+    } catch {
+    }
+  }
+  if (typeof window !== "undefined" && typeof window.getComputedStyle === "function") {
+    const style = window.getComputedStyle(el);
+    if (style.display === "none" || style.visibility === "hidden") return false;
+  }
+  return true;
 }
 function trapFocus(container, opts) {
   const restoreFocus = opts?.restoreFocus ?? true;
@@ -140,10 +164,12 @@ function trapFocus(container, opts) {
     prevFocused = restoreFocus && isHTMLElement(document.activeElement) ? document.activeElement : null;
     document.addEventListener("keydown", onKeyDown);
     document.addEventListener("focusin", onFocusIn);
+    document.addEventListener("pointerdown", onPointerDownCapture, true);
     document.addEventListener("mousedown", onPointerDownCapture, true);
     removeListeners = () => {
       document.removeEventListener("keydown", onKeyDown);
       document.removeEventListener("focusin", onFocusIn);
+      document.removeEventListener("pointerdown", onPointerDownCapture, true);
       document.removeEventListener("mousedown", onPointerDownCapture, true);
     };
     const focusables = getFocusableElements(container);
@@ -170,28 +196,41 @@ function createRovingTabIndex(opts) {
   const loop = opts.loop ?? true;
   const orientation = opts.orientation ?? "both";
   let activeIndex = clampIndex(opts.initialIndex ?? 0, itemCount);
+  const focusActiveItem = () => {
+    if (!opts.getId || typeof document === "undefined") return;
+    const id = opts.getId(activeIndex);
+    if (!id) return;
+    document.getElementById(id)?.focus();
+  };
+  const notifyActiveChange = () => {
+    opts.onActiveIndexChange?.(activeIndex);
+  };
   const setActiveIndex = (next) => {
     activeIndex = clampIndex(next, itemCount);
+    notifyActiveChange();
+    focusActiveItem();
   };
   const move = (delta) => {
     if (!itemCount) return;
     const next = activeIndex + delta;
     if (loop) {
       activeIndex = (next % itemCount + itemCount) % itemCount;
-      return;
+    } else {
+      activeIndex = clampIndex(next, itemCount);
     }
-    activeIndex = clampIndex(next, itemCount);
+    notifyActiveChange();
+    focusActiveItem();
   };
   const onKeyDown = (e) => {
     if (!itemCount) return;
     switch (e.key) {
       case "Home":
         e.preventDefault();
-        activeIndex = 0;
+        setActiveIndex(0);
         return;
       case "End":
         e.preventDefault();
-        activeIndex = itemCount - 1;
+        setActiveIndex(itemCount - 1);
         return;
       case "ArrowLeft":
         if (orientation === "vertical") return;
@@ -242,9 +281,11 @@ function clampIndex(index, itemCount) {
   createRovingTabIndex,
   focusFirst,
   getFocusableElements,
+  getPrefersReducedMotionSnapshot,
   getReducedMotionPreference,
   prefersReducedMotion,
   shouldAnimate,
+  subscribeReducedMotion,
   trapFocus,
   visuallyHiddenStyle
 });

package/dist/index.d.cts

@@ -23,6 +23,8 @@ type RovingTabIndexOptions = {
     orientation?: "horizontal" | "vertical" | "both";
     loop?: boolean;
     initialIndex?: number;
+    /** Called when the active index changes so consumers can re-render. */
+    onActiveIndexChange?: (index: number) => void;
 };
 /** Screen-reader-only styles (no external CSS required). */
 declare const visuallyHiddenStyle: VisuallyHiddenStyle;
@@ -30,6 +32,10 @@ type FocusContainer = {
     querySelector<T>(selectors: string): T | null;
 };
 declare function prefersReducedMotion(): boolean;
+/** One-shot read of the prefers-reduced-motion media query. */
+declare function getPrefersReducedMotionSnapshot(): boolean;
+/** Subscribe to OS reduced-motion preference changes; returns an unsubscribe function. */
+declare function subscribeReducedMotion(listener: (reduce: boolean) => void): () => void;
 declare function getReducedMotionPreference(): "reduce" | "no-preference" | "unknown";
 declare function shouldAnimate(opts?: {
     default?: boolean;
@@ -54,4 +60,4 @@ declare function createRovingTabIndex(opts: RovingTabIndexOptions): {
     };
 };
 
-export { type FocusContainer, type Focusable, type RovingTabIndexOptions, type TrapFocusOptions, type VisuallyHiddenStyle, createRovingTabIndex, focusFirst, getFocusableElements, getReducedMotionPreference, prefersReducedMotion, shouldAnimate, trapFocus, visuallyHiddenStyle };
+export { type FocusContainer, type Focusable, type RovingTabIndexOptions, type TrapFocusOptions, type VisuallyHiddenStyle, createRovingTabIndex, focusFirst, getFocusableElements, getPrefersReducedMotionSnapshot, getReducedMotionPreference, prefersReducedMotion, shouldAnimate, subscribeReducedMotion, trapFocus, visuallyHiddenStyle };

package/dist/index.d.ts

@@ -23,6 +23,8 @@ type RovingTabIndexOptions = {
     orientation?: "horizontal" | "vertical" | "both";
     loop?: boolean;
     initialIndex?: number;
+    /** Called when the active index changes so consumers can re-render. */
+    onActiveIndexChange?: (index: number) => void;
 };
 /** Screen-reader-only styles (no external CSS required). */
 declare const visuallyHiddenStyle: VisuallyHiddenStyle;
@@ -30,6 +32,10 @@ type FocusContainer = {
     querySelector<T>(selectors: string): T | null;
 };
 declare function prefersReducedMotion(): boolean;
+/** One-shot read of the prefers-reduced-motion media query. */
+declare function getPrefersReducedMotionSnapshot(): boolean;
+/** Subscribe to OS reduced-motion preference changes; returns an unsubscribe function. */
+declare function subscribeReducedMotion(listener: (reduce: boolean) => void): () => void;
 declare function getReducedMotionPreference(): "reduce" | "no-preference" | "unknown";
 declare function shouldAnimate(opts?: {
     default?: boolean;
@@ -54,4 +60,4 @@ declare function createRovingTabIndex(opts: RovingTabIndexOptions): {
     };
 };
 
-export { type FocusContainer, type Focusable, type RovingTabIndexOptions, type TrapFocusOptions, type VisuallyHiddenStyle, createRovingTabIndex, focusFirst, getFocusableElements, getReducedMotionPreference, prefersReducedMotion, shouldAnimate, trapFocus, visuallyHiddenStyle };
+export { type FocusContainer, type Focusable, type RovingTabIndexOptions, type TrapFocusOptions, type VisuallyHiddenStyle, createRovingTabIndex, focusFirst, getFocusableElements, getPrefersReducedMotionSnapshot, getReducedMotionPreference, prefersReducedMotion, shouldAnimate, subscribeReducedMotion, trapFocus, visuallyHiddenStyle };

package/dist/index.js

@@ -25,8 +25,23 @@ function isHTMLElement(v) {
   return typeof HTMLElement !== "undefined" && v instanceof HTMLElement;
 }
 function prefersReducedMotion() {
+  return getPrefersReducedMotionSnapshot();
+}
+function getPrefersReducedMotionSnapshot() {
   return typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
 }
+function subscribeReducedMotion(listener) {
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+    listener(false);
+    return () => {
+    };
+  }
+  const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
+  const onChange = () => listener(mq.matches);
+  listener(mq.matches);
+  mq.addEventListener("change", onChange);
+  return () => mq.removeEventListener("change", onChange);
+}
 function getReducedMotionPreference() {
   if (typeof window === "undefined" || typeof window.matchMedia !== "function") return "unknown";
   return window.matchMedia("(prefers-reduced-motion: reduce)").matches ? "reduce" : "no-preference";
@@ -39,22 +54,29 @@ function shouldAnimate(opts) {
 }
 function focusFirst(container) {
   if (!container) return false;
-  const el = container.querySelector(
-    [
-      "a[href]",
-      "button:not([disabled])",
-      "input:not([disabled])",
-      "select:not([disabled])",
-      "textarea:not([disabled])",
-      "[tabindex]:not([tabindex='-1'])"
-    ].join(",")
-  );
+  const el = container.querySelector(FOCUSABLE_SELECTORS);
   el?.focus();
   return Boolean(el);
 }
 function getFocusableElements(container) {
   const candidates = Array.from(container.querySelectorAll(FOCUSABLE_SELECTORS));
-  return candidates.filter((n) => isHTMLElement(n) && !n.hasAttribute("disabled"));
+  return candidates.filter(
+    (n) => isHTMLElement(n) && !n.hasAttribute("disabled") && isVisibleFocusable(n)
+  );
+}
+function isVisibleFocusable(el) {
+  if (el.closest("[inert], [aria-hidden='true']")) return false;
+  if (typeof el.checkVisibility === "function") {
+    try {
+      return el.checkVisibility();
+    } catch {
+    }
+  }
+  if (typeof window !== "undefined" && typeof window.getComputedStyle === "function") {
+    const style = window.getComputedStyle(el);
+    if (style.display === "none" || style.visibility === "hidden") return false;
+  }
+  return true;
 }
 function trapFocus(container, opts) {
   const restoreFocus = opts?.restoreFocus ?? true;
@@ -109,10 +131,12 @@ function trapFocus(container, opts) {
     prevFocused = restoreFocus && isHTMLElement(document.activeElement) ? document.activeElement : null;
     document.addEventListener("keydown", onKeyDown);
     document.addEventListener("focusin", onFocusIn);
+    document.addEventListener("pointerdown", onPointerDownCapture, true);
     document.addEventListener("mousedown", onPointerDownCapture, true);
     removeListeners = () => {
       document.removeEventListener("keydown", onKeyDown);
       document.removeEventListener("focusin", onFocusIn);
+      document.removeEventListener("pointerdown", onPointerDownCapture, true);
       document.removeEventListener("mousedown", onPointerDownCapture, true);
     };
     const focusables = getFocusableElements(container);
@@ -139,28 +163,41 @@ function createRovingTabIndex(opts) {
   const loop = opts.loop ?? true;
   const orientation = opts.orientation ?? "both";
   let activeIndex = clampIndex(opts.initialIndex ?? 0, itemCount);
+  const focusActiveItem = () => {
+    if (!opts.getId || typeof document === "undefined") return;
+    const id = opts.getId(activeIndex);
+    if (!id) return;
+    document.getElementById(id)?.focus();
+  };
+  const notifyActiveChange = () => {
+    opts.onActiveIndexChange?.(activeIndex);
+  };
   const setActiveIndex = (next) => {
     activeIndex = clampIndex(next, itemCount);
+    notifyActiveChange();
+    focusActiveItem();
   };
   const move = (delta) => {
     if (!itemCount) return;
     const next = activeIndex + delta;
     if (loop) {
       activeIndex = (next % itemCount + itemCount) % itemCount;
-      return;
+    } else {
+      activeIndex = clampIndex(next, itemCount);
     }
-    activeIndex = clampIndex(next, itemCount);
+    notifyActiveChange();
+    focusActiveItem();
   };
   const onKeyDown = (e) => {
     if (!itemCount) return;
     switch (e.key) {
       case "Home":
         e.preventDefault();
-        activeIndex = 0;
+        setActiveIndex(0);
         return;
       case "End":
         e.preventDefault();
-        activeIndex = itemCount - 1;
+        setActiveIndex(itemCount - 1);
         return;
       case "ArrowLeft":
         if (orientation === "vertical") return;
@@ -210,9 +247,11 @@ export {
   createRovingTabIndex,
   focusFirst,
   getFocusableElements,
+  getPrefersReducedMotionSnapshot,
   getReducedMotionPreference,
   prefersReducedMotion,
   shouldAnimate,
+  subscribeReducedMotion,
   trapFocus,
   visuallyHiddenStyle
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lessonkit/accessibility",
-  "version": "1.2.0",
+  "version": "1.3.1",
   "private": false,
   "description": "Accessibility utilities for LessonKit packages and apps.",
   "license": "Apache-2.0",