@y14e/tabs 1.5.1 → 1.5.2

package/dist/index.cjs

@@ -165,6 +165,7 @@ function getFocusables(container = document.body, options = {}) {
     composed = false,
     filter,
     include,
+    skipNegativeTabIndexCheck = false,
     skipVisibilityCheck = false
   } = options;
   if (typeof composed !== "boolean") {
@@ -183,6 +184,10 @@ function getFocusables(container = document.body, options = {}) {
     );
     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;
@@ -191,7 +196,10 @@ function getFocusables(container = document.body, options = {}) {
   if (composed || include) {
     let traverse2 = function(node) {
       if (node instanceof Element) {
-        if (isFocusable(node, { skipVisibilityCheck }) || include?.(node)) {
+        if (isFocusable(node, {
+          skipNegativeTabIndexCheck,
+          skipVisibilityCheck
+        }) || include?.(node)) {
           elements[elements.length] = node;
         }
       }
@@ -212,7 +220,10 @@ function getFocusables(container = document.body, options = {}) {
       if (!(candidate instanceof Element)) {
         continue;
       }
-      if (isFocusable(candidate, { skipVisibilityCheck })) {
+      if (isFocusable(candidate, {
+        skipNegativeTabIndexCheck,
+        skipVisibilityCheck
+      })) {
         elements[elements.length] = candidate;
       }
     }
@@ -225,7 +236,11 @@ function isFocusable(element, options = {}) {
     console.warn("Invalid element");
     return false;
   }
-  let { skipVisibilityCheck = false } = options;
+  let { skipNegativeTabIndexCheck = false, skipVisibilityCheck = false } = options;
+  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;
@@ -233,10 +248,12 @@ function isFocusable(element, options = {}) {
   if (element.hasAttribute("hidden") || isInert(element)) {
     return false;
   }
-  if (getTabIndex(element) < 0) {
+  if (!skipNegativeTabIndexCheck && getTabIndex(element) < 0) {
     return false;
   }
-  if (!element.matches(FOCUSABLE_SELECTOR)) {
+  if (!element.matches(
+    skipNegativeTabIndexCheck ? FOCUSABLE_SELECTOR.replace(/(,\s*)?\[tabindex="-1"\]/g, "") : FOCUSABLE_SELECTOR
+  )) {
     return false;
   }
   if (isDisabledDeep(element)) {
@@ -386,7 +403,6 @@ function createRovingTabIndex(container, options = {}) {
     direction,
     navigationOnly = false,
     selector,
-    skipVisibilityCheck = false,
     typeahead = false,
     wrap = false
   } = options;
@@ -404,10 +420,6 @@ function createRovingTabIndex(container, options = {}) {
     );
     selector = void 0;
   }
-  if (typeof skipVisibilityCheck !== "boolean") {
-    console.warn("Invalid skipVisibilityCheck option. Fallback: false.");
-    skipVisibilityCheck = false;
-  }
   if (typeof typeahead !== "boolean") {
     console.warn("Invalid typeahead option. Fallback: false.");
     typeahead = false;
@@ -420,7 +432,6 @@ function createRovingTabIndex(container, options = {}) {
     direction,
     navigationOnly,
     selector,
-    skipVisibilityCheck,
     typeahead,
     wrap
   });
@@ -534,7 +545,7 @@ var RovingTabIndex = class {
       ...getFocusables(this.#container, {
         composed: true,
         filter: this.#selectorFilter,
-        skipVisibilityCheck: !!this.#options.skipVisibilityCheck
+        skipNegativeTabIndexCheck: !this.#options.navigationOnly
       })
     ]);
     for (const focusable of this.#focusables) {
@@ -600,8 +611,7 @@ var RovingTabIndex = class {
     return getFocusables(this.#container, {
       composed: true,
       filter: this.#selectorFilter,
-      include: (element) => this.#focusables.has(element),
-      skipVisibilityCheck: !!this.#options.skipVisibilityCheck
+      skipNegativeTabIndexCheck: !this.#options.navigationOnly
     });
   }
 };
@@ -969,7 +979,6 @@ var Tabs = class _Tabs {
         createRovingTabIndex(list, {
           direction: list.ariaOrientation === "undefined" ? void 0 : this.#settings.vertical ? "vertical" : "horizontal",
           selector: this.#settings.selector.tab,
-          skipVisibilityCheck: true,
           wrap: true
         })
       );
@@ -1176,7 +1185,7 @@ function isFocusable2(element) {
    * Lightweight roving tabindex utility with fully focus management.
    * Designed for accessible menus, tabs, toolbars, and composite widgets.
    *
-   * @version 1.3.2
+   * @version 2.0.0
    * @author Yusuke Kamiyamane
    * @license MIT
    * @copyright Copyright (c) Yusuke Kamiyamane
@@ -1201,7 +1210,7 @@ function isFocusable2(element) {
      * High-precision focus management utility with full composed tree support.
      * Handles complex focus rules including tabindex ordering, radio groups, inert.
      *
-     * @version 4.2.1
+     * @version 4.3.0
      * @author Yusuke Kamiyamane
      * @license MIT
      * @copyright Copyright (c) Yusuke Kamiyamane

package/dist/index.js

@@ -163,6 +163,7 @@ function getFocusables(container = document.body, options = {}) {
     composed = false,
     filter,
     include,
+    skipNegativeTabIndexCheck = false,
     skipVisibilityCheck = false
   } = options;
   if (typeof composed !== "boolean") {
@@ -181,6 +182,10 @@ function getFocusables(container = document.body, options = {}) {
     );
     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;
@@ -189,7 +194,10 @@ function getFocusables(container = document.body, options = {}) {
   if (composed || include) {
     let traverse2 = function(node) {
       if (node instanceof Element) {
-        if (isFocusable(node, { skipVisibilityCheck }) || include?.(node)) {
+        if (isFocusable(node, {
+          skipNegativeTabIndexCheck,
+          skipVisibilityCheck
+        }) || include?.(node)) {
           elements[elements.length] = node;
         }
       }
@@ -210,7 +218,10 @@ function getFocusables(container = document.body, options = {}) {
       if (!(candidate instanceof Element)) {
         continue;
       }
-      if (isFocusable(candidate, { skipVisibilityCheck })) {
+      if (isFocusable(candidate, {
+        skipNegativeTabIndexCheck,
+        skipVisibilityCheck
+      })) {
         elements[elements.length] = candidate;
       }
     }
@@ -223,7 +234,11 @@ function isFocusable(element, options = {}) {
     console.warn("Invalid element");
     return false;
   }
-  let { skipVisibilityCheck = false } = options;
+  let { skipNegativeTabIndexCheck = false, skipVisibilityCheck = false } = options;
+  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;
@@ -231,10 +246,12 @@ function isFocusable(element, options = {}) {
   if (element.hasAttribute("hidden") || isInert(element)) {
     return false;
   }
-  if (getTabIndex(element) < 0) {
+  if (!skipNegativeTabIndexCheck && getTabIndex(element) < 0) {
     return false;
   }
-  if (!element.matches(FOCUSABLE_SELECTOR)) {
+  if (!element.matches(
+    skipNegativeTabIndexCheck ? FOCUSABLE_SELECTOR.replace(/(,\s*)?\[tabindex="-1"\]/g, "") : FOCUSABLE_SELECTOR
+  )) {
     return false;
   }
   if (isDisabledDeep(element)) {
@@ -384,7 +401,6 @@ function createRovingTabIndex(container, options = {}) {
     direction,
     navigationOnly = false,
     selector,
-    skipVisibilityCheck = false,
     typeahead = false,
     wrap = false
   } = options;
@@ -402,10 +418,6 @@ function createRovingTabIndex(container, options = {}) {
     );
     selector = void 0;
   }
-  if (typeof skipVisibilityCheck !== "boolean") {
-    console.warn("Invalid skipVisibilityCheck option. Fallback: false.");
-    skipVisibilityCheck = false;
-  }
   if (typeof typeahead !== "boolean") {
     console.warn("Invalid typeahead option. Fallback: false.");
     typeahead = false;
@@ -418,7 +430,6 @@ function createRovingTabIndex(container, options = {}) {
     direction,
     navigationOnly,
     selector,
-    skipVisibilityCheck,
     typeahead,
     wrap
   });
@@ -532,7 +543,7 @@ var RovingTabIndex = class {
       ...getFocusables(this.#container, {
         composed: true,
         filter: this.#selectorFilter,
-        skipVisibilityCheck: !!this.#options.skipVisibilityCheck
+        skipNegativeTabIndexCheck: !this.#options.navigationOnly
       })
     ]);
     for (const focusable of this.#focusables) {
@@ -598,8 +609,7 @@ var RovingTabIndex = class {
     return getFocusables(this.#container, {
       composed: true,
       filter: this.#selectorFilter,
-      include: (element) => this.#focusables.has(element),
-      skipVisibilityCheck: !!this.#options.skipVisibilityCheck
+      skipNegativeTabIndexCheck: !this.#options.navigationOnly
     });
   }
 };
@@ -967,7 +977,6 @@ var Tabs = class _Tabs {
         createRovingTabIndex(list, {
           direction: list.ariaOrientation === "undefined" ? void 0 : this.#settings.vertical ? "vertical" : "horizontal",
           selector: this.#settings.selector.tab,
-          skipVisibilityCheck: true,
           wrap: true
         })
       );
@@ -1174,7 +1183,7 @@ function isFocusable2(element) {
    * Lightweight roving tabindex utility with fully focus management.
    * Designed for accessible menus, tabs, toolbars, and composite widgets.
    *
-   * @version 1.3.2
+   * @version 2.0.0
    * @author Yusuke Kamiyamane
    * @license MIT
    * @copyright Copyright (c) Yusuke Kamiyamane
@@ -1199,7 +1208,7 @@ function isFocusable2(element) {
      * High-precision focus management utility with full composed tree support.
      * Handles complex focus rules including tabindex ordering, radio groups, inert.
      *
-     * @version 4.2.1
+     * @version 4.3.0
      * @author Yusuke Kamiyamane
      * @license MIT
      * @copyright Copyright (c) Yusuke Kamiyamane

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@y14e/tabs",
-  "version": "1.5.1",
+  "version": "1.5.2",
   "description": "WAI-ARIA compliant tabs pattern implementation in TypeScript",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -44,7 +44,7 @@
   "devDependencies": {
     "@y14e/attributes-utils": "^1.0.5",
     "@y14e/button": "^1.0.0",
-    "@y14e/roving-tabindex": "^1.3.2",
+    "@y14e/roving-tabindex": "^2.0.0",
     "bun-types": "latest",
     "tsup": "^8.0.0",
     "typescript": "^5.6.0",