Merge pull request #24 from wayfair-incubator/vpodk-focusable-elements

Updated focusable elements list
wayfair-incubator · Mar 3, 2022 · 95e01ef · 95e01ef
2 parents b03c2a9 + de26db7
commit 95e01ef
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 4 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-focus-bounder",
-  "version": "1.1.4",
+  "version": "1.1.5",
   "description": "Focus looping component based on focus bounders.",
   "homepage": "https://github.com/wayfair-incubator/react-focus-bounder",
   "repository": "github:wayfair-incubator/react-focus-bounder",

diff --git a/src/index.tsx b/src/index.tsx
@@ -13,7 +13,12 @@ const BOUNDER_LINK_CLASS_NAME = "FocusBounder-link";
  * @see https://developer.mozilla.org/en-US/docs/Web/CSS/:not
  */
 const FOCUSABLE_ELEMENTS_SELECTORS = [
-  `a:not(.${BOUNDER_LINK_CLASS_NAME}):not([disabled])`,
+  // Links must have `href` attribute to be focusable.
+  `a[href]:not(.${BOUNDER_LINK_CLASS_NAME}):not([disabled])`,
+  // All items with `tabIndex` are focusable but must be >=0
+  "[tabindex]:not([tabindex=-1]):not([disabled])",
+  "[contenteditable]",
+  // Form elements:
   "button:not([disabled]), input:not([disabled])",
   "select:not([disabled]), textarea:not([disabled])",
 ];