feat(keyboard): support shadow DOM in tab order

src/clipboard/copy.ts

@@ -1,10 +1,10 @@
 import {copySelection} from '../document'
 import type {Instance} from '../setup'
-import {writeDataTransferToClipboard} from '../utils'
+import {getActiveElementOrBody, writeDataTransferToClipboard} from '../utils'
 
 export async function copy(this: Instance) {
   const doc = this.config.document
-  const target = doc.activeElement ?? /* istanbul ignore next */ doc.body
+  const target = getActiveElementOrBody(doc)
 
   const clipboardData = copySelection(target)
 

src/clipboard/cut.ts

@@ -1,10 +1,10 @@
 import {copySelection} from '../document'
 import type {Instance} from '../setup'
-import {writeDataTransferToClipboard} from '../utils'
+import {getActiveElementOrBody, writeDataTransferToClipboard} from '../utils'
 
 export async function cut(this: Instance) {
   const doc = this.config.document
-  const target = doc.activeElement ?? /* istanbul ignore next */ doc.body
+  const target = getActiveElementOrBody(doc)
 
   const clipboardData = copySelection(target)
 

src/clipboard/paste.ts

@@ -1,6 +1,7 @@
 import type {Instance} from '../setup'
 import {
   createDataTransfer,
+  getActiveElementOrBody,
   getWindow,
   readDataTransferFromClipboard,
 } from '../utils'
@@ -10,7 +11,7 @@ export async function paste(
   clipboardData?: DataTransfer | string,
 ) {
   const doc = this.config.document
-  const target = doc.activeElement ?? /* istanbul ignore next */ doc.body
+  const target = getActiveElementOrBody(doc)
 
   const dataTransfer: DataTransfer =
     (typeof clipboardData === 'string'

src/event/behavior/click.ts

@@ -8,7 +8,7 @@ behavior.click = (event, target, instance) => {
   if (control) {
     return () => {
       if (isFocusable(control)) {
-        focusElement(control)
+        focusElement(control, true)
       }
       instance.dispatchEvent(control, cloneEvent(event))
     }

src/event/behavior/keydown.ts

@@ -1,9 +1,8 @@
 /* eslint-disable @typescript-eslint/no-use-before-define */
 
-import {getUIValue, setUISelection, getValueOrTextContent} from '../../document'
+import {getUIValue, getValueOrTextContent} from '../../document'
 import {
   getTabDestination,
-  hasOwnSelection,
   isContentEditable,
   isEditable,
   isElementType,
@@ -106,13 +105,7 @@ const keydownBehavior: {
         target,
         instance.system.keyboard.modifiers.Shift,
       )
-      focusElement(dest)
-      if (hasOwnSelection(dest)) {
-        setUISelection(dest, {
-          anchorOffset: 0,
-          focusOffset: dest.value.length,
-        })
-      }
+      focusElement(dest, true)
     }
   },
 }

src/event/focus.ts

@@ -1,30 +1,72 @@
-import {findClosest, getActiveElement, isFocusable} from '../utils'
+import {setUISelection} from '../document'
+import {
+  delegatesFocus,
+  findClosest,
+  findFocusable,
+  getActiveElementOrBody,
+  hasOwnSelection,
+  isFocusable,
+  isFocusTarget,
+} from '../utils'
 import {updateSelectionOnFocus} from './selection'
 import {wrapEvent} from './wrapEvent'
 
 /**
  * Focus closest focusable element.
  */
-export function focusElement(element: Element) {
-  const target = findClosest(element, isFocusable)
+export function focusElement(element: Element, select: boolean = false) {
+  const target = findClosest(element, isFocusTarget)
 
-  const activeElement = getActiveElement(element.ownerDocument)
+  const activeElement = getActiveElementOrBody(element.ownerDocument)
   if ((target ?? element.ownerDocument.body) === activeElement) {
     return
-  } else if (target) {
-    wrapEvent(() => target.focus(), element)
+  }
+
+  if (target) {
+    if (delegatesFocus(target)) {
+      const effectiveTarget = findFocusable(target.shadowRoot)
+      if (effectiveTarget) {
+        doFocus(effectiveTarget, true, element)
+      } else {
+        // This is not consistent across browsers if there is a focusable ancestor.
+        // Firefox falls back to the closest focusable ancestor
+        // of the shadow host as if `delegatesFocus` was `false`.
+        // Chrome falls back to `document.body`.
+        // We follow the minimal implementation of Chrome.
+        doBlur(activeElement, element)
+      }
+    } else {
+      doFocus(target, select, element)
+    }
   } else {
-    wrapEvent(() => (activeElement as HTMLElement | null)?.blur(), element)
+    doBlur(activeElement, element)
   }
+}
+
+function doBlur(target: Element, source: Element) {
+  wrapEvent(() => (target as HTMLElement | null)?.blur(), source)
+}
+
+function doFocus(target: HTMLElement, select: boolean, source: Element) {
+  wrapEvent(() => target.focus(), source)
 
-  updateSelectionOnFocus(target ?? element.ownerDocument.body)
+  if (hasOwnSelection(target)) {
+    if (select) {
+      setUISelection(target, {
+        anchorOffset: 0,
+        focusOffset: target.value.length,
+      })
+    }
+
+    updateSelectionOnFocus(target)
+  }
 }
 
 export function blurElement(element: Element) {
   if (!isFocusable(element)) return
 
-  const wasActive = getActiveElement(element.ownerDocument) === element
+  const wasActive = getActiveElementOrBody(element.ownerDocument) === element
   if (!wasActive) return
 
-  wrapEvent(() => element.blur(), element)
+  doBlur(element, element)
 }

src/event/selection/updateSelectionOnFocus.ts

@@ -1,10 +1,10 @@
-import {getContentEditable, hasOwnSelection} from '../../utils'
+import {EditableInputOrTextarea, getContentEditable} from '../../utils'
 
 /**
  * Reset the Document Selection when moving focus into an element
  * with own selection implementation.
  */
-export function updateSelectionOnFocus(element: Element) {
+export function updateSelectionOnFocus(element: EditableInputOrTextarea) {
   const selection = element.ownerDocument.getSelection()
 
   /* istanbul ignore if */
@@ -19,18 +19,16 @@ export function updateSelectionOnFocus(element: Element) {
   // 2) other selections will be replaced by a cursor
   //  2.a) at the start of the first child if it is a text node
   //  2.b) at the start of the contenteditable.
-  if (hasOwnSelection(element)) {
-    const contenteditable = getContentEditable(selection.focusNode)
-    if (contenteditable) {
-      if (!selection.isCollapsed) {
-        const focusNode =
-          contenteditable.firstChild?.nodeType === 3
-            ? contenteditable.firstChild
-            : contenteditable
-        selection.setBaseAndExtent(focusNode, 0, focusNode, 0)
-      }
-    } else {
-      selection.setBaseAndExtent(element, 0, element, 0)
+  const contenteditable = getContentEditable(selection.focusNode)
+  if (contenteditable) {
+    if (!selection.isCollapsed) {
+      const focusNode =
+        contenteditable.firstChild?.nodeType === 3
+          ? contenteditable.firstChild
+          : contenteditable
+      selection.setBaseAndExtent(focusNode, 0, focusNode, 0)
     }
+  } else {
+    selection.setBaseAndExtent(element, 0, element, 0)
   }
 }

src/utils/focus/focusable.ts

@@ -0,0 +1,85 @@
+/**
+ * CSS selector to query focusable elements.
+ *
+ * This does not eliminate the following elements which are not focusable:
+ *  - Custom elements with `tabindex` or `contenteditable` attribute
+ *  - Shadow hosts with `delegatesFocus: true`
+ */
+export const FOCUSABLE_SELECTOR = [
+  'input:not([type=hidden]):not([disabled])',
+  'button:not([disabled])',
+  'select:not([disabled])',
+  'textarea:not([disabled])',
+  '[contenteditable=""]',
+  '[contenteditable="true"]',
+  'a[href]',
+  '[tabindex]:not([disabled])',
+].join(', ')
+
+/**
+ * Determine if an element can be the target for `focusElement()`.
+ *
+ * This does not necessarily mean that this element will be the `activeElement`,
+ * as it might delegate focus into a shadow tree.
+ */
+export function isFocusTarget(element: Element): element is HTMLElement {
+  if (element.tagName.includes('-')) {
+    // custom elements without `delegatesFocus` are ignored
+    return delegatesFocus(element)
+  }
+  // elements without `delegatesFocus` behave normal even if they're a shadow host
+  return delegatesFocus(element) || element.matches(FOCUSABLE_SELECTOR)
+}
+
+export function isFocusable(element: Element): element is HTMLElement {
+  return (
+    !element.tagName.includes('-') &&
+    !delegatesFocus(element) &&
+    element.matches(FOCUSABLE_SELECTOR)
+  )
+}
+
+export function delegatesFocus(
+  element: Element,
+): element is HTMLElement & {shadowRoot: ShadowRoot & {delegatesFocus: true}} {
+  // `delegatesFocus` is missing in Jsdom
+  // see https://github.com/jsdom/jsdom/issues/3418
+  // We'll treat `undefined` as `true`
+  return (
+    !!element.shadowRoot &&
+    (element.shadowRoot.delegatesFocus as boolean | undefined) !== false
+  )
+}
+
+/**
+ * Find the first focusable element in a DOM tree.
+ */
+export function findFocusable(
+  element: Element | ShadowRoot,
+): HTMLElement | undefined {
+  for (const el of Array.from(element.querySelectorAll('*'))) {
+    if (isFocusable(el)) {
+      return el
+    } else if (el.shadowRoot) {
+      const f = findFocusable(el.shadowRoot)
+      if (f) {
+        return f
+      }
+    }
+  }
+}
+
+/**
+ * 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
+}

src/utils/focus/getActiveElement.ts

@@ -1,8 +1,6 @@
 import {isDisabled} from '../misc/isDisabled'
 
-export function getActiveElement(
-  document: Document | ShadowRoot,
-): Element | null {
+function getActiveElement(document: Document | ShadowRoot): Element | null {
   const activeElement = document.activeElement
 
   if (activeElement?.shadowRoot) {

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 './selector'
+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 =>

src/utils/index.ts

@@ -14,9 +14,8 @@ export * from './edit/setFiles'
 export * from './focus/cursor'
 export * from './focus/getActiveElement'
 export * from './focus/getTabDestination'
-export * from './focus/isFocusable'
+export * from './focus/focusable'
 export * from './focus/selection'
-export * from './focus/selector'
 
 export * from './keyDef/readNextDescriptor'
 

tests/_helpers/elements/hello-world.ts

@@ -0,0 +1,9 @@
+export class HelloWorld extends HTMLElement {
+  constructor() {
+    super()
+    this.attachShadow({
+      mode: 'open',
+      delegatesFocus: this.hasAttribute('delegates'),
+    }).innerHTML = `<p>Hello, World!</p>`
+  }
+}

tests/_helpers/elements/index.ts

@@ -0,0 +1,25 @@
+import {HelloWorld} from './hello-world'
+import {ShadowInput} from './shadow-input'
+import {ShadowHost} from './shadow-host'
+
+const customElements = {
+  'hello-world': HelloWorld,
+  'shadow-input': ShadowInput,
+  'shadow-host': ShadowHost,
+}
+
+export type CustomElements = {
+  [k in keyof typeof customElements]: typeof customElements[k] extends {
+    new (): infer T
+  }
+    ? T
+    : never
+}
+
+export function registerCustomElements() {
+  Object.entries(customElements).forEach(([name, constructor]) => {
+    if (!globalThis.customElements.get(name)) {
+      globalThis.customElements.define(name, constructor)
+    }
+  })
+}

tests/_helpers/elements/shadow-host.ts

@@ -0,0 +1,10 @@
+export class ShadowHost extends HTMLElement {
+  constructor() {
+    super()
+
+    this.attachShadow({
+      mode: 'open',
+      delegatesFocus: true,
+    }).innerHTML = String(this.getAttribute('innerHTML'))
+  }
+}