search

radix-ui / primitives

Radix Primitives is an open-source UI component library for building high-quality, accessible design systems and web apps. Maintained by @workos.
https://radix-ui.com/primitives
MIT License
15.53k stars 794 forks source link

Toast component `a11y` issue #2584

Open rmolinamir opened 9 months ago

rmolinamir commented 9 months ago

Bug report

The Toast component is causing an a11y issue:

ARIA hidden element must not be focusable or contain focusable elements

Current Behavior

The Toast component renders a VisuallyHidden component with a truthy aria-hidden but a tabIndex of 0. Please see packages/react/toast/src/Toast.tsx.

Expected behavior

The Toast should render the VisuallyHidden component with tabIndex of -1.

Reproducible example

CodeSandbox Reproducible

Please navigate to the Storybook Addons tab and check the a11y violation.

Suggested solution

Not 100% sure, I was initially thinking of suggesting rendering the VisuallyHidden component with a tabIndex of -1 as mentioned above, but this seems to be managing focus and I'm unaware of potential side-effects resulting from this solution.

Additional context

If tabIndex=-1 is deemed to work then I can open a PR.

Your environment

Software Name(s) Version
Radix Package(s) @radix-ui/react-toast ^1.1.5
React n/a 18.2.0
Browser
Assistive tech
Node n/a
npm/yarn
Operating System
rmolinamir commented 9 months ago

Ended up simply disabling the aria-hidden-focus rule with a selector specifically for those spans to avoid this false positive, but might be worth giving it a look still.

Thanks for all the amazing work :)

42tte commented 9 months ago

Dupliceras #1750