power-focusable 4.2.1 → 4.3.1

package/README.md

@@ -39,6 +39,7 @@ interface PowerFocusableOptions {
   composed?: boolean;                      // default: false
   filter?: (element: Element) => boolean;
   include?: (element: Element) => boolean;
+  skipNegativeTabIndexCheck?: boolean;     // default: false
   skipVisibilityCheck?: boolean;           // default: false
   wrap?: boolean;                          // default: false
 }
@@ -72,9 +73,15 @@ The function should return `true` to include the element, or `false` to ignore i
 
 Used by `getFocusables`, `getNextFocusable`, `getPreviousFocusable`, and `hasFocusable`.
 
+### `skipNegativeTabIndexCheck`
+
+If `true`, skips the negative `tabindex` check when determining focusability.
+
+Used by `getFocusables`, `getNextFocusable`, `getPreviousFocusable`, `hasFocusable`, and `isFocusable`.
+
 ### `skipVisibilityCheck`
 
-If `true`, skips `checkVisibility()` when determining focusability. Useful for initializing.
+If `true`, skips `checkVisibility()` when determining focusability.
 
 Used by `getFocusables`, `getNextFocusable`, `getPreviousFocusable`, `hasFocusable`, and `isFocusable`.
 
@@ -114,7 +121,7 @@ getFocusables(container, { composed: true });
 getFocusables(container, { filter: (element) => !element.matches('[data-skip-focus]') });
 
 // Uses custom include function
-getFocusables(container, { filter: (element) => element.matches('[data-roving-tabindex]') });
+getFocusables(container, { filter: (element) => element.matches('[data-force-focusable]') });
 ```
 
 ### `getNextFocusable`
@@ -137,7 +144,7 @@ getNextFocusable(container, { composed: true });
 getNextFocusable(container, { filter: (element) => !element.matches('[data-skip-focus]') });
 
 // Uses custom include function
-getNextFocusable(container, { filter: (element) => element.matches('[data-roving-tabindex]') });
+getNextFocusable(container, { filter: (element) => element.matches('[data-force-focusable]') });
 
 // Wraps around to the first element when reaching the end
 getNextFocusable(container, { wrap: true });
@@ -163,7 +170,7 @@ getPreviousFocusable(container, { composed: true });
 getPreviousFocusable(container, { filter: (element) => !element.matches('[data-skip-focus]') });
 
 // Uses custom include function
-getPreviousFocusable(container, { filter: (element) => element.matches('[data-roving-tabindex]') });
+getPreviousFocusable(container, { filter: (element) => element.matches('[data-force-focusable]') });
 
 // Wraps around to the last element when reaching the end
 getPreviousFocusable(container, { wrap: true });
@@ -187,7 +194,7 @@ hasFocusable(container, { composed: true });
 hasFocusable(container, { filter: (element) => !element.matches('[data-skip-focus]') });
 
 // Uses custom include function
-hasFocusable(container, { filter: (element) => element.matches('[data-roving-tabindex]') });
+hasFocusable(container, { filter: (element) => element.matches('[data-force-focusable]') });
 ```
 
 ### `inertOutside`

package/dist/index.cjs

@@ -48,6 +48,7 @@ function getFocusables(container = document.body, options = {}) {
     composed = false,
     filter,
     include,
+    skipNegativeTabIndexCheck = false,
     skipVisibilityCheck = false
   } = options;
   if (typeof composed !== "boolean") {
@@ -66,6 +67,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;
@@ -74,7 +79,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;
         }
       }
@@ -95,7 +103,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;
       }
     }
@@ -146,7 +157,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;
@@ -154,10 +169,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)) {
@@ -182,6 +199,7 @@ function getRelativeFocusable(container, offset, options) {
     composed = false,
     filter,
     include,
+    skipNegativeTabIndexCheck = false,
     skipVisibilityCheck = false,
     wrap = false
   } = options;
@@ -215,6 +233,10 @@ function getRelativeFocusable(container, offset, 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;
@@ -223,12 +245,14 @@ function getRelativeFocusable(container, offset, options) {
     console.warn("Invalid wrap option. Fallback: false.");
     wrap = false;
   }
-  const focusables = getFocusables(container, {
-    composed,
-    filter,
-    include,
-    skipVisibilityCheck
-  });
+  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;
@@ -459,7 +483,7 @@ function isUngroupedRadio(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.1
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane

package/dist/index.d.cts

@@ -3,7 +3,7 @@
  * 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.1
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane
@@ -12,8 +12,9 @@
 interface PowerFocusableOptions {
     readonly anchor?: Element | null;
     readonly composed?: boolean;
-    readonly filter?: ((element: Element) => boolean) | undefined;
-    readonly include?: ((element: Element) => boolean) | undefined;
+    readonly filter?: (element: Element) => boolean;
+    readonly include?: (element: Element) => boolean;
+    readonly skipNegativeTabIndexCheck?: boolean;
     readonly skipVisibilityCheck?: boolean;
     readonly wrap?: boolean;
 }
@@ -24,6 +25,7 @@ declare function getPreviousFocusable(container?: Element, options?: PowerFocusa
 declare function hasFocusable(container?: Element, options?: Omit<PowerFocusableOptions, 'anchor' | 'wrap'>): boolean;
 declare function inertOutside(element: Element): () => void;
 declare function isFocusable(element: Element, options?: {
+    skipNegativeTabIndexCheck?: boolean;
     skipVisibilityCheck?: boolean;
 }): boolean;
 

package/dist/index.d.ts

@@ -3,7 +3,7 @@
  * 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.1
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane
@@ -12,8 +12,9 @@
 interface PowerFocusableOptions {
     readonly anchor?: Element | null;
     readonly composed?: boolean;
-    readonly filter?: ((element: Element) => boolean) | undefined;
-    readonly include?: ((element: Element) => boolean) | undefined;
+    readonly filter?: (element: Element) => boolean;
+    readonly include?: (element: Element) => boolean;
+    readonly skipNegativeTabIndexCheck?: boolean;
     readonly skipVisibilityCheck?: boolean;
     readonly wrap?: boolean;
 }
@@ -24,6 +25,7 @@ declare function getPreviousFocusable(container?: Element, options?: PowerFocusa
 declare function hasFocusable(container?: Element, options?: Omit<PowerFocusableOptions, 'anchor' | 'wrap'>): boolean;
 declare function inertOutside(element: Element): () => void;
 declare function isFocusable(element: Element, options?: {
+    skipNegativeTabIndexCheck?: boolean;
     skipVisibilityCheck?: boolean;
 }): boolean;
 

package/dist/index.js

@@ -46,6 +46,7 @@ function getFocusables(container = document.body, options = {}) {
     composed = false,
     filter,
     include,
+    skipNegativeTabIndexCheck = false,
     skipVisibilityCheck = false
   } = options;
   if (typeof composed !== "boolean") {
@@ -64,6 +65,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;
@@ -72,7 +77,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;
         }
       }
@@ -93,7 +101,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;
       }
     }
@@ -144,7 +155,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;
@@ -152,10 +167,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)) {
@@ -180,6 +197,7 @@ function getRelativeFocusable(container, offset, options) {
     composed = false,
     filter,
     include,
+    skipNegativeTabIndexCheck = false,
     skipVisibilityCheck = false,
     wrap = false
   } = options;
@@ -213,6 +231,10 @@ function getRelativeFocusable(container, offset, 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;
@@ -221,12 +243,14 @@ function getRelativeFocusable(container, offset, options) {
     console.warn("Invalid wrap option. Fallback: false.");
     wrap = false;
   }
-  const focusables = getFocusables(container, {
-    composed,
-    filter,
-    include,
-    skipVisibilityCheck
-  });
+  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;
@@ -457,7 +481,7 @@ function isUngroupedRadio(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.1
  * @author Yusuke Kamiyamane
  * @license MIT
  * @copyright Copyright (c) Yusuke Kamiyamane

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "power-focusable",
-  "version": "4.2.1",
+  "version": "4.3.1",
   "description": "High-precision focus management utility with full composed tree support",
   "type": "module",
   "main": "./dist/index.cjs",