@y14e/roving-tabindex 3.0.9 → 3.0.11

package/README.md

@@ -10,14 +10,14 @@ npm i @y14e/roving-tabindex
 
 ```ts
 // npm
-import { createRovingTabIndex } from '@y14e/roving-tabindex@3.0.9';
+import { createRovingTabIndex } from '@y14e/roving-tabindex@3.0.10';
 
 // CDNs
-import { createRovingTabIndex } from 'https://esm.sh/@y14e/roving-tabindex@3.0.9';
+import { createRovingTabIndex } from 'https://esm.sh/@y14e/roving-tabindex@3.0.10';
 // or
-import { createRovingTabIndex } from 'https://cdn.jsdelivr.net/npm/@y14e/roving-tabindex@3.0.9/+esm';
+import { createRovingTabIndex } from 'https://cdn.jsdelivr.net/npm/@y14e/roving-tabindex@3.0.10/+esm';
 // or
-import { createRovingTabIndex } from 'https://esm.unpkg.com/@y14e/roving-tabindex@3.0.9';
+import { createRovingTabIndex } from 'https://esm.unpkg.com/@y14e/roving-tabindex@3.0.10';
 ```
 
 ## 📦 APIs

package/dist/index.bundle.cjs

@@ -0,0 +1,257 @@
+'use strict';
+
+var attributesUtils = require('@y14e/attributes-utils');
+var powerFocusable = require('power-focusable');
+
+// src/index.ts
+function createRovingTabIndex(container, options = {}) {
+  if (!(container instanceof Element)) {
+    console.warn("Invalid container element");
+    return () => {
+    };
+  }
+  const roving = new RovingTabIndex(container, options);
+  return () => roving.destroy();
+}
+var RovingTabIndex = class _RovingTabIndex {
+  static #initialized = /* @__PURE__ */ new Set();
+  #container;
+  #settings;
+  #focusables = /* @__PURE__ */ new Set();
+  #focusablesByFirstChar = /* @__PURE__ */ new Map();
+  #selectorFilter;
+  #controller = null;
+  #isDestroyed = false;
+  constructor(container, options = {}) {
+    this.#container = container;
+    let {
+      direction,
+      navigationOnly = false,
+      noMemory = false,
+      noStart = 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 noMemory !== "boolean") {
+      console.warn("Invalid noMemory option. Fallback: false.");
+      noMemory = false;
+    }
+    if (typeof noStart !== "boolean") {
+      console.warn("Invalid noStart option. Fallback: false.");
+      noStart = false;
+    }
+    if (typeof selector !== "undefined" && (typeof selector !== "string" || !selector.trim())) {
+      console.warn(
+        "Invalid selector. Fallback: all focusable elements (undefined)."
+      );
+      selector = void 0;
+    }
+    if (typeof typeahead !== "boolean") {
+      console.warn("Invalid typeahead option. Fallback: false.");
+      typeahead = false;
+    }
+    if (typeof wrap !== "boolean") {
+      console.warn("Invalid wrap option. Fallback: false.");
+      wrap = false;
+    }
+    this.#settings = {
+      navigationOnly,
+      noMemory,
+      noStart,
+      typeahead,
+      wrap
+    };
+    direction && Object.assign(this.#settings, { direction });
+    selector && Object.assign(this.#settings, { selector });
+    this.#selectorFilter = this.#createSelectorFilter();
+    this.#initialize();
+  }
+  destroy() {
+    if (this.#isDestroyed) {
+      return;
+    }
+    this.#isDestroyed = true;
+    this.#controller?.abort();
+    this.#controller = null;
+    attributesUtils.restoreAttributes([...this.#focusables]);
+    this.#focusables.clear();
+    this.#focusablesByFirstChar.clear();
+  }
+  #initialize() {
+    this.#update(document.activeElement);
+    if (!(this.#container instanceof HTMLElement)) {
+      return;
+    }
+    this.#controller = new AbortController();
+    const { signal } = this.#controller;
+    this.#container.addEventListener("focusin", this.#onFocusIn, {
+      capture: true,
+      signal
+    });
+    this.#container.addEventListener("keydown", this.#onKeyDown, {
+      capture: true,
+      signal
+    });
+  }
+  #onFocusIn = (event) => {
+    const { target } = event;
+    if (!(target instanceof Element)) {
+      return;
+    }
+    const isFocusable = this.#focusables.has(target);
+    this.#settings.noMemory && !isFocusable ? this.#update(null) : isFocusable && this.#update(target);
+  };
+  #onKeyDown = (event) => {
+    const { key, altKey, ctrlKey, metaKey, shiftKey } = event;
+    if (altKey || ctrlKey || metaKey || shiftKey) {
+      return;
+    }
+    const { direction, typeahead, wrap } = this.#settings;
+    const isBoth = !direction;
+    const isHorizontal = direction === "horizontal";
+    if (![
+      "End",
+      "Home",
+      ...isBoth ? ["ArrowLeft", "ArrowUp"] : [`Arrow${isHorizontal ? "Left" : "Up"}`],
+      ...isBoth ? ["ArrowRight", "ArrowDown"] : [`Arrow${isHorizontal ? "Right" : "Down"}`]
+    ].includes(key)) {
+      if (!typeahead || !/^\S$/i.test(key) || !this.#focusablesByFirstChar.has(key.toUpperCase())) {
+        return;
+      }
+    }
+    const active = powerFocusable.getActiveElement();
+    if (!(active instanceof HTMLElement)) {
+      return;
+    }
+    const current = this.#getFocusables();
+    if (!current.includes(active)) {
+      return;
+    }
+    event.preventDefault();
+    const currentIndex = current.indexOf(active);
+    let newIndex;
+    let target = current;
+    switch (key) {
+      case "End":
+        newIndex = -1;
+        break;
+      case "Home":
+        newIndex = 0;
+        break;
+      case "ArrowLeft":
+      case "ArrowUp": {
+        const rawIndex = currentIndex - 1;
+        newIndex = wrap ? rawIndex : Math.max(rawIndex, 0);
+        break;
+      }
+      case "ArrowRight":
+      case "ArrowDown": {
+        const rawIndex = currentIndex + 1;
+        newIndex = wrap ? rawIndex % current.length : Math.min(rawIndex, current.length - 1);
+        break;
+      }
+      default: {
+        target = this.#focusablesByFirstChar.get(key.toUpperCase()) ?? [];
+        const foundIndex = target.findIndex(
+          (focusable2) => current.indexOf(focusable2) > currentIndex
+        );
+        newIndex = foundIndex >= 0 ? foundIndex : 0;
+      }
+    }
+    const focusable = target.at(newIndex);
+    focusable && powerFocusable.focusElement(focusable);
+  };
+  #update(active) {
+    const current = new Set(this.#getFocusables());
+    for (const focusable of this.#focusables) {
+      if (!current.has(focusable)) {
+        focusable.isConnected && attributesUtils.restoreAttributes([focusable]);
+        this.#focusables.delete(focusable);
+        this.#focusablesByFirstChar.forEach((focusables) => {
+          const index = focusables.indexOf(focusable);
+          index >= 0 && focusables.splice(index, 1);
+        });
+      }
+    }
+    const { navigationOnly, noStart, typeahead } = this.#settings;
+    for (const focusable of current) {
+      if (this.#focusables.has(focusable)) {
+        continue;
+      }
+      if (_RovingTabIndex.#initialized.has(focusable)) {
+        throw new TypeError("Already initialized");
+      }
+      this.#focusables.add(focusable);
+      _RovingTabIndex.#initialized.add(focusable);
+      if (!navigationOnly) {
+        attributesUtils.saveAttributes([focusable], ["tabindex"]);
+        focusable.setAttribute("tabindex", "-1");
+      }
+      if (!typeahead) {
+        continue;
+      }
+      const char = focusable.textContent?.trim()?.at(0)?.toUpperCase();
+      const value = focusable.ariaKeyShortcuts?.trim();
+      const keys = new Set(
+        value ? value.split(/\s+/).filter((key) => /^\S$/i.test(key)).map((key) => key.toUpperCase()) : []
+      );
+      if (char) {
+        keys.add(char);
+        attributesUtils.saveAttributes([focusable], ["aria-keyshortcuts"]);
+        attributesUtils.addTokenToAttribute(focusable, "aria-keyshortcuts", char, {
+          caseInsensitive: true
+        });
+      }
+      keys.forEach((key) => {
+        const focusables = this.#focusablesByFirstChar.get(key) ?? [];
+        focusables.push(focusable);
+        this.#focusablesByFirstChar.set(key, focusables);
+      });
+    }
+    if (!navigationOnly) {
+      if (active && this.#focusables.has(active)) {
+        this.#focusables.forEach((focusable) => {
+          focusable.setAttribute("tabindex", focusable === active ? "0" : "-1");
+        });
+      } else {
+        [...this.#focusables].forEach((focusable, i) => {
+          focusable.setAttribute("tabindex", i || noStart ? "-1" : "0");
+        });
+      }
+    }
+  }
+  #createSelectorFilter() {
+    const { selector } = this.#settings;
+    return (element) => !selector || [...this.#container.querySelectorAll(selector)].includes(element);
+  }
+  #getFocusables() {
+    return powerFocusable.getFocusables(this.#container, {
+      composed: true,
+      filter: this.#selectorFilter,
+      skipNegativeTabIndexCheck: !this.#settings.navigationOnly,
+      skipVisibilityCheck: true
+    });
+  }
+};
+/**
+ * Roving Tabindex
+ * Lightweight roving tabindex utility with fully focus management.
+ * Designed for accessible menus, tabs, toolbars, and composite widgets.
+ *
+ * @version 3.0.11
+ * @author Yusuke Kamiyamane
+ * @license MIT
+ * @copyright Copyright (c) Yusuke Kamiyamane
+ * @see {@link https://github.com/y14e/roving-tabindex}
+ */
+
+exports.createRovingTabIndex = createRovingTabIndex;

package/dist/index.bundle.js

@@ -0,0 +1,255 @@
+import { restoreAttributes, saveAttributes, addTokenToAttribute } from '@y14e/attributes-utils';
+import { getActiveElement, focusElement, getFocusables } from 'power-focusable';
+
+// src/index.ts
+function createRovingTabIndex(container, options = {}) {
+  if (!(container instanceof Element)) {
+    console.warn("Invalid container element");
+    return () => {
+    };
+  }
+  const roving = new RovingTabIndex(container, options);
+  return () => roving.destroy();
+}
+var RovingTabIndex = class _RovingTabIndex {
+  static #initialized = /* @__PURE__ */ new Set();
+  #container;
+  #settings;
+  #focusables = /* @__PURE__ */ new Set();
+  #focusablesByFirstChar = /* @__PURE__ */ new Map();
+  #selectorFilter;
+  #controller = null;
+  #isDestroyed = false;
+  constructor(container, options = {}) {
+    this.#container = container;
+    let {
+      direction,
+      navigationOnly = false,
+      noMemory = false,
+      noStart = 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 noMemory !== "boolean") {
+      console.warn("Invalid noMemory option. Fallback: false.");
+      noMemory = false;
+    }
+    if (typeof noStart !== "boolean") {
+      console.warn("Invalid noStart option. Fallback: false.");
+      noStart = false;
+    }
+    if (typeof selector !== "undefined" && (typeof selector !== "string" || !selector.trim())) {
+      console.warn(
+        "Invalid selector. Fallback: all focusable elements (undefined)."
+      );
+      selector = void 0;
+    }
+    if (typeof typeahead !== "boolean") {
+      console.warn("Invalid typeahead option. Fallback: false.");
+      typeahead = false;
+    }
+    if (typeof wrap !== "boolean") {
+      console.warn("Invalid wrap option. Fallback: false.");
+      wrap = false;
+    }
+    this.#settings = {
+      navigationOnly,
+      noMemory,
+      noStart,
+      typeahead,
+      wrap
+    };
+    direction && Object.assign(this.#settings, { direction });
+    selector && Object.assign(this.#settings, { selector });
+    this.#selectorFilter = this.#createSelectorFilter();
+    this.#initialize();
+  }
+  destroy() {
+    if (this.#isDestroyed) {
+      return;
+    }
+    this.#isDestroyed = true;
+    this.#controller?.abort();
+    this.#controller = null;
+    restoreAttributes([...this.#focusables]);
+    this.#focusables.clear();
+    this.#focusablesByFirstChar.clear();
+  }
+  #initialize() {
+    this.#update(document.activeElement);
+    if (!(this.#container instanceof HTMLElement)) {
+      return;
+    }
+    this.#controller = new AbortController();
+    const { signal } = this.#controller;
+    this.#container.addEventListener("focusin", this.#onFocusIn, {
+      capture: true,
+      signal
+    });
+    this.#container.addEventListener("keydown", this.#onKeyDown, {
+      capture: true,
+      signal
+    });
+  }
+  #onFocusIn = (event) => {
+    const { target } = event;
+    if (!(target instanceof Element)) {
+      return;
+    }
+    const isFocusable = this.#focusables.has(target);
+    this.#settings.noMemory && !isFocusable ? this.#update(null) : isFocusable && this.#update(target);
+  };
+  #onKeyDown = (event) => {
+    const { key, altKey, ctrlKey, metaKey, shiftKey } = event;
+    if (altKey || ctrlKey || metaKey || shiftKey) {
+      return;
+    }
+    const { direction, typeahead, wrap } = this.#settings;
+    const isBoth = !direction;
+    const isHorizontal = direction === "horizontal";
+    if (![
+      "End",
+      "Home",
+      ...isBoth ? ["ArrowLeft", "ArrowUp"] : [`Arrow${isHorizontal ? "Left" : "Up"}`],
+      ...isBoth ? ["ArrowRight", "ArrowDown"] : [`Arrow${isHorizontal ? "Right" : "Down"}`]
+    ].includes(key)) {
+      if (!typeahead || !/^\S$/i.test(key) || !this.#focusablesByFirstChar.has(key.toUpperCase())) {
+        return;
+      }
+    }
+    const active = getActiveElement();
+    if (!(active instanceof HTMLElement)) {
+      return;
+    }
+    const current = this.#getFocusables();
+    if (!current.includes(active)) {
+      return;
+    }
+    event.preventDefault();
+    const currentIndex = current.indexOf(active);
+    let newIndex;
+    let target = current;
+    switch (key) {
+      case "End":
+        newIndex = -1;
+        break;
+      case "Home":
+        newIndex = 0;
+        break;
+      case "ArrowLeft":
+      case "ArrowUp": {
+        const rawIndex = currentIndex - 1;
+        newIndex = wrap ? rawIndex : Math.max(rawIndex, 0);
+        break;
+      }
+      case "ArrowRight":
+      case "ArrowDown": {
+        const rawIndex = currentIndex + 1;
+        newIndex = wrap ? rawIndex % current.length : Math.min(rawIndex, current.length - 1);
+        break;
+      }
+      default: {
+        target = this.#focusablesByFirstChar.get(key.toUpperCase()) ?? [];
+        const foundIndex = target.findIndex(
+          (focusable2) => current.indexOf(focusable2) > currentIndex
+        );
+        newIndex = foundIndex >= 0 ? foundIndex : 0;
+      }
+    }
+    const focusable = target.at(newIndex);
+    focusable && focusElement(focusable);
+  };
+  #update(active) {
+    const current = new Set(this.#getFocusables());
+    for (const focusable of this.#focusables) {
+      if (!current.has(focusable)) {
+        focusable.isConnected && restoreAttributes([focusable]);
+        this.#focusables.delete(focusable);
+        this.#focusablesByFirstChar.forEach((focusables) => {
+          const index = focusables.indexOf(focusable);
+          index >= 0 && focusables.splice(index, 1);
+        });
+      }
+    }
+    const { navigationOnly, noStart, typeahead } = this.#settings;
+    for (const focusable of current) {
+      if (this.#focusables.has(focusable)) {
+        continue;
+      }
+      if (_RovingTabIndex.#initialized.has(focusable)) {
+        throw new TypeError("Already initialized");
+      }
+      this.#focusables.add(focusable);
+      _RovingTabIndex.#initialized.add(focusable);
+      if (!navigationOnly) {
+        saveAttributes([focusable], ["tabindex"]);
+        focusable.setAttribute("tabindex", "-1");
+      }
+      if (!typeahead) {
+        continue;
+      }
+      const char = focusable.textContent?.trim()?.at(0)?.toUpperCase();
+      const value = focusable.ariaKeyShortcuts?.trim();
+      const keys = new Set(
+        value ? value.split(/\s+/).filter((key) => /^\S$/i.test(key)).map((key) => key.toUpperCase()) : []
+      );
+      if (char) {
+        keys.add(char);
+        saveAttributes([focusable], ["aria-keyshortcuts"]);
+        addTokenToAttribute(focusable, "aria-keyshortcuts", char, {
+          caseInsensitive: true
+        });
+      }
+      keys.forEach((key) => {
+        const focusables = this.#focusablesByFirstChar.get(key) ?? [];
+        focusables.push(focusable);
+        this.#focusablesByFirstChar.set(key, focusables);
+      });
+    }
+    if (!navigationOnly) {
+      if (active && this.#focusables.has(active)) {
+        this.#focusables.forEach((focusable) => {
+          focusable.setAttribute("tabindex", focusable === active ? "0" : "-1");
+        });
+      } else {
+        [...this.#focusables].forEach((focusable, i) => {
+          focusable.setAttribute("tabindex", i || noStart ? "-1" : "0");
+        });
+      }
+    }
+  }
+  #createSelectorFilter() {
+    const { selector } = this.#settings;
+    return (element) => !selector || [...this.#container.querySelectorAll(selector)].includes(element);
+  }
+  #getFocusables() {
+    return getFocusables(this.#container, {
+      composed: true,
+      filter: this.#selectorFilter,
+      skipNegativeTabIndexCheck: !this.#settings.navigationOnly,
+      skipVisibilityCheck: true
+    });
+  }
+};
+/**
+ * Roving Tabindex
+ * Lightweight roving tabindex utility with fully focus management.
+ * Designed for accessible menus, tabs, toolbars, and composite widgets.
+ *
+ * @version 3.0.11
+ * @author Yusuke Kamiyamane
+ * @license MIT
+ * @copyright Copyright (c) Yusuke Kamiyamane
+ * @see {@link https://github.com/y14e/roving-tabindex}
+ */
+
+export { createRovingTabIndex };