Accessibility improvements

[adamwoodnz]

Issues found:

1. No focus styling on profile page Account action buttons
2. Password page 'show password' button has no accessible name
   
3. No focus styling on 2FA page QR code or cancel button
4. 2FA page QR code has no discernible text
   
5. Success notifications when focused say 'Dismiss this notice, button' but they aren't dismissable via mouse or keyboard
   

Questions

1. Should we add UI which is keyboard accessible for easy copy and paste of backup codes?
2. Should the 'password best practices' link open in a new tab? Feels disruptive to navigate directly to an info link.

[iandunn]

Success notifications when focused say 'Dismiss this notice, button' but they aren't dismissable

🤔 , IMO they shouldn't be dismissable, so the fix would be removing the label. I'd assume isDismissible=true param for the SnackBar component should do that.

Should we add UI which is keyboard accessible for easy copy and paste of backup codes?

Do you mean adding new UI elements? What would they look like/do?

Should the 'password best practices' link open in a new tab? Feels disruptive to navigate directly to an info link.

Usually I'd say it's best to let the user decide, but this may be an exception. I'd lean towards keeping it how it is, but don't feel strongly

https://www.nngroup.com/articles/new-browser-windows-and-tabs/

[adamwoodnz]

Do you mean adding new UI elements? What would they look like/do?

I was thinking something like

Depends if we're really pushing users to print. In that case perhaps a print button might be helpful.

[adamwoodnz]

Usually I'd say it's best to let the user decide, but this may be an exception. I'd lean towards keeping it how it is, but don't feel strongly

https://www.nngroup.com/articles/new-browser-windows-and-tabs/

Good read, thanks. Yeah I can't say this info is reference material that should be left open, so you're probably right.

[iandunn]

Ah, yes, those UI elements are planned in #45 . Feel free to pick that one up if you're interested 👍🏻