Notifications should be read by screen reader

[PVince81]

I think toast notifications should be read by screen readers when they appears.
Maybe there's a way to integrate this into the component.

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_alert_role

The "polite" attribute could be set depending whether it's an error or warnings.

In some cases like in Talk, not sure if messages like "connection to signaling server is taking longer" is worth reading out. Maybe need an extra flag to prevent reading those ?

[nickvergessen]

Ref nextcloud/spreed#7105

New chat messages should be announced via aria-live="polite", including author and message content, see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions

Reading:
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions

aria-live="assertive" should only be used for time-sensitive/critical notifications that absolutely require the user's immediate attention. Generally, a change to an assertive live region will interrupt any announcement a screen reader is currently making. As such, it can be extremely annoying and disruptive and should only be used sparingly.

My suggestion would be to either use aria-live="assertive" for all, or at least the elements with aria-live="polite"

As far as I can see toastify-js does not allow this. So either we need to deal with it upstream or have to look for another library

[nickvergessen]

In some cases like in Talk, not sure if messages like "connection to signaling server is taking longer" is worth reading out. Maybe need an extra flag to prevent reading those ?

Sure it's important, as it means you can not chat nor join the call.

But yeah as per above, I would default to:

• assertive for errors
• polite for others

and expose it as a prop so apps can overwrite.

[nickvergessen]

Lib currently used https://github.com/apvarun/toastify-js

[nickvergessen]

Reported upstream at apvarun/toastify-js#105 with a link to our workaround