clients icon indicating copy to clipboard operation
clients copied to clipboard

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

Open patrickhlauke opened this issue 1 year ago • 2 comments

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..."

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

patrickhlauke avatar Sep 11 '22 12:09 patrickhlauke

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)

patrickhlauke avatar Sep 11 '22 12:09 patrickhlauke

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!

tangowithfoxtrot avatar Sep 19 '22 17:09 tangowithfoxtrot

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 avatar Mar 18 '23 20:03 patrickhlauke

Closing this, moved upstream https://github.com/scttcper/ngx-toastr/issues/985

patrickhlauke avatar Mar 19 '23 11:03 patrickhlauke