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

[dialog] Setting aria-hidden on all the things causes issues with Jaws/Chrome. #493

Open
cannona opened this issue Feb 29, 2020 · 4 comments
Assignees
Labels
a11y: JAWS Type: Bug Something isn't working Type: Enhancement General improvements or suggestions

Comments

@cannona
Copy link

cannona commented Feb 29, 2020

🐛 Bug report

Current Behavior

Currently, when the dialog component is used, aria-hidden="true" is set on the rest of the body elements outside the dialog. As explained by the docs, this was done so that users wouldn't be able to see the rest of the page when the dialog is open. Fortunately, this may no longer be necessary, as modern screen readers respect aria-modal="true" and role="dialog", making this technique unnecessary for most users. Unfortunately, Jaws with Chrome seems to have a hard time showing data again when aria-hidden="true" is removed from it. As a result, when a screen reader user closes the dialog, they may not see all (or perhaps any) of the content on the page.

Expected behavior

Either don't set aria-hidden on the content outside the modal, or at least make this functionality optional.

Your environment

Software Name(s) Version
Reach Package Dialog 0.8.5
React 16.12.0
Browser Chrome 80
Assistive tech Jaws 2020
Operating System Windows 10
@cannona cannona changed the title Setting aria-hidden on all the things breaks modern screen readers. [dialog] Setting aria-hidden on all the things causes issues with Jaws/Chrome. Feb 29, 2020
@chaance chaance added Type: Enhancement General improvements or suggestions a11y: JAWS labels Mar 2, 2020
@chaance chaance self-assigned this Mar 11, 2020
@chaance chaance added this to the v1.0.0-alpha.0 milestone Mar 11, 2020
@reach reach deleted a comment from enforce-template-use bot Mar 16, 2020
@chaance
Copy link
Member

chaance commented Mar 16, 2020

Considering a simple API addition for overriding this. At some point we'll probably want to remove this as the default behavior, but I'm not clear yet on where current levels of adequate support for aria-modal are (most references I'm finding are fairly dated).

I'm thinking <Dialog ariaHideAncestors /> (true by default), and eventually we could just change the default value to false so it's a bit less clunky.

@cannona
Copy link
Author

cannona commented Apr 6, 2020

That sounds great to me. Here's a draft PR I threw together yesterday. Feedback welcome. Docs have yet to be updated.

@umpox
Copy link

umpox commented May 6, 2022

I've also just ran into this issue. The PR from @cannona looks like it will help here, can we merge that?

We're trying to use @react-aria/live-announcer but this component makes all of the announcements inaccessible as it makes it aria-hidden whilst the Dialog is open (and screen readers still don't seem to pick up the messages when finally no longer hidden).

It seems that we shouldn't actually need to do this anymore, judging from this comment, it'd be great if we could disable it!

@martinmckenna
Copy link

just spent hours trying to figure out why my screen reader wasn't reading aria-live regions and finally found this issue.

This one is big. Would love to see this fixed!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
a11y: JAWS Type: Bug Something isn't working Type: Enhancement General improvements or suggestions
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants