Accessibility: minor issue - toast notifications all start with "Close" in screen reader

[patrickhlauke]

Steps To Reproduce

1. Run a screen reader (e.g. NVDA)
2. Trigger a toast/notification

Expected Result

The toast/notification message should be announced by assistive technologies.

Actual Result

While the toast/notification does announce, it also announces the "Close" button at the start of the notification. All toasts essentially start with "Close ..." and then the actual message. Suggest perhaps tweaking this somehow to only announce the message itself as part of the toast, or reordering the content so that the "X" close button comes after the actual message, at the end of the toast, so each toast starts with the important info first.

Screenshots or Videos

Video using chrome/nvda and triggering a notification. note how it starts with "Close..."

EDIT: removed video as it was leaking some minimal info

Additional Context

No response

Operating System

Windows

Operating System Version

10 Build 19044

Web Browser

Chrome

Browser Version

Latest

Build Version

2022.8.0

[patrickhlauke]

Note this was also the case on desktop (except currently there's a regression - see #3487)

Video showing the same issue in Windows desktop with NVDA, with the notification announcing "Close ..."

bitwarden-desktop-toast-close.mp4

(video taken on 9 August, when the version at that time still worked correctly/didn't have the regression)

[tangowithfoxtrot]

Hi @patrickhlauke. I was able to reproduce this with the current latest release of browser and desktop (2022.9.1) on my end. I'll marked accordingly in our internal bug tracking system. Thanks for reporting!

[patrickhlauke]

Finally looking into this more closely. It's actually an upstream issue in https://github.com/scttcper/ngx-toastr, as bitwarden's code itself doesn't control the content order of the toasts. I'll file this separately there.

[patrickhlauke]

Closing this, moved upstream scttcper/ngx-toastr#985