fix: recognize focused shadow root hosts (#1235)

Co-authored-by: Philipp Fritsche <[email protected]>

Author: mattclough1

src/utils/focus/getActiveElement.ts

@@ -6,18 +6,20 @@ export function getActiveElement(
   const activeElement = document.activeElement
 
   if (activeElement?.shadowRoot) {
-    return getActiveElement(activeElement.shadowRoot)
-  } else {
-    // Browser does not yield disabled elements as document.activeElement - jsdom does
-    if (isDisabled(activeElement)) {
-      return document.ownerDocument
-        // TODO: verify behavior in ShadowRoot
-        ? /* istanbul ignore next */ document.ownerDocument.body
-        : document.body
+    const activeElementInShadowTree = getActiveElement(activeElement.shadowRoot)
+    if (activeElementInShadowTree) {
+      return activeElementInShadowTree
     }
-
-    return activeElement
   }
+  // Browser does not yield disabled elements as document.activeElement - jsdom does
+  if (isDisabled(activeElement)) {
+    return document.ownerDocument
+      // TODO: verify behavior in ShadowRoot
+      ? /* istanbul ignore next */ document.ownerDocument.body
+      : document.body
+  }
+
+  return activeElement
 }
 
 export function getActiveElementOrBody(document: Document): Element {

tests/keyboard/index.ts

@@ -165,3 +165,28 @@ test('disabling activeElement moves action to HTMLBodyElement', async () => {
     body - keyup: c
   `)
 })
+
+test('typing on focused element with shadow root', async () => {
+  const {user, eventWasFired} = setup(
+    '<focusable-custom-element></focusable-custom-element>',
+  )
+
+  await user.keyboard('[Space]')
+  expect(eventWasFired('keypress')).toBe(true)
+})
+
+customElements.define(
+  'focusable-custom-element',
+  class FocusableCustomElement extends HTMLElement {
+    constructor() {
+      super()
+      this.attachShadow({mode: 'open'})
+    }
+
+    connectedCallback() {
+      if (!this.hasAttribute('tabindex')) {
+        this.setAttribute('tabindex', '0')
+      }
+    }
+  },
+)