fix(navigation): ignore disabled focusable elements (#6738)

* fix(navigation): ignore disabled focusable elements * refactor(FloatingMenu): remove Array.find calls Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Aug 31, 2020 · d89ffc5 · d89ffc5
1 parent bbbb150
commit d89ffc5
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 5 deletions.
diff --git a/packages/react/src/internal/FloatingMenu.js b/packages/react/src/internal/FloatingMenu.js
@@ -336,10 +336,8 @@ class FloatingMenu extends React.Component {
     const primaryFocusNode = menuBody.querySelector(
       this.props.selectorPrimaryFocus || null
     );
-    const tabbableNodes = menuBody.querySelectorAll(selectorTabbable);
-    const focusableNodes = menuBody.querySelectorAll(selectorFocusable);
-    const tabbableNode = [...tabbableNodes].find((node) => !node.disabled);
-    const focusableNode = [...focusableNodes].find((node) => !node.disabled);
+    const tabbableNode = menuBody.querySelector(selectorTabbable);
+    const focusableNode = menuBody.querySelector(selectorFocusable);
     const focusTarget =
       primaryFocusNode || // User defined focusable node
       tabbableNode || // First sequentially focusable node

diff --git a/packages/react/src/internal/keyboard/navigation.js b/packages/react/src/internal/keyboard/navigation.js
@@ -68,5 +68,5 @@ export const selectorFocusable = `
   a[href], area[href], input:not([disabled]),
   button:not([disabled]),select:not([disabled]),
   textarea:not([disabled]),
-  iframe, object, embed, *[tabindex], *[contenteditable=true]
+  iframe, object, embed, *[tabindex]:not([disabled]), *[contenteditable=true]
 `;