sanity icon indicating copy to clipboard operation
sanity copied to clipboard

fix(core): add focus ring to useravatar

Open ninaandal opened this issue 8 months ago • 3 comments

Description

From one of the accessibility reports there's a remark that the UserAvatar in the navbar doesn't have a focus ring when tabbing over it.

This PR attempts to fix this, but since the UserAvatar is a button within the UserMenu, I had some difficulties with the tabbing and ended up with this solution where I've just added a tabIndex={-1} to the wrapper Button, andas={button}to the UserAvatar to get the focus ring. However, when opening the Menu, the focus will go to the wrapper button, resulting in the tab index to be off by one.

If anyone has suggestions for a better fix, I appreciate feedback 🙇

https://github.com/sanity-io/sanity/assets/44635000/e2e5a93d-e68c-4b07-8425-e2efcc21fee2

What to review

Testing

Notes for release

ninaandal avatar Jun 18 '24 11:06 ninaandal