clients
clients copied to clipboard
Accessibility: minor issue - toast notifications all start with "Close" in screen reader
Steps To Reproduce
- Run a screen reader (e.g. NVDA)
- 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..."
https://user-images.githubusercontent.com/895831/189526645-a4abd7b0-12b7-4639-a2f5-174b3db292a2.mp4
Additional Context
No response
Operating System
Windows
Operating System Version
10 Build 19044
Web Browser
Chrome
Browser Version
Latest
Build Version
2022.8.0
Note this was also the case on desktop (except currently there's a regression - see https://github.com/bitwarden/clients/issues/3487)
Video showing the same issue in Windows desktop with NVDA, with the notification announcing "Close ..."
https://user-images.githubusercontent.com/895831/189526757-456583b7-1480-4cd1-9868-b97fa5431d85.mp4
(video taken on 9 August, when the version at that time still worked correctly/didn't have the regression)
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!
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.
Closing this, moved upstream https://github.com/scttcper/ngx-toastr/issues/985