allow keyboard events on shadow root hosts

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 activeShadowRootElement = getActiveElement(activeElement.shadowRoot)
+    if (activeShadowRootElement) {
+      return activeShadowRootElement
     }
-
-    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

@@ -163,3 +163,30 @@ test('disabling activeElement moves action to HTMLBodyElement', async () => {
     body - keyup: c
   `)
 })
+
+test('typing on focused element with shadow root', async () => {
+  const keypressHandler = mocks.fn()
+  class CustomElement extends HTMLElement {
+    constructor() {
+      super()
+
+      this.attachShadow({mode: 'open'})
+      this.addEventListener('keypress', keypressHandler)
+    }
+  }
+
+  customElements.define('custom-element', CustomElement)
+
+  const {element, user} = setup(
+    '<custom-element tabindex="0"></custom-element>',
+  )
+
+  // Tab to body
+  await user.tab()
+  // Tab to custom element
+  await user.tab()
+  expect(element).toHaveFocus()
+
+  await user.keyboard('[Space]')
+  expect(keypressHandler).toHaveBeenCalled()
+})