Improve detection of focusable elements

callbacksystems · Nov 5, 2023 · 12138f7 · 12138f7
1 parent dc05473
commit 12138f7
Showing 1 changed file with 4 additions and 9 deletions.
diff --git a/src/index.js b/src/index.js
@@ -78,9 +78,7 @@ export class FocusTrap {
   }
 
   get tabbableElements() {
-    return Array.from(this.element.querySelectorAll("*")).filter((element) => {
-      return element.tabIndex >= 0 && !element.inert && !element.disabled && visible(element)
-    })
+    return Array.from(this.element.querySelectorAll("*")).filter(elementIsFocusable)
   }
 
   get firstTabbableElement() {
@@ -92,10 +90,7 @@ export class FocusTrap {
   }
 }
 
-function visible(element) {
-  return (
-    !(element.hidden || element.closest("[hidden]")) &&
-    (!element.type || element.type !== "hidden") &&
-    (element.offsetWidth > 0 || element.offsetHeight > 0)
-  )
+function elementIsFocusable(element) {
+  const inertDisabledOrHidden = "[inert], :disabled, [hidden], details:not([open]), dialog:not([open])"
+  return !!element && element.closest(inertDisabledOrHidden) == null && element.tabIndex >= 0 && typeof element.focus == "function"
 }