sanity
sanity copied to clipboard
fix(core): add focus ring to useravatar
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