@y14e/roving-tabindex 2.1.0 → 2.2.1

package/README.md

@@ -10,14 +10,14 @@ npm i @y14e/roving-tabindex
 
 ```ts
 // npm
-import { createRovingTabIndex } from '@y14e/roving-tabindex@2.1.0';
+import { createRovingTabIndex } from '@y14e/roving-tabindex@2.2.0';
 
 // CDNs
-import { createRovingTabIndex } from 'https://esm.sh/@y14e/roving-tabindex@2.1.0';
+import { createRovingTabIndex } from 'https://esm.sh/@y14e/roving-tabindex@2.2.0';
 // or
-import { createRovingTabIndex } from 'https://cdn.jsdelivr.net/npm/@y14e/roving-tabindex@2.1.0/+esm';
+import { createRovingTabIndex } from 'https://cdn.jsdelivr.net/npm/@y14e/roving-tabindex@2.2.0/+esm';
 // or
-import { createRovingTabIndex } from 'https://esm.unpkg.com/@y14e/roving-tabindex@2.1.0';
+import { createRovingTabIndex } from 'https://esm.unpkg.com/@y14e/roving-tabindex@2.2.0';
 ```
 
 ## 📦 APIs
@@ -41,6 +41,8 @@ interface RovingTabIndexOptions {
   direction?: 'horizontal' | 'vertical'; // default: both (undefined)
   navigationOnly?: boolean;              // default: false
   noMemory?: boolean;                    // default: false
+  noStart?: boolean;                     // default: false
+  noStopPropagation?: boolean;           // default: false
   selector?: string;
   typeahead?: boolean;                   // default: false
   wrap?: boolean;                        // default: false
@@ -55,6 +57,14 @@ If `true`, enables keyboard navigation without modifying `tabindex`. Useful for
 
 If `true`, disables focus memory. Focus always starts from the first item.
 
+### `noStart`
+
+If `true`, does not assign `tabindex="0"` to the first item during initialization.
+
+### `noStopPropagation`
+
+If `true`, keyboard navigation will not call `stopPropagation()`.
+
 ### `typeahead`
 
 If `true`, enables character-based focus navigation. Typing a character moves focus to the next matching element.

package/dist/index.cjs

@@ -300,6 +300,8 @@ function createRovingTabIndex(container, options = {}) {
     direction,
     navigationOnly = false,
     noMemory = false,
+    noStart = false,
+    noStopPropagation = false,
     selector,
     typeahead = false,
     wrap = false
@@ -316,6 +318,14 @@ function createRovingTabIndex(container, options = {}) {
     console.warn("Invalid noMemory option. Fallback: false.");
     noMemory = false;
   }
+  if (typeof noStart !== "boolean") {
+    console.warn("Invalid noStart option. Fallback: false.");
+    noStart = false;
+  }
+  if (typeof noStopPropagation !== "boolean") {
+    console.warn("Invalid noStopPropagation option. Fallback: false.");
+    noStopPropagation = false;
+  }
   if (typeof selector !== "undefined" && (typeof selector !== "string" || !selector.trim())) {
     console.warn(
       "Invalid selector. Fallback: all focusable elements (undefined)."
@@ -330,7 +340,14 @@ function createRovingTabIndex(container, options = {}) {
     console.warn("Invalid wrap option. Fallback: false.");
     wrap = false;
   }
-  const settings = { navigationOnly, noMemory, typeahead, wrap };
+  const settings = {
+    navigationOnly,
+    noMemory,
+    noStart,
+    noStopPropagation,
+    typeahead,
+    wrap
+  };
   direction && Object.assign(settings, { direction });
   selector && Object.assign(settings, { selector });
   const roving = new RovingTabIndex(container, settings);
@@ -396,7 +413,7 @@ var RovingTabIndex = class {
     if (altKey || ctrlKey || metaKey || shiftKey) {
       return;
     }
-    const { direction, typeahead, wrap } = this.#options;
+    const { direction, noStopPropagation, typeahead, wrap } = this.#options;
     const isBoth = !direction;
     const isHorizontal = direction === "horizontal";
     if (![
@@ -418,7 +435,7 @@ var RovingTabIndex = class {
       return;
     }
     event.preventDefault();
-    event.stopPropagation();
+    !noStopPropagation && event.stopPropagation();
     const currentIndex = current.indexOf(active);
     let rawIndex;
     let newIndex = currentIndex;
@@ -464,7 +481,7 @@ var RovingTabIndex = class {
         index >= 0 && focusables.splice(index, 1);
       });
     }
-    const { navigationOnly } = this.#options;
+    const { navigationOnly, noStart, typeahead } = this.#options;
     for (const focusable of current) {
       if (this.#focusables.has(focusable)) {
         continue;
@@ -474,7 +491,7 @@ var RovingTabIndex = class {
         saveAttributes([focusable], ["tabindex"]);
         focusable.setAttribute("tabindex", "-1");
       }
-      if (!this.#options.typeahead) {
+      if (!typeahead) {
         continue;
       }
       const value = focusable.ariaKeyShortcuts?.trim();
@@ -505,7 +522,7 @@ var RovingTabIndex = class {
       return;
     }
     [...this.#focusables].forEach((focusable, i) => {
-      focusable.setAttribute("tabindex", i ? "-1" : "0");
+      focusable.setAttribute("tabindex", i || noStart ? "-1" : "0");
     });
   }
   #createSelectorFilter() {
@@ -536,7 +553,7 @@ function getActiveElement() {
  * Lightweight roving tabindex utility with fully focus management.
  * Designed for accessible menus, tabs, toolbars, and composite widgets.
  *
- * @version 2.1.0
+ * @version 2.2.1
  * @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 2.1.0
+ * @version 2.2.1
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane
@@ -13,6 +13,8 @@ interface RovingTabIndexOptions {
     readonly direction?: 'horizontal' | 'vertical';
     readonly navigationOnly?: boolean;
     readonly noMemory?: boolean;
+    readonly noStart?: boolean;
+    readonly noStopPropagation?: boolean;
     readonly selector?: string;
     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 2.1.0
+ * @version 2.2.1
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane
@@ -13,6 +13,8 @@ interface RovingTabIndexOptions {
     readonly direction?: 'horizontal' | 'vertical';
     readonly navigationOnly?: boolean;
     readonly noMemory?: boolean;
+    readonly noStart?: boolean;
+    readonly noStopPropagation?: boolean;
     readonly selector?: string;
     readonly typeahead?: boolean;
     readonly wrap?: boolean;

package/dist/index.js

@@ -298,6 +298,8 @@ function createRovingTabIndex(container, options = {}) {
     direction,
     navigationOnly = false,
     noMemory = false,
+    noStart = false,
+    noStopPropagation = false,
     selector,
     typeahead = false,
     wrap = false
@@ -314,6 +316,14 @@ function createRovingTabIndex(container, options = {}) {
     console.warn("Invalid noMemory option. Fallback: false.");
     noMemory = false;
   }
+  if (typeof noStart !== "boolean") {
+    console.warn("Invalid noStart option. Fallback: false.");
+    noStart = false;
+  }
+  if (typeof noStopPropagation !== "boolean") {
+    console.warn("Invalid noStopPropagation option. Fallback: false.");
+    noStopPropagation = false;
+  }
   if (typeof selector !== "undefined" && (typeof selector !== "string" || !selector.trim())) {
     console.warn(
       "Invalid selector. Fallback: all focusable elements (undefined)."
@@ -328,7 +338,14 @@ function createRovingTabIndex(container, options = {}) {
     console.warn("Invalid wrap option. Fallback: false.");
     wrap = false;
   }
-  const settings = { navigationOnly, noMemory, typeahead, wrap };
+  const settings = {
+    navigationOnly,
+    noMemory,
+    noStart,
+    noStopPropagation,
+    typeahead,
+    wrap
+  };
   direction && Object.assign(settings, { direction });
   selector && Object.assign(settings, { selector });
   const roving = new RovingTabIndex(container, settings);
@@ -394,7 +411,7 @@ var RovingTabIndex = class {
     if (altKey || ctrlKey || metaKey || shiftKey) {
       return;
     }
-    const { direction, typeahead, wrap } = this.#options;
+    const { direction, noStopPropagation, typeahead, wrap } = this.#options;
     const isBoth = !direction;
     const isHorizontal = direction === "horizontal";
     if (![
@@ -416,7 +433,7 @@ var RovingTabIndex = class {
       return;
     }
     event.preventDefault();
-    event.stopPropagation();
+    !noStopPropagation && event.stopPropagation();
     const currentIndex = current.indexOf(active);
     let rawIndex;
     let newIndex = currentIndex;
@@ -462,7 +479,7 @@ var RovingTabIndex = class {
         index >= 0 && focusables.splice(index, 1);
       });
     }
-    const { navigationOnly } = this.#options;
+    const { navigationOnly, noStart, typeahead } = this.#options;
     for (const focusable of current) {
       if (this.#focusables.has(focusable)) {
         continue;
@@ -472,7 +489,7 @@ var RovingTabIndex = class {
         saveAttributes([focusable], ["tabindex"]);
         focusable.setAttribute("tabindex", "-1");
       }
-      if (!this.#options.typeahead) {
+      if (!typeahead) {
         continue;
       }
       const value = focusable.ariaKeyShortcuts?.trim();
@@ -503,7 +520,7 @@ var RovingTabIndex = class {
       return;
     }
     [...this.#focusables].forEach((focusable, i) => {
-      focusable.setAttribute("tabindex", i ? "-1" : "0");
+      focusable.setAttribute("tabindex", i || noStart ? "-1" : "0");
     });
   }
   #createSelectorFilter() {
@@ -534,7 +551,7 @@ function getActiveElement() {
  * Lightweight roving tabindex utility with fully focus management.
  * Designed for accessible menus, tabs, toolbars, and composite widgets.
  *
- * @version 2.1.0
+ * @version 2.2.1
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane

package/package.json

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