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

Screen readers do not reliably announce toasts with role="alert" #1122

Open
byrdsd opened this issue Jun 5, 2024 · 0 comments
Open

Screen readers do not reliably announce toasts with role="alert" #1122

byrdsd opened this issue Jun 5, 2024 · 0 comments

Comments

@byrdsd
Copy link

byrdsd commented Jun 5, 2024

Do you want to request a feature or report a bug?
Bug

What is the current behavior?
When rendering toasts with the default role="alert", certain browser/screen reader combinations will not announce the toast.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your CodeSandbox (https://codesandbox.io/s/new) example below:
Run screen reader and click notify button.
https://codesandbox.io/p/sandbox/toest-screenreader-bug-sntjzh

What is the expected behavior?
Screen reader should announce toasts when the default role="alert" attribute is retained.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
React 18.2.74
Firefox 127.0b9 (64-bit)
orca screen reader 42.0
Pop OS 22.04

It's worth noting that this issue is very dependent on browser and screen reader. For example, it works fine in Chrome with Orca, but not in Firefox with Orca. The root of the issue is a misconfiguration in how role="alert" is being used. From MDN:

As with all other live regions, alerts will only be announced when the content of the element with role="alert" is updated. Make sure that the element with the role is present in the page's markup first - this will "prime" the browser and screen reader to keep watching the element for changes. After this, any changes to the content will be announced. Do not try to dynamically add/generate an element with role="alert" that is already populated with the alert message you want announced - this generally does not lead to an announcement, as it is not a content change.

Again, some combinations work; it depends on how the browser has implemented live regions.

To ensure reliable support across technologies, the role should be set on an element that is present at page load, such as the main .Toastify element.

Currently the live region is created when a toast pops, which prevents some combinations of browser/screen reader from reading it.

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