A11y: toast notifications in extension popup not announced by assistive technologies

[patrickhlauke]

Steps To Reproduce

1. Use a screen reader (for instance, Chrome with NVDA on Windows)
2. Toggle some functionality that leads to a toast inside the extension (e.g. copying a note, username, password)
3. A toast appears

Expected Result

Assistive technologies (e.g. screen readers) should announce the appearance of the toast.

Actual Result

Assistive technologies don't announce the toast.

Screenshots or Videos

Demonstration video using Chrome/NVDA. Note that no announcement is made when the toast appears.

bitwarden-toasts-screenreader.mp4

Additional Context

The problem itself is upstream in the ngx-toastr component. I filed an issue scttcper/ngx-toastr#933 and a fix PR scttcper/ngx-toastr#934

However, in the meantime, a workaround here (depending on how long it takes for the upstream component to be fixed) would be to explicitly set up a custom container for your toasts, making sure that that container element has aria-live="polite".

Operating System

Windows

Operating System Version

10

Web Browser

Chrome

Browser Version

100.0.4896.127

Build Version

1.57.0

[patrickhlauke]

And to close the loop, scttcper/ngx-toastr#934 has just been merged

[patrickhlauke]

Heads-up @eliykat (and apologies if I keep dragging you into these. let me know if I should just sit patiently instead, don't want to pester you)

[djsmith85]

Awesome upstream-fix @patrickhlauke.

Unfortunately we'll need to wait to pull those changes in, as we'd first need to bump to Angular 13 and then update ngx-toastr.

Shouldn't be to far away, from what I've heard.

[djsmith85]

@patrickhlauke The bump to Angular 14 and with that the bump of ngx-toastr to 15.0 was done with #2948.

This will be available with the 2022.09 release.

[patrickhlauke]

confirming that notifications are now announced correctly by screen readers

bitwarden-browser-toast-close.mp4

arguably, there's a bit of tweaking that could still be done, as they all announced with "Close" at the start (due to the "X" close control). but i'll file this as a separate issue/PR another time.