fix(material/snack-bar): fix Firefox/JAWS not reading out snackbar me…

[annieyw]

…ssage

Add role="alert" to snackbar container.

Known issue: JAWS does not read out aria-live region unless it has role="alert"
https://bugzilla.mozilla.org/show_bug.cgi?id=1453673

Fixes #21137

[crisbeto]

Should we add this to a unit test assertion as well?

[crisbeto]

Can you add a comment about why we need the role?

[jelbourn]

cc @zelliott

I'm concerned this might have unintended consequences. One issue I see is that role="alert" is always treated as "assertive", which means they interrupt other content. I believe the default snackbar politeness should be "polite". Without testing I wouldn't know for sure, but I'd also wonder if having both aria-live and role="alert" would lead to double announcements.

The Firefox bug you point to also seems like the issue is somewhat inconsistent? It might be better to leave the snackbar as-is and leave this as a known Firefox + JAWS bug outside of our responsibility.

[zelliott]

cc @haywoodsloan as the resident snackbar expert I defer all snackbar questions to :)

[haywoodsloan]

When I worked on #20487 I switched the snackbar from using role="alert" or role="status" to aria-live="assertive" and aria-live="polite". When testing JAWS, NVDA, VoiceOver, and ChromeVox I found aria-live gave more consistent behavior between the SRs. I did most of that testing on Chrome though.

I wouldn't recommend setting role="alert" statically as that does imply aria-live="assertive" and could cause unexpected behavior if aria-live="polite" is explicitly set. Could consider setting role="alert" when aria-live="assertive" and role="status" when aria-live="polite". I haven't tested having both set myself, but have seen recommendations to use both for maximum compatibility.

The only report I've seen of setting both role and aria-live causing issues is here: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions#preferring_specialized_live_region_roles. Potentially causing double speaking on VoiceOver on iOS, but that might be a fair tradeoff to support Firefox + JAWS better.

[jelbourn]

We have precedent for only doing certain behaviors based on the platform (e.g. Firefox only) specifically for screen-reader issues like this. @annieyw we could explore using Platform to only add role="alert" or role="status" as appropriate for Firefox only.

[annieyw]

Changed to only adding role for Firefox and added unit tests.

[jelbourn]

LGTM

[jelbourn]

Looks like the API gold needs to be updated

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}