Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
enjoythelive1 opened this issue Aug 22, 2023 · 1 comment · May be fixed by #1235
Open

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

enjoythelive1 opened this issue Aug 22, 2023 · 1 comment · May be fixed by #1235
Labels
bug Something isn't working needs assessment This needs to be looked at by a team member

Comments

@enjoythelive1
Copy link

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.

@enjoythelive1 enjoythelive1 added bug Something isn't working needs assessment This needs to be looked at by a team member labels Aug 22, 2023
@welingtonms
Copy link

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.

@mattclough1 mattclough1 linked a pull request Sep 24, 2024 that will close this issue
2 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working needs assessment This needs to be looked at by a team member
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants