Adds aria-live=polite to the global snackbar component

[marcellamaki]

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

• Contributor has fully tested the PR manually
• If there are any front-end changes, before/after screenshots are included
• Critical user journeys are covered by Gherkin stories
• Critical and brittle code paths are covered by unit tests

PR process

• PR has the correct target branch and milestone
• PR has 'needs review' or 'work-in-progress' label
• If PR is ready for review, a reviewer has been added. (Don't use 'Assignees')
• If this is an important user-facing change, PR or related issue has a 'changelog' label
• If this includes an internal dependency change, a link to the diff is provided

Reviewer checklist

• Automated test coverage is satisfactory
• PR is fully functional
• PR has been tested for accessibility regressions
• External dependency files were updated if necessary (yarn and pip)
• Documentation is updated
• Contributor is in AUTHORS.md

[radinamatic]

@marcellamaki After testing the build from this PR with NVDA on Windows, plus some more of my experiments with role="status" (that failed), I reviewed the WCAG and realized that we were forgetting an important element:

Generally live regions must exist on the page at render. This primes the browser to monitor it as it builds the accessibility tree for the page. If you try to create (or convert a container to) a live region when you need it, it likely will not work. Also be careful that you are not hiding it with aria-hidden or display: none, or at least test it it with your target screen reader and browser combinations.

Full article for recommended reading

Our snackbars appear and disappear dynamically, and that's why they are not announced by screen reader:
https://user-images.githubusercontent.com/1457929/167831172-eb872bfa-a0b8-46eb-b252-29478cf791f8.mp4

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.

[marcellamaki]

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

[radinamatic]

@marcellamaki Success!!!! 🎉 🎉 🎉

NVDA on Windows 10 now fully announces the content of the snackbars in the following pages:

Facility > Users > Create/Delete user
Facility > Classes > Create/Delete class
Facility > Settings > Save changes
Device > Channels > Import/Delete/Export channel (Task started...)
Device > Permissions > Edit permissions
Device > Settings > Save changes
Profile > Edit profile

aria-is-live.mp4

I can continue testing on other pages, but since this aria-live region is global, I have little doubt at this point 🙂

[radinamatic]

Snackbar notifications are finally live for screenreaders too! 👏🏽 💯

[marcellamaki]

YESSS!!! This was the best notification EVER to open my computer to see 🎉 Thank you @radinamatic