feat(keyboard): support shadow DOM in tab order

testing-library · Aug 19, 2022 · 7756374 · 7756374
1 parent b322220
commit 7756374
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 17 deletions.
diff --git a/src/utils/focus/focusable.ts b/src/utils/focus/focusable.ts
@@ -69,18 +69,17 @@ export function findFocusable(
   }
 }
 
-// TODO: use for tab
-// /**
-//  * Find the all focusable elements in a DOM tree.
-//  */
-// export function findAllFocusable(element: Element | ShadowRoot): HTMLElement[] {
-//   const all: HTMLElement[] = []
-//   for (const el of Array.from(element.querySelectorAll('*'))) {
-//     if (isFocusable(el)) {
-//       all.push(el)
-//     } else if (el.shadowRoot) {
-//       all.push(...findAllFocusable(el.shadowRoot))
-//     }
-//   }
-//   return all
-// }
+/**
+ * Find the all focusable elements in a DOM tree.
+ */
+export function findAllFocusable(element: Element | ShadowRoot): HTMLElement[] {
+  const all: HTMLElement[] = []
+  for (const el of Array.from(element.querySelectorAll('*'))) {
+    if (isFocusable(el)) {
+      all.push(el)
+    } else if (el.shadowRoot) {
+      all.push(...findAllFocusable(el.shadowRoot))
+    }
+  }
+  return all
+}
diff --git a/src/utils/focus/getTabDestination.ts b/src/utils/focus/getTabDestination.ts
@@ -1,11 +1,11 @@
 import {isDisabled} from '../misc/isDisabled'
 import {isElementType} from '../misc/isElementType'
 import {isVisible} from '../misc/isVisible'
-import {FOCUSABLE_SELECTOR} from './focusable'
+import {findAllFocusable} from './focusable'
 
 export function getTabDestination(activeElement: Element, shift: boolean) {
   const document = activeElement.ownerDocument
-  const focusableElements = document.querySelectorAll(FOCUSABLE_SELECTOR)
+  const focusableElements = findAllFocusable(document.body)
 
   const enabledElements = Array.from(focusableElements).filter(
     el =>

diff --git a/tests/utils/focus/getTabDestination.ts b/tests/utils/focus/getTabDestination.ts
@@ -141,3 +141,27 @@ test('skip unchecked radios if group has one checked', () => {
   expect(getTabDestination(elF, false)).toBe(elG)
   expect(getTabDestination(elF, true)).toBe(elE)
 })
+
+test('tab through shadow trees', () => {
+  const {query} = setup(`
+    <input id="a"/>
+    <shadow-host innerHTML='
+      <input id="b"/>
+      <shadow-host innerHTML=&apos;
+        <input id="c"/>
+        <input id="d"/>
+      &apos;></shadow-host>
+      <input id="e"/>
+    '></shadow-host>
+    <input id="f"/>
+  `)
+
+  assertTabOrder([
+    query('#a'),
+    query('shadow-host', '#b'),
+    query('shadow-host', 'shadow-host', '#c'),
+    query('shadow-host', 'shadow-host', '#d'),
+    query('shadow-host', '#e'),
+    query('#f'),
+  ])
+})