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

Popover Invalid Aria Attributes #3349

Open
OlliTapioNieminen opened this issue Jan 24, 2025 · 0 comments
Open

Popover Invalid Aria Attributes #3349

OlliTapioNieminen opened this issue Jan 24, 2025 · 0 comments

Comments

@OlliTapioNieminen
Copy link

Bug report

Current Behavior

The trigger button of the popover currently includes the attributes aria-expanded and aria-controls.

These attributes are incorrect in the context of a popover acting as a modal.
Popovers (in this implementation) behave as modals because they trap focus and prevent interaction with the rest of the UI until dismissed.

Expected behavior

Expect Popover to not implement focus trap, and or to not have aria attributes which misleadingly tell assistive technologies that the interaction should be more like an accordion (which will not have focus trap).

Reproducible example

https://codesandbox.io/p/sandbox/radix-ui-popover-abstracted-example-8jxqn?file=%2Fsrc%2FApp.js

Using key navigation and open the modal by pressing enter on the trigger. Modal opens however focus is trapped.

Suggested solution

Remove aria-expanded and aria-controls from the trigger

Additional context

Your environment

Software Name(s) Version
Radix Package(s) @radix-ui/react-popover 1.0.7
React n/a 16
Browser Chrome 131.0.6778.109
Assistive tech Voice Over/ Sonoma 14.7.1
Node n/a
npm/yarn yarn
Operating System Sonoma 14.7.1
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant