-
Notifications
You must be signed in to change notification settings - Fork 714
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
Adds aria-live=polite to the global snackbar component #9410
Adds aria-live=polite to the global snackbar component #9410
Conversation
…on updates on screen readers
@marcellamaki After testing the build from this PR with NVDA on Windows, plus some more of my experiments with
Full article for recommended reading Our snackbars appear and disappear dynamically, and that's why they are not announced by screen reader: To solve this for all the snackbar occurrences in Kolibri my assumption would be that we need to create a global hidden live region (see the recommended format in this article by Adrian), that all the snackbars appearing in the page would pass their content to as they appear. Another good resource regarding the multiple messages in live regions can be found in this SO article. |
Ah, yes... I think this is something I learned several years ago and then forgot. This is very helpful! Thank you for the resources @radinamatic -- I will investigate how and where we might be able to follow this guidance |
@marcellamaki Success!!!! 🎉 🎉 🎉 NVDA on Windows 10 now fully announces the content of the snackbars in the following pages: Facility > Users > Create/Delete user aria-is-live.mp4I can continue testing on other pages, but since this |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Snackbar notifications are finally live for screenreaders too! 👏🏽 💯
YESSS!!! This was the best notification EVER to open my computer to see 🎉 Thank you @radinamatic |
Summary
This adds
aria-live=polite
to the global snackbar component. This setting does not "overly interrupt" on screen readers, but provides update notifications when changes happen.References
Fixes #9406
Reviewer guidance
The reviewer should test on a screen reader device or on a device with voiceover or similar settings enabled, anywhere where there are snackbar notifications.
I found testing on the "users" table to be easiest -- by creating and deleting a user, I was able to test easily several times.
I have only tested this on MacOS with voiceover... It does seem to be working as expected in this setting, and the reading I have done would indicate that this is fairly universal, but I'm not sure about other devices.
Testing checklist
PR process
Reviewer checklist
yarn
andpip
)