@y14e/roving-tabindex 1.2.11 → 1.3.0

package/README.md

@@ -1,6 +1,6 @@
 # Roving Tabindex
 
-Lightweight roving tabindex utility with fully focus management. Designed for accessible menus, tabs, toolbars, and composite widgets.
+Lightweight roving `tabindex` utility with fully focus management. Designed for accessible menus, tabs, toolbars, and composite widgets.
 
 > [!NOTE]
 > Focus traversal works across shadow DOM boundaries using composed-tree-aware focus detection powered by [Power Focusable](https://github.com/y14e/power-focusable).
@@ -42,12 +42,17 @@ const cleanup = createRovingTabIndex(container, options);
 ```ts
 interface RovingTabIndexOptions {
   direction?: 'horizontal' | 'vertical' | undefined; // default: both (undefined)
+  navigationOnly?: boolean;                          // default: false
   selector?: string | undefined;
   typeahead?: boolean;                               // default: false
   wrap?: boolean;                                    // default: false
 }
 ```
 
+### `navigationOnly`
+
+If `true`, enables keyboard navigation without modifying `tabindex`. Useful for widgets like accordions where all items should remain tabbable while still supporting arrow key navigation.
+
 ### `typeahead`
 
 If `true`, enables character-based focus navigation. Typing a character moves focus to the next matching element.

package/dist/index.cjs

@@ -266,11 +266,21 @@ function createRovingTabIndex(container, options = {}) {
     return () => {
     };
   }
-  let { direction, selector, typeahead = false, wrap = false } = options;
+  let {
+    direction,
+    navigationOnly = false,
+    selector,
+    typeahead = false,
+    wrap = false
+  } = options;
   if (typeof direction !== "undefined" && !["horizontal", "vertical"].includes(direction)) {
     console.warn("Invalid direction option. Fallback: both (undefined).");
     direction = void 0;
   }
+  if (typeof navigationOnly !== "boolean") {
+    console.warn("Invalid navigationOnly option. Fallback: false.");
+    navigationOnly = false;
+  }
   if (typeof selector !== "undefined" && typeof selector !== "string") {
     console.warn(
       "Invalid selector. Fallback: all focusable elements (undefined)."
@@ -287,6 +297,7 @@ function createRovingTabIndex(container, options = {}) {
   }
   const roving = new RovingTabIndex(container, {
     direction,
+    navigationOnly,
     selector,
     typeahead,
     wrap
@@ -414,13 +425,16 @@ var RovingTabIndex = class {
         index >= 0 && focusables.splice(index, 1);
       });
     }
+    const { navigationOnly } = this.#options;
     for (const focusable of current) {
       if (this.#focusables.has(focusable)) {
         continue;
       }
       this.#focusables.add(focusable);
-      saveAttributes([focusable], ["tabindex"]);
-      focusable.setAttribute("tabindex", "-1");
+      if (!navigationOnly) {
+        saveAttributes([focusable], ["tabindex"]);
+        focusable.setAttribute("tabindex", "-1");
+      }
       if (!this.#options.typeahead) {
         continue;
       }
@@ -442,6 +456,9 @@ var RovingTabIndex = class {
         this.#focusablesByFirstChar.set(key, focusables);
       });
     }
+    if (navigationOnly) {
+      return;
+    }
     if (active && this.#focusables.has(active)) {
       this.#focusables.forEach((focusable) => {
         focusable.setAttribute("tabindex", focusable === active ? "0" : "-1");
@@ -479,7 +496,7 @@ function getActiveElement() {
  * Lightweight roving tabindex utility with fully focus management.
  * Designed for accessible menus, tabs, toolbars, and composite widgets.
  *
- * @version 1.2.11
+ * @version 1.3.0
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane

package/dist/index.d.cts

@@ -3,7 +3,7 @@
  * Lightweight roving tabindex utility with fully focus management.
  * Designed for accessible menus, tabs, toolbars, and composite widgets.
  *
- * @version 1.2.11
+ * @version 1.3.0
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane
@@ -11,6 +11,7 @@
  */
 interface RovingTabIndexOptions {
     readonly direction?: 'horizontal' | 'vertical' | undefined;
+    readonly navigationOnly?: boolean;
     readonly selector?: string | undefined;
     readonly typeahead?: boolean;
     readonly wrap?: boolean;

package/dist/index.d.ts

@@ -3,7 +3,7 @@
  * Lightweight roving tabindex utility with fully focus management.
  * Designed for accessible menus, tabs, toolbars, and composite widgets.
  *
- * @version 1.2.11
+ * @version 1.3.0
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane
@@ -11,6 +11,7 @@
  */
 interface RovingTabIndexOptions {
     readonly direction?: 'horizontal' | 'vertical' | undefined;
+    readonly navigationOnly?: boolean;
     readonly selector?: string | undefined;
     readonly typeahead?: boolean;
     readonly wrap?: boolean;

package/dist/index.js

@@ -264,11 +264,21 @@ function createRovingTabIndex(container, options = {}) {
     return () => {
     };
   }
-  let { direction, selector, typeahead = false, wrap = false } = options;
+  let {
+    direction,
+    navigationOnly = false,
+    selector,
+    typeahead = false,
+    wrap = false
+  } = options;
   if (typeof direction !== "undefined" && !["horizontal", "vertical"].includes(direction)) {
     console.warn("Invalid direction option. Fallback: both (undefined).");
     direction = void 0;
   }
+  if (typeof navigationOnly !== "boolean") {
+    console.warn("Invalid navigationOnly option. Fallback: false.");
+    navigationOnly = false;
+  }
   if (typeof selector !== "undefined" && typeof selector !== "string") {
     console.warn(
       "Invalid selector. Fallback: all focusable elements (undefined)."
@@ -285,6 +295,7 @@ function createRovingTabIndex(container, options = {}) {
   }
   const roving = new RovingTabIndex(container, {
     direction,
+    navigationOnly,
     selector,
     typeahead,
     wrap
@@ -412,13 +423,16 @@ var RovingTabIndex = class {
         index >= 0 && focusables.splice(index, 1);
       });
     }
+    const { navigationOnly } = this.#options;
     for (const focusable of current) {
       if (this.#focusables.has(focusable)) {
         continue;
       }
       this.#focusables.add(focusable);
-      saveAttributes([focusable], ["tabindex"]);
-      focusable.setAttribute("tabindex", "-1");
+      if (!navigationOnly) {
+        saveAttributes([focusable], ["tabindex"]);
+        focusable.setAttribute("tabindex", "-1");
+      }
       if (!this.#options.typeahead) {
         continue;
       }
@@ -440,6 +454,9 @@ var RovingTabIndex = class {
         this.#focusablesByFirstChar.set(key, focusables);
       });
     }
+    if (navigationOnly) {
+      return;
+    }
     if (active && this.#focusables.has(active)) {
       this.#focusables.forEach((focusable) => {
         focusable.setAttribute("tabindex", focusable === active ? "0" : "-1");
@@ -477,7 +494,7 @@ function getActiveElement() {
  * Lightweight roving tabindex utility with fully focus management.
  * Designed for accessible menus, tabs, toolbars, and composite widgets.
  *
- * @version 1.2.11
+ * @version 1.3.0
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@y14e/roving-tabindex",
-  "version": "1.2.11",
+  "version": "1.3.0",
   "description": "Lightweight roving tabindex utility with fully focus management",
   "type": "module",
   "main": "./dist/index.cjs",