npm - @y14e/roving-tabindex - Versions diffs - 3.0.18 → 3.1.0 - Mend

@y14e/roving-tabindex 3.0.18 → 3.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/README.md CHANGED Viewed

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

package/dist/index.bundle.cjs CHANGED Viewed

@@ -118,6 +118,12 @@ function getFocusables(container = document.body, options = {}) {
   const unfiltered = normalizeRadioGroup(sortByTabIndex(elements));
   return filter ? unfiltered.filter(filter) : unfiltered;
 }
+function getNextFocusable(container = document.body, options = {}) {
+  return getRelativeFocusable(container, 1, options);
+}
+function getPreviousFocusable(container = document.body, options = {}) {
+  return getRelativeFocusable(container, -1, options);
+}
 function isFocusable(element, options = {}) {
   if (!(element instanceof Element)) {
     console.warn("Invalid element");
@@ -155,6 +161,84 @@ function isFocusable(element, options = {}) {
   }
   return true;
 }
+function getRelativeFocusable(container, offset, options) {
+  if (!(container instanceof Element)) {
+    console.warn("Invalid container element. Fallback: <body> element.");
+    container = document.body;
+  }
+  let {
+    anchor = getActiveElement(),
+    composed = false,
+    filter,
+    include,
+    skipNegativeTabIndexCheck = false,
+    skipVisibilityCheck = false,
+    wrap = false
+  } = options;
+  if (!(anchor instanceof Element)) {
+    const active = getActiveElement();
+    if (active instanceof Element) {
+      console.warn("Invalid anchor element. Fallback: active element.");
+      anchor = active;
+    } else {
+      console.warn("Invalid anchor element");
+      return null;
+    }
+  }
+  if (!containsComposed(container, anchor)) {
+    console.warn("Anchor (active) element not within container");
+    return null;
+  }
+  if (typeof composed !== "boolean") {
+    console.warn("Invalid composed option. Fallback: false.");
+    composed = false;
+  }
+  if (typeof filter !== "undefined" && typeof filter !== "function") {
+    console.warn(
+      "Invalid filter function. Fallback: no filter function (undefined)."
+    );
+    filter = void 0;
+  }
+  if (typeof include !== "undefined" && typeof include !== "function") {
+    console.warn(
+      "Invalid include function. Fallback: no include function (undefined)."
+    );
+    include = void 0;
+  }
+  if (typeof skipNegativeTabIndexCheck !== "boolean") {
+    console.warn("Invalid skipNegativeTabIndexCheck option. Fallback: false.");
+    skipNegativeTabIndexCheck = false;
+  }
+  if (typeof skipVisibilityCheck !== "boolean") {
+    console.warn("Invalid skipVisibilityCheck option. Fallback: false.");
+    skipVisibilityCheck = false;
+  }
+  if (typeof wrap !== "boolean") {
+    console.warn("Invalid wrap option. Fallback: false.");
+    wrap = false;
+  }
+  const settings = { composed, skipNegativeTabIndexCheck, skipVisibilityCheck };
+  if (filter !== void 0) {
+    Object.assign(settings, { filter });
+  }
+  if (include !== void 0) {
+    Object.assign(settings, { include });
+  }
+  const focusables = getFocusables(container, settings);
+  const { length } = focusables;
+  if (!length) {
+    return null;
+  }
+  const currentIndex = focusables.indexOf(anchor);
+  if (currentIndex === -1) {
+    return null;
+  }
+  const offsetIndex = currentIndex + offset;
+  if ((offsetIndex < 0 || offsetIndex >= length) && !wrap) {
+    return null;
+  }
+  return focusables[(offsetIndex + length) % length] ?? null;
+}
 function isDisabledDeep(element) {
   let current = element;
   while (current) {
@@ -235,6 +319,17 @@ function sortByTabIndex(elements) {
   }
   return sorted;
 }
+function containsComposed(container, element) {
+  let current = element;
+  while (current) {
+    if (current === container) {
+      return true;
+    } else {
+      current = current instanceof ShadowRoot ? current.mode === "open" ? current.host : null : current.parentNode;
+    }
+  }
+  return false;
+}
 function getComposedChildren(node) {
   if (node instanceof ShadowRoot) {
     return getChildren(node);
@@ -411,13 +506,14 @@ var RovingTabIndex = class _RovingTabIndex {
   };
   #onKeyDown = (event) => {
     const { key, altKey, ctrlKey, metaKey, shiftKey } = event;
-    if (altKey || ctrlKey || metaKey || shiftKey) {
+    if (shiftKey && key !== "Tab" || altKey || ctrlKey || metaKey) {
       return;
     }
     const { direction, typeahead, wrap } = this.#settings;
     const isBoth = !direction;
     const isHorizontal = direction === "horizontal";
     if (![
+      "Tab",
       "End",
       "Home",
       ...isBoth ? ["ArrowLeft", "ArrowUp"] : [`Arrow${isHorizontal ? "Left" : "Up"}`],
@@ -435,11 +531,14 @@ var RovingTabIndex = class _RovingTabIndex {
     if (!current.includes(active)) {
       return;
     }
-    event.preventDefault();
+    let shouldPrevent = true;
     const currentIndex = current.indexOf(active);
-    let newIndex;
+    let newIndex = 0;
     let target = current;
     switch (key) {
+      case "Tab":
+        shouldPrevent = this.#moveFocus(shiftKey ? "previous" : "next");
+        break;
       case "End":
         newIndex = -1;
         break;
@@ -461,13 +560,16 @@ var RovingTabIndex = class _RovingTabIndex {
       default: {
         target = this.#focusablesByFirstChar.get(key.toUpperCase()) ?? [];
         const foundIndex = target.findIndex(
-          (focusable2) => current.indexOf(focusable2) > currentIndex
+          (focusable) => current.indexOf(focusable) > currentIndex
         );
         newIndex = foundIndex >= 0 ? foundIndex : 0;
       }
     }
-    const focusable = target.at(newIndex);
-    focusable && focusElement(focusable);
+    shouldPrevent && event.preventDefault();
+    if (key !== "Tab") {
+      const focusable = target.at(newIndex);
+      focusable && focusElement(focusable);
+    }
   };
   #update(active) {
     const current = new Set(this.#getFocusables());
@@ -540,13 +642,24 @@ var RovingTabIndex = class _RovingTabIndex {
       skipVisibilityCheck: true
     });
   }
+  #moveFocus(direction) {
+    const options = {
+      composed: true
+    };
+    const focusable = direction === "previous" ? getPreviousFocusable(document.body, options) : getNextFocusable(document.body, options);
+    if (focusable) {
+      focusElement(focusable);
+      return true;
+    }
+    return false;
+  }
 };
 /**
  * Roving Tabindex
  * Lightweight roving tabindex utility with fully focus management.
  * Designed for accessible menus, tabs, toolbars, and composite widgets.
  *
- * @version 3.0.18
+ * @version 3.1.0
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane

package/dist/index.bundle.js CHANGED Viewed

@@ -116,6 +116,12 @@ function getFocusables(container = document.body, options = {}) {
   const unfiltered = normalizeRadioGroup(sortByTabIndex(elements));
   return filter ? unfiltered.filter(filter) : unfiltered;
 }
+function getNextFocusable(container = document.body, options = {}) {
+  return getRelativeFocusable(container, 1, options);
+}
+function getPreviousFocusable(container = document.body, options = {}) {
+  return getRelativeFocusable(container, -1, options);
+}
 function isFocusable(element, options = {}) {
   if (!(element instanceof Element)) {
     console.warn("Invalid element");
@@ -153,6 +159,84 @@ function isFocusable(element, options = {}) {
   }
   return true;
 }
+function getRelativeFocusable(container, offset, options) {
+  if (!(container instanceof Element)) {
+    console.warn("Invalid container element. Fallback: <body> element.");
+    container = document.body;
+  }
+  let {
+    anchor = getActiveElement(),
+    composed = false,
+    filter,
+    include,
+    skipNegativeTabIndexCheck = false,
+    skipVisibilityCheck = false,
+    wrap = false
+  } = options;
+  if (!(anchor instanceof Element)) {
+    const active = getActiveElement();
+    if (active instanceof Element) {
+      console.warn("Invalid anchor element. Fallback: active element.");
+      anchor = active;
+    } else {
+      console.warn("Invalid anchor element");
+      return null;
+    }
+  }
+  if (!containsComposed(container, anchor)) {
+    console.warn("Anchor (active) element not within container");
+    return null;
+  }
+  if (typeof composed !== "boolean") {
+    console.warn("Invalid composed option. Fallback: false.");
+    composed = false;
+  }
+  if (typeof filter !== "undefined" && typeof filter !== "function") {
+    console.warn(
+      "Invalid filter function. Fallback: no filter function (undefined)."
+    );
+    filter = void 0;
+  }
+  if (typeof include !== "undefined" && typeof include !== "function") {
+    console.warn(
+      "Invalid include function. Fallback: no include function (undefined)."
+    );
+    include = void 0;
+  }
+  if (typeof skipNegativeTabIndexCheck !== "boolean") {
+    console.warn("Invalid skipNegativeTabIndexCheck option. Fallback: false.");
+    skipNegativeTabIndexCheck = false;
+  }
+  if (typeof skipVisibilityCheck !== "boolean") {
+    console.warn("Invalid skipVisibilityCheck option. Fallback: false.");
+    skipVisibilityCheck = false;
+  }
+  if (typeof wrap !== "boolean") {
+    console.warn("Invalid wrap option. Fallback: false.");
+    wrap = false;
+  }
+  const settings = { composed, skipNegativeTabIndexCheck, skipVisibilityCheck };
+  if (filter !== void 0) {
+    Object.assign(settings, { filter });
+  }
+  if (include !== void 0) {
+    Object.assign(settings, { include });
+  }
+  const focusables = getFocusables(container, settings);
+  const { length } = focusables;
+  if (!length) {
+    return null;
+  }
+  const currentIndex = focusables.indexOf(anchor);
+  if (currentIndex === -1) {
+    return null;
+  }
+  const offsetIndex = currentIndex + offset;
+  if ((offsetIndex < 0 || offsetIndex >= length) && !wrap) {
+    return null;
+  }
+  return focusables[(offsetIndex + length) % length] ?? null;
+}
 function isDisabledDeep(element) {
   let current = element;
   while (current) {
@@ -233,6 +317,17 @@ function sortByTabIndex(elements) {
   }
   return sorted;
 }
+function containsComposed(container, element) {
+  let current = element;
+  while (current) {
+    if (current === container) {
+      return true;
+    } else {
+      current = current instanceof ShadowRoot ? current.mode === "open" ? current.host : null : current.parentNode;
+    }
+  }
+  return false;
+}
 function getComposedChildren(node) {
   if (node instanceof ShadowRoot) {
     return getChildren(node);
@@ -409,13 +504,14 @@ var RovingTabIndex = class _RovingTabIndex {
   };
   #onKeyDown = (event) => {
     const { key, altKey, ctrlKey, metaKey, shiftKey } = event;
-    if (altKey || ctrlKey || metaKey || shiftKey) {
+    if (shiftKey && key !== "Tab" || altKey || ctrlKey || metaKey) {
       return;
     }
     const { direction, typeahead, wrap } = this.#settings;
     const isBoth = !direction;
     const isHorizontal = direction === "horizontal";
     if (![
+      "Tab",
       "End",
       "Home",
       ...isBoth ? ["ArrowLeft", "ArrowUp"] : [`Arrow${isHorizontal ? "Left" : "Up"}`],
@@ -433,11 +529,14 @@ var RovingTabIndex = class _RovingTabIndex {
     if (!current.includes(active)) {
       return;
     }
-    event.preventDefault();
+    let shouldPrevent = true;
     const currentIndex = current.indexOf(active);
-    let newIndex;
+    let newIndex = 0;
     let target = current;
     switch (key) {
+      case "Tab":
+        shouldPrevent = this.#moveFocus(shiftKey ? "previous" : "next");
+        break;
       case "End":
         newIndex = -1;
         break;
@@ -459,13 +558,16 @@ var RovingTabIndex = class _RovingTabIndex {
       default: {
         target = this.#focusablesByFirstChar.get(key.toUpperCase()) ?? [];
         const foundIndex = target.findIndex(
-          (focusable2) => current.indexOf(focusable2) > currentIndex
+          (focusable) => current.indexOf(focusable) > currentIndex
         );
         newIndex = foundIndex >= 0 ? foundIndex : 0;
       }
     }
-    const focusable = target.at(newIndex);
-    focusable && focusElement(focusable);
+    shouldPrevent && event.preventDefault();
+    if (key !== "Tab") {
+      const focusable = target.at(newIndex);
+      focusable && focusElement(focusable);
+    }
   };
   #update(active) {
     const current = new Set(this.#getFocusables());
@@ -538,13 +640,24 @@ var RovingTabIndex = class _RovingTabIndex {
       skipVisibilityCheck: true
     });
   }
+  #moveFocus(direction) {
+    const options = {
+      composed: true
+    };
+    const focusable = direction === "previous" ? getPreviousFocusable(document.body, options) : getNextFocusable(document.body, options);
+    if (focusable) {
+      focusElement(focusable);
+      return true;
+    }
+    return false;
+  }
 };
 /**
  * Roving Tabindex
  * Lightweight roving tabindex utility with fully focus management.
  * Designed for accessible menus, tabs, toolbars, and composite widgets.
  *
- * @version 3.0.18
+ * @version 3.1.0
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane

package/dist/index.cjs CHANGED Viewed

@@ -127,13 +127,14 @@ var RovingTabIndex = class _RovingTabIndex {
   };
   #onKeyDown = (event) => {
     const { key, altKey, ctrlKey, metaKey, shiftKey } = event;
-    if (altKey || ctrlKey || metaKey || shiftKey) {
+    if (shiftKey && key !== "Tab" || altKey || ctrlKey || metaKey) {
       return;
     }
     const { direction, typeahead, wrap } = this.#settings;
     const isBoth = !direction;
     const isHorizontal = direction === "horizontal";
     if (![
+      "Tab",
       "End",
       "Home",
       ...isBoth ? ["ArrowLeft", "ArrowUp"] : [`Arrow${isHorizontal ? "Left" : "Up"}`],
@@ -151,11 +152,14 @@ var RovingTabIndex = class _RovingTabIndex {
     if (!current.includes(active)) {
       return;
     }
-    event.preventDefault();
+    let shouldPrevent = true;
     const currentIndex = current.indexOf(active);
-    let newIndex;
+    let newIndex = 0;
     let target = current;
     switch (key) {
+      case "Tab":
+        shouldPrevent = this.#moveFocus(shiftKey ? "previous" : "next");
+        break;
       case "End":
         newIndex = -1;
         break;
@@ -177,13 +181,16 @@ var RovingTabIndex = class _RovingTabIndex {
       default: {
         target = this.#focusablesByFirstChar.get(key.toUpperCase()) ?? [];
         const foundIndex = target.findIndex(
-          (focusable2) => current.indexOf(focusable2) > currentIndex
+          (focusable) => current.indexOf(focusable) > currentIndex
         );
         newIndex = foundIndex >= 0 ? foundIndex : 0;
       }
     }
-    const focusable = target.at(newIndex);
-    focusable && powerFocusable.focusElement(focusable);
+    shouldPrevent && event.preventDefault();
+    if (key !== "Tab") {
+      const focusable = target.at(newIndex);
+      focusable && powerFocusable.focusElement(focusable);
+    }
   };
   #update(active) {
     const current = new Set(this.#getFocusables());
@@ -256,13 +263,24 @@ var RovingTabIndex = class _RovingTabIndex {
       skipVisibilityCheck: true
     });
   }
+  #moveFocus(direction) {
+    const options = {
+      composed: true
+    };
+    const focusable = direction === "previous" ? powerFocusable.getPreviousFocusable(document.body, options) : powerFocusable.getNextFocusable(document.body, options);
+    if (focusable) {
+      powerFocusable.focusElement(focusable);
+      return true;
+    }
+    return false;
+  }
 };
 /**
  * Roving Tabindex
  * Lightweight roving tabindex utility with fully focus management.
  * Designed for accessible menus, tabs, toolbars, and composite widgets.
  *
- * @version 3.0.18
+ * @version 3.1.0
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane

package/dist/index.d.cts CHANGED Viewed

@@ -3,7 +3,7 @@
  * Lightweight roving tabindex utility with fully focus management.
  * Designed for accessible menus, tabs, toolbars, and composite widgets.
  *
- * @version 3.0.18
+ * @version 3.1.0
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane

package/dist/index.d.ts CHANGED Viewed

@@ -3,7 +3,7 @@
  * Lightweight roving tabindex utility with fully focus management.
  * Designed for accessible menus, tabs, toolbars, and composite widgets.
  *
- * @version 3.0.18
+ * @version 3.1.0
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane

package/dist/index.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { restoreAttributes, saveAttributes, addTokenToAttribute } from '@y14e/attributes-utils';
-import { getActiveElement, focusElement, getFocusables } from 'power-focusable';
+import { getActiveElement, focusElement, getFocusables, getPreviousFocusable, getNextFocusable } from 'power-focusable';
 // src/index.ts
 function createRovingTabIndex(container, options = {}) {
@@ -125,13 +125,14 @@ var RovingTabIndex = class _RovingTabIndex {
   };
   #onKeyDown = (event) => {
     const { key, altKey, ctrlKey, metaKey, shiftKey } = event;
-    if (altKey || ctrlKey || metaKey || shiftKey) {
+    if (shiftKey && key !== "Tab" || altKey || ctrlKey || metaKey) {
       return;
     }
     const { direction, typeahead, wrap } = this.#settings;
     const isBoth = !direction;
     const isHorizontal = direction === "horizontal";
     if (![
+      "Tab",
       "End",
       "Home",
       ...isBoth ? ["ArrowLeft", "ArrowUp"] : [`Arrow${isHorizontal ? "Left" : "Up"}`],
@@ -149,11 +150,14 @@ var RovingTabIndex = class _RovingTabIndex {
     if (!current.includes(active)) {
       return;
     }
-    event.preventDefault();
+    let shouldPrevent = true;
     const currentIndex = current.indexOf(active);
-    let newIndex;
+    let newIndex = 0;
     let target = current;
     switch (key) {
+      case "Tab":
+        shouldPrevent = this.#moveFocus(shiftKey ? "previous" : "next");
+        break;
       case "End":
         newIndex = -1;
         break;
@@ -175,13 +179,16 @@ var RovingTabIndex = class _RovingTabIndex {
       default: {
         target = this.#focusablesByFirstChar.get(key.toUpperCase()) ?? [];
         const foundIndex = target.findIndex(
-          (focusable2) => current.indexOf(focusable2) > currentIndex
+          (focusable) => current.indexOf(focusable) > currentIndex
         );
         newIndex = foundIndex >= 0 ? foundIndex : 0;
       }
     }
-    const focusable = target.at(newIndex);
-    focusable && focusElement(focusable);
+    shouldPrevent && event.preventDefault();
+    if (key !== "Tab") {
+      const focusable = target.at(newIndex);
+      focusable && focusElement(focusable);
+    }
   };
   #update(active) {
     const current = new Set(this.#getFocusables());
@@ -254,13 +261,24 @@ var RovingTabIndex = class _RovingTabIndex {
       skipVisibilityCheck: true
     });
   }
+  #moveFocus(direction) {
+    const options = {
+      composed: true
+    };
+    const focusable = direction === "previous" ? getPreviousFocusable(document.body, options) : getNextFocusable(document.body, options);
+    if (focusable) {
+      focusElement(focusable);
+      return true;
+    }
+    return false;
+  }
 };
 /**
  * Roving Tabindex
  * Lightweight roving tabindex utility with fully focus management.
  * Designed for accessible menus, tabs, toolbars, and composite widgets.
  *
- * @version 3.0.18
+ * @version 3.1.0
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane

package/package.json CHANGED Viewed

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