@lessonkit/accessibility 1.3.0 → 1.4.0

package/dist/index.cjs

@@ -93,7 +93,23 @@ function focusFirst(container) {
 }
 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;
@@ -180,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;

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;

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;

package/dist/index.js

@@ -60,7 +60,23 @@ function focusFirst(container) {
 }
 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;
@@ -147,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;

package/package.json

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