@y14e/roving-tabindex 1.1.1 → 1.1.3

package/README.md

@@ -41,10 +41,10 @@ const cleanup = createRovingTabIndex(container, options);
 
 ```ts
 interface RovingTabIndexOptions {
-  direction?: 'horizontal' | 'vertical'; // default: both (undefined)
-  selector?: string;
-  typeahead?: boolean;                   // default: false
-  wrap?: boolean;                        // default: false
+  direction?: 'horizontal' | 'vertical' | undefined; // default: both (undefined)
+  selector?: string | undefined;
+  typeahead?: boolean;                               // default: false
+  wrap?: boolean;                                    // default: false
 }
 ```
 

package/dist/index.cjs

@@ -1,6 +1,13 @@
 'use strict';
 
 // node_modules/@y14e/attributes-utils/dist/index.js
+function addTokenToAttribute(element, attribute, token) {
+  const tokens = new Set(
+    element.getAttribute(attribute)?.trim().split(/\s+/) ?? []
+  );
+  tokens.add(token);
+  element.setAttribute(attribute, [...tokens].join(" "));
+}
 var snapshots = /* @__PURE__ */ new WeakMap();
 function restoreAttributes(elements) {
   elements.forEach((element) => {
@@ -238,24 +245,31 @@ function createRovingTabIndex(container, options = {}) {
   if (!(container instanceof Element)) {
     throw new Error("Invalid container element");
   }
-  const { direction, selector, typeahead = false, wrap = false } = options;
+  let { direction, selector, typeahead = false, wrap = false } = options;
   if (typeof direction !== "undefined" && !["horizontal", "vertical"].includes(direction)) {
     console.warn("Invalid direction. Fallback: both (undefined).");
-    Object.assign(options, { direction: void 0 });
+    direction = void 0;
   }
   if (typeof selector !== "undefined" && typeof selector !== "string") {
-    console.warn("Invalid selector. Fallback: all focusable elements.");
-    Object.assign(options, { selector: void 0 });
+    console.warn(
+      "Invalid selector. Fallback: all focusable elements (undefined)."
+    );
+    selector = void 0;
   }
   if (typeof typeahead !== "boolean") {
     console.warn("Invalid typeahead. Fallback: false.");
-    Object.assign(options, { typeahead: false });
+    typeahead = false;
   }
   if (typeof wrap !== "boolean") {
     console.warn("Invalid wrap. Fallback: false.");
-    Object.assign(options, { wrap: false });
+    wrap = false;
   }
-  const roving = new RovingTabIndex(container, options);
+  const roving = new RovingTabIndex(container, {
+    direction,
+    selector,
+    typeahead,
+    wrap
+  });
   return () => roving.destroy();
 }
 var RovingTabIndex = class {
@@ -325,7 +339,7 @@ var RovingTabIndex = class {
     event.preventDefault();
     event.stopPropagation();
     const currentIndex = focusables.indexOf(active);
-    let rawIndex = currentIndex;
+    let rawIndex;
     let newIndex = currentIndex;
     let target = focusables;
     switch (key) {
@@ -396,16 +410,21 @@ var RovingTabIndex = class {
       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());
+      const shortcuts = c.ariaKeyShortcuts?.trim() ?? "";
+      const keys = new Set(
+        shortcuts ? shortcuts.split(/\s+/).filter((key) => /^\S$/i.test(key)).map((key) => key.toLowerCase()) : []
+      );
+      const char = c.textContent?.trim()?.at(0)?.toLowerCase();
+      if (char) {
+        keys.add(char);
+        saveAttributes([c], ["aria-keyshortcuts"]);
+        addTokenToAttribute(c, "aria-keyshortcuts", char);
+      }
       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) => {
@@ -444,7 +463,7 @@ function getActiveElement() {
  * Lightweight roving tabindex utility with fully focus management.
  * Designed for accessible menus, tabs, toolbars, and composite widgets.
  *
- * @version 1.1.1
+ * @version 1.1.3
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane

package/dist/index.d.cts

@@ -3,15 +3,15 @@
  * Lightweight roving tabindex utility with fully focus management.
  * Designed for accessible menus, tabs, toolbars, and composite widgets.
  *
- * @version 1.1.1
+ * @version 1.1.3
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane
  * @see {@link https://github.com/y14e/roving-tabindex}
  */
 interface RovingTabIndexOptions {
-    readonly direction?: 'horizontal' | 'vertical';
-    readonly selector?: string;
+    readonly direction?: 'horizontal' | 'vertical' | undefined;
+    readonly selector?: string | undefined;
     readonly typeahead?: boolean;
     readonly wrap?: boolean;
 }

package/dist/index.d.ts

@@ -3,15 +3,15 @@
  * Lightweight roving tabindex utility with fully focus management.
  * Designed for accessible menus, tabs, toolbars, and composite widgets.
  *
- * @version 1.1.1
+ * @version 1.1.3
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane
  * @see {@link https://github.com/y14e/roving-tabindex}
  */
 interface RovingTabIndexOptions {
-    readonly direction?: 'horizontal' | 'vertical';
-    readonly selector?: string;
+    readonly direction?: 'horizontal' | 'vertical' | undefined;
+    readonly selector?: string | undefined;
     readonly typeahead?: boolean;
     readonly wrap?: boolean;
 }

package/dist/index.js

@@ -1,4 +1,11 @@
 // node_modules/@y14e/attributes-utils/dist/index.js
+function addTokenToAttribute(element, attribute, token) {
+  const tokens = new Set(
+    element.getAttribute(attribute)?.trim().split(/\s+/) ?? []
+  );
+  tokens.add(token);
+  element.setAttribute(attribute, [...tokens].join(" "));
+}
 var snapshots = /* @__PURE__ */ new WeakMap();
 function restoreAttributes(elements) {
   elements.forEach((element) => {
@@ -236,24 +243,31 @@ function createRovingTabIndex(container, options = {}) {
   if (!(container instanceof Element)) {
     throw new Error("Invalid container element");
   }
-  const { direction, selector, typeahead = false, wrap = false } = options;
+  let { direction, selector, typeahead = false, wrap = false } = options;
   if (typeof direction !== "undefined" && !["horizontal", "vertical"].includes(direction)) {
     console.warn("Invalid direction. Fallback: both (undefined).");
-    Object.assign(options, { direction: void 0 });
+    direction = void 0;
   }
   if (typeof selector !== "undefined" && typeof selector !== "string") {
-    console.warn("Invalid selector. Fallback: all focusable elements.");
-    Object.assign(options, { selector: void 0 });
+    console.warn(
+      "Invalid selector. Fallback: all focusable elements (undefined)."
+    );
+    selector = void 0;
   }
   if (typeof typeahead !== "boolean") {
     console.warn("Invalid typeahead. Fallback: false.");
-    Object.assign(options, { typeahead: false });
+    typeahead = false;
   }
   if (typeof wrap !== "boolean") {
     console.warn("Invalid wrap. Fallback: false.");
-    Object.assign(options, { wrap: false });
+    wrap = false;
   }
-  const roving = new RovingTabIndex(container, options);
+  const roving = new RovingTabIndex(container, {
+    direction,
+    selector,
+    typeahead,
+    wrap
+  });
   return () => roving.destroy();
 }
 var RovingTabIndex = class {
@@ -323,7 +337,7 @@ var RovingTabIndex = class {
     event.preventDefault();
     event.stopPropagation();
     const currentIndex = focusables.indexOf(active);
-    let rawIndex = currentIndex;
+    let rawIndex;
     let newIndex = currentIndex;
     let target = focusables;
     switch (key) {
@@ -394,16 +408,21 @@ var RovingTabIndex = class {
       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());
+      const shortcuts = c.ariaKeyShortcuts?.trim() ?? "";
+      const keys = new Set(
+        shortcuts ? shortcuts.split(/\s+/).filter((key) => /^\S$/i.test(key)).map((key) => key.toLowerCase()) : []
+      );
+      const char = c.textContent?.trim()?.at(0)?.toLowerCase();
+      if (char) {
+        keys.add(char);
+        saveAttributes([c], ["aria-keyshortcuts"]);
+        addTokenToAttribute(c, "aria-keyshortcuts", char);
+      }
       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) => {
@@ -442,7 +461,7 @@ function getActiveElement() {
  * Lightweight roving tabindex utility with fully focus management.
  * Designed for accessible menus, tabs, toolbars, and composite widgets.
  *
- * @version 1.1.1
+ * @version 1.1.3
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane

package/package.json

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