scttcper / ngx-toastr

🍞 Angular Toastr
https://ngx-toastr.vercel.app
MIT License
2.5k stars 360 forks source link

Accessibility: toasts are "double-announced" in Chrome/NVDA #957

Open patrickhlauke opened 1 year ago

patrickhlauke commented 1 year ago

A follow-up to https://github.com/scttcper/ngx-toastr/pull/934 - there may have been a recent change in timings on how the toasts are now created, or something may have changed in the timing of how Chrome/Windows exposes these, but currently when testing https://ngx-toastr.vercel.app/ in Chrome/NVDA, most toasts are "double-announced" (once because of the aria-live="polite" on the toast container, and then again because of the role="alert" in the actual toast).

This does not happen in Firefox/NVDA, which makes me suspect it's possibly some change in Chrome specifically.

Video recording using Chrome/NVDA

https://user-images.githubusercontent.com/895831/198152605-9dd736cb-9a8e-4579-aa38-42dc420fde5e.mp4

I'm pressed for time at the moment, but over the weekend I can file a follow-up to #934 that further tweaks the output, removing the role="alert" itself, leaving the announcement purely down to the aria-live="polite".

Question though: I assume that if an author does NOT create their custom toast container per https://github.com/scttcper/ngx-toastr#put-toasts-in-your-own-container, that this script generates its own, and that THAT also includes aria-live="polite" ? src/lib/overlay/overlay-container.ts makes me think that's the case, but just to be sure...

patrickhlauke commented 1 year ago

incidentally, I found some further flakyness (described in https://github.com/bitwarden/clients/issues/3487#issuecomment-1292761683) caused by the overlay-container being generated dynamically the first time around. this may result, depending on specific browser/timings, with it not being registered/seen in time as a live region container and primed to then announce toasts that are injected. I'll see if i can get to some more definitive solution here ... it may need a slight explicit pause of a few milliseconds between the container being generated and the first toast being injected. or, alternatively, generating the overlay-container directly on page load, way before the first toast needs to actually use it.

scttcper commented 1 year ago

maybe we could expose a way for you to create the container manually when you want it

lamhuynhorient commented 1 year ago

I also got this issue. Chrome + NVDA, toasts are "double-announced". It is because role alert on toast message. How can we fix this issue?

patrickhlauke commented 4 months ago

randomly, this may be of interest https://tetralogical.com/blog/2024/05/01/why-are-my-live-regions-not-working/