search

reach / reach-ui

The Accessible Foundation for React Apps and Design Systems
https://reacttraining.com/reach-ui/
MIT License
5.96k stars 563 forks source link

[Dialog] Portaled content hidden from assistive technologies #870

Open TrevorRice opened 2 years ago

TrevorRice commented 2 years ago

🐛 Bug report

Current Behavior

When a component that leverages a portal is passed as a child to Dialog, the content rendered outside of the Dialog's DOM tree is hidden from assistive technologies via aria-hidden.

Screen Shot 2021-11-30 at 11 18 40 AM

https://user-images.githubusercontent.com/3644075/144095068-e23d6562-7603-4d31-9f39-b82e83fc71af.mov

The second half of the recording demonstrates what happens when a Menu component is passed as a child to Dialog. You'll notice the options are no longer read by VoiceOver.

Side note: it's necessary to select the menu button twice before it opens when nested in the Dialog.

Expected behavior

For "portaled" content not to be hidden from assistive technologies.

Reproducible example

CodeSandbox

Suggested solution(s)

I believe this would mean not applying aria-hidden="true" to containers that render the portal's content.

Additional context

N/A

Your environment

Software Name(s) Version
Reach Package @reach/dialog 0.16.2
React react 17.0.2
Browser Safari 15.0
Assistive tech VoiceOver —
Node — —
npm/yarn — —
Operating System macOS 11.6
andrewmee commented 2 years ago

In the meantime, a workaround for this seems to be to use a render callback in order to conditionally load the MenuList/MenuItems based on whether or not isExpanded is true.

I think this works because the portal isn't created until it's actually needed to render, and thus it's not present yet to pick up the aria-hidden attribute that gets spread around everywhere when the dialog is first opened.