User Events: keyboard does not target focused element with shadow dom

[enjoythelive1]

Reproduction example

https://codesandbox.io/s/trusting-panka-gvg259

Prerequisites

1. Render an element with an open shadow dom
2. Focus said element
3. Use keyboard to trigger keys

Expected behavior

The focused element should register the keyboard events

Actual behavior

The element does not register the keyboard events

User-event version

^14.4.3

Environment

Testing Library framework: @testing-library/[email protected] JS framework: [email protected] Test environment: [email protected] DOM implementation: [email protected]

Additional context

I identified that the issue is that when getActiveElement gets an element with shadowDom, it gets the active element of the shadowDom. But, the element with shadow dom could be the active one, even if no shadow children are active (tabindex). Then it returns null, instead of returning the element.

[welingtonms]

Exact same issue here.

I'm implementing a radio-group web component based on W3C's ARIA Authoring Practices Guide (APG) and, when the user is interacting with the radio buttons in the group, although there is a visual indicator for the [virtually] focused element, the focus is actually in the radio-group.

In this case, the getActiveElement is reproducing the same behavior @enjoythelive1 reported: it finds the ragio-group component via document.activeElement correctly, but then it proceeds to getActiveElement(activeElement.shadowRoot), which ends up returning null and mistakenly using the body element to emit the keyboard event.