@y14e/roving-tabindex 1.0.2 → 1.1.0

package/README.md

@@ -43,10 +43,15 @@ const cleanup = createRovingTabIndex(container, options);
 interface RovingTabIndexOptions {
   direction?: 'horizontal' | 'vertical'; // default: both (undefined)
   selector?: string;
+  typeahead?: boolean;                   // default: false
   wrap?: boolean;                        // default: false
 }
 ```
 
+### `typeahead`
+
+If `true`, enables character-based focus navigation. Typing a character moves focus to the next matching element.
+
 ### `wrap`
 
 If `true`, wraps around to the first or last element when reaching the end.

package/dist/index.cjs

@@ -238,7 +238,7 @@ function createRovingTabIndex(container, options = {}) {
   if (!(container instanceof Element)) {
     throw new Error("Invalid container element");
   }
-  const { direction, selector, wrap = false } = options;
+  const { direction, selector, typeahead = false, wrap = false } = options;
   if (direction && !["horizontal", "vertical"].includes(direction)) {
     console.warn("Invalid direction. Fallback: both (undefined).");
     Object.assign(options, { direction: void 0 });
@@ -247,6 +247,10 @@ function createRovingTabIndex(container, options = {}) {
     console.warn("Invalid selector. Fallback: all focusable elements.");
     Object.assign(options, { selector: void 0 });
   }
+  if (typeof typeahead !== "boolean") {
+    console.warn("Invalid typeahead. Fallback: false.");
+    Object.assign(options, { typeahead: false });
+  }
   if (typeof wrap !== "boolean") {
     console.warn("Invalid wrap. Fallback: false.");
     Object.assign(options, { wrap: false });
@@ -258,6 +262,7 @@ var RovingTabIndex = class {
   #container;
   #options;
   #focusables = /* @__PURE__ */ new Set();
+  #focusablesByFirstChar = /* @__PURE__ */ new Map();
   #selectorFilter;
   #controller = null;
   #isDestroyed = false;
@@ -276,6 +281,7 @@ var RovingTabIndex = class {
     this.#controller = null;
     restoreAttributes([...this.#focusables]);
     this.#focusables.clear();
+    this.#focusablesByFirstChar.clear();
     this.#container.removeAttribute("data-roving-tabindex-initialized");
   }
   #initialize() {
@@ -295,7 +301,7 @@ var RovingTabIndex = class {
     if (altKey || ctrlKey || metaKey) {
       return;
     }
-    const { direction } = this.#options;
+    const { direction, typeahead, wrap } = this.#options;
     const isBoth = !direction;
     const isHorizontal = direction === "horizontal";
     if (![
@@ -304,7 +310,9 @@ var RovingTabIndex = class {
       ...isBoth ? ["ArrowLeft", "ArrowUp"] : [`Arrow${isHorizontal ? "Left" : "Up"}`],
       ...isBoth ? ["ArrowRight", "ArrowDown"] : [`Arrow${isHorizontal ? "Right" : "Down"}`]
     ].includes(key)) {
-      return;
+      if (!typeahead || !/^\S$/i.test(key) || !this.#focusablesByFirstChar.has(key.toLowerCase())) {
+        return;
+      }
     }
     const active = getActiveElement();
     if (!(active instanceof HTMLElement)) {
@@ -317,9 +325,9 @@ var RovingTabIndex = class {
     event.preventDefault();
     event.stopPropagation();
     const currentIndex = focusables.indexOf(active);
-    let rawIndex;
+    let rawIndex = currentIndex;
     let newIndex = currentIndex;
-    const { wrap = false } = this.#options;
+    let target = focusables;
     switch (key) {
       case "End":
         newIndex = -1;
@@ -337,8 +345,18 @@ var RovingTabIndex = class {
         rawIndex = currentIndex + 1;
         newIndex = wrap ? rawIndex % focusables.length : Math.min(rawIndex, focusables.length - 1);
         break;
+      default: {
+        if (!typeahead) {
+          break;
+        }
+        target = this.#focusablesByFirstChar.get(key.toLowerCase()) ?? [];
+        const foundIndex = target.findIndex(
+          (focusable2) => focusables.indexOf(focusable2) > currentIndex
+        );
+        newIndex = foundIndex !== -1 ? foundIndex : 0;
+      }
     }
-    const focusable = focusables.at(newIndex);
+    const focusable = target.at(newIndex);
     if (!focusable) {
       return;
     }
@@ -361,6 +379,12 @@ var RovingTabIndex = class {
         restoreAttributes([focusable]);
       }
       this.#focusables.delete(focusable);
+      this.#focusablesByFirstChar.forEach((focusables) => {
+        const index = focusables.indexOf(focusable);
+        if (index !== -1) {
+          focusables.splice(index, 1);
+        }
+      });
     });
     current.forEach((c) => {
       if (this.#focusables.has(c)) {
@@ -369,6 +393,19 @@ var RovingTabIndex = class {
       this.#focusables.add(c);
       saveAttributes([c], ["tabindex"]);
       c.setAttribute("tabindex", "-1");
+      if (!this.#options.typeahead) {
+        return;
+      }
+      const shortcuts = c.ariaKeyShortcuts;
+      const keys = (shortcuts?.split(/\s+/) ?? [c.textContent?.trim()[0] ?? ""]).filter((key) => /^\S$/i.test(key)).map((key) => key.toLowerCase());
+      keys.forEach((key) => {
+        const focusables = this.#focusablesByFirstChar.get(key) ?? [];
+        focusables.push(c);
+        this.#focusablesByFirstChar.set(key, focusables);
+      });
+      const first = keys[0];
+      saveAttributes([c], ["aria-keyshortcuts"]);
+      !shortcuts && first && c.setAttribute("aria-keyshortcuts", first);
     });
     if (active && this.#focusables.has(active)) {
       this.#focusables.forEach((focusable) => {
@@ -407,7 +444,7 @@ function getActiveElement() {
  * Lightweight roving tabindex utility with fully focus management.
  * Designed for accessible menus, tabs, toolbars, and composite widgets.
  *
- * @version 1.0.2
+ * @version 1.1.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.0.2
+ * @version 1.1.0
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane
@@ -12,6 +12,7 @@
 interface RovingTabIndexOptions {
     readonly direction?: 'horizontal' | 'vertical';
     readonly selector?: string;
+    readonly typeahead?: boolean;
     readonly wrap?: boolean;
 }
 declare function createRovingTabIndex(container: Element, options?: RovingTabIndexOptions): () => void;

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.0.2
+ * @version 1.1.0
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane
@@ -12,6 +12,7 @@
 interface RovingTabIndexOptions {
     readonly direction?: 'horizontal' | 'vertical';
     readonly selector?: string;
+    readonly typeahead?: boolean;
     readonly wrap?: boolean;
 }
 declare function createRovingTabIndex(container: Element, options?: RovingTabIndexOptions): () => void;

package/dist/index.js

@@ -236,7 +236,7 @@ function createRovingTabIndex(container, options = {}) {
   if (!(container instanceof Element)) {
     throw new Error("Invalid container element");
   }
-  const { direction, selector, wrap = false } = options;
+  const { direction, selector, typeahead = false, wrap = false } = options;
   if (direction && !["horizontal", "vertical"].includes(direction)) {
     console.warn("Invalid direction. Fallback: both (undefined).");
     Object.assign(options, { direction: void 0 });
@@ -245,6 +245,10 @@ function createRovingTabIndex(container, options = {}) {
     console.warn("Invalid selector. Fallback: all focusable elements.");
     Object.assign(options, { selector: void 0 });
   }
+  if (typeof typeahead !== "boolean") {
+    console.warn("Invalid typeahead. Fallback: false.");
+    Object.assign(options, { typeahead: false });
+  }
   if (typeof wrap !== "boolean") {
     console.warn("Invalid wrap. Fallback: false.");
     Object.assign(options, { wrap: false });
@@ -256,6 +260,7 @@ var RovingTabIndex = class {
   #container;
   #options;
   #focusables = /* @__PURE__ */ new Set();
+  #focusablesByFirstChar = /* @__PURE__ */ new Map();
   #selectorFilter;
   #controller = null;
   #isDestroyed = false;
@@ -274,6 +279,7 @@ var RovingTabIndex = class {
     this.#controller = null;
     restoreAttributes([...this.#focusables]);
     this.#focusables.clear();
+    this.#focusablesByFirstChar.clear();
     this.#container.removeAttribute("data-roving-tabindex-initialized");
   }
   #initialize() {
@@ -293,7 +299,7 @@ var RovingTabIndex = class {
     if (altKey || ctrlKey || metaKey) {
       return;
     }
-    const { direction } = this.#options;
+    const { direction, typeahead, wrap } = this.#options;
     const isBoth = !direction;
     const isHorizontal = direction === "horizontal";
     if (![
@@ -302,7 +308,9 @@ var RovingTabIndex = class {
       ...isBoth ? ["ArrowLeft", "ArrowUp"] : [`Arrow${isHorizontal ? "Left" : "Up"}`],
       ...isBoth ? ["ArrowRight", "ArrowDown"] : [`Arrow${isHorizontal ? "Right" : "Down"}`]
     ].includes(key)) {
-      return;
+      if (!typeahead || !/^\S$/i.test(key) || !this.#focusablesByFirstChar.has(key.toLowerCase())) {
+        return;
+      }
     }
     const active = getActiveElement();
     if (!(active instanceof HTMLElement)) {
@@ -315,9 +323,9 @@ var RovingTabIndex = class {
     event.preventDefault();
     event.stopPropagation();
     const currentIndex = focusables.indexOf(active);
-    let rawIndex;
+    let rawIndex = currentIndex;
     let newIndex = currentIndex;
-    const { wrap = false } = this.#options;
+    let target = focusables;
     switch (key) {
       case "End":
         newIndex = -1;
@@ -335,8 +343,18 @@ var RovingTabIndex = class {
         rawIndex = currentIndex + 1;
         newIndex = wrap ? rawIndex % focusables.length : Math.min(rawIndex, focusables.length - 1);
         break;
+      default: {
+        if (!typeahead) {
+          break;
+        }
+        target = this.#focusablesByFirstChar.get(key.toLowerCase()) ?? [];
+        const foundIndex = target.findIndex(
+          (focusable2) => focusables.indexOf(focusable2) > currentIndex
+        );
+        newIndex = foundIndex !== -1 ? foundIndex : 0;
+      }
     }
-    const focusable = focusables.at(newIndex);
+    const focusable = target.at(newIndex);
     if (!focusable) {
       return;
     }
@@ -359,6 +377,12 @@ var RovingTabIndex = class {
         restoreAttributes([focusable]);
       }
       this.#focusables.delete(focusable);
+      this.#focusablesByFirstChar.forEach((focusables) => {
+        const index = focusables.indexOf(focusable);
+        if (index !== -1) {
+          focusables.splice(index, 1);
+        }
+      });
     });
     current.forEach((c) => {
       if (this.#focusables.has(c)) {
@@ -367,6 +391,19 @@ var RovingTabIndex = class {
       this.#focusables.add(c);
       saveAttributes([c], ["tabindex"]);
       c.setAttribute("tabindex", "-1");
+      if (!this.#options.typeahead) {
+        return;
+      }
+      const shortcuts = c.ariaKeyShortcuts;
+      const keys = (shortcuts?.split(/\s+/) ?? [c.textContent?.trim()[0] ?? ""]).filter((key) => /^\S$/i.test(key)).map((key) => key.toLowerCase());
+      keys.forEach((key) => {
+        const focusables = this.#focusablesByFirstChar.get(key) ?? [];
+        focusables.push(c);
+        this.#focusablesByFirstChar.set(key, focusables);
+      });
+      const first = keys[0];
+      saveAttributes([c], ["aria-keyshortcuts"]);
+      !shortcuts && first && c.setAttribute("aria-keyshortcuts", first);
     });
     if (active && this.#focusables.has(active)) {
       this.#focusables.forEach((focusable) => {
@@ -405,7 +442,7 @@ function getActiveElement() {
  * Lightweight roving tabindex utility with fully focus management.
  * Designed for accessible menus, tabs, toolbars, and composite widgets.
  *
- * @version 1.0.2
+ * @version 1.1.0
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane

package/package.json

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