This PR changes a bit how we display the focus ring in SelectNext options, by making it visible only when the focus itself is considered visible by the browser (:focus-visible instead of :focus), which happens when interacting with components with the keyboard.
On the other hand, for users using the mouse, the focus ring becomes a bit annoying when it's always visible, and it can even be mistaken as part of the selected items style. With the changes in this PR, the focus ring won't show when using the mouse.
There's only and edge case (which was likely the motivation to use focus:ring instead of focus-visible-ring), which is that, if you open the listbox by clicking the select, and then navigate through the options via arrow keys, it feels as if the first item is being skipped, as it is initially not showing a focus ring.
This PR changes a bit how we display the focus ring in
SelectNextoptions, by making it visible only when the focus itself is considered visible by the browser (:focus-visibleinstead of:focus), which happens when interacting with components with the keyboard.https://github.com/hypothesis/frontend-shared/assets/2719332/58c16a43-8367-48c1-9c4d-3456dc23b34d
On the other hand, for users using the mouse, the focus ring becomes a bit annoying when it's always visible, and it can even be mistaken as part of the selected items style. With the changes in this PR, the focus ring won't show when using the mouse.
https://github.com/hypothesis/frontend-shared/assets/2719332/1fc94ffc-40ff-4afe-9f8b-0010e9dbb7a7
There's only and edge case (which was likely the motivation to use
focus:ringinstead offocus-visible-ring), which is that, if you open the listbox by clicking the select, and then navigate through the options via arrow keys, it feels as if the first item is being skipped, as it is initially not showing a focus ring.https://github.com/hypothesis/frontend-shared/assets/2719332/7cd36f6a-71d5-4d36-860e-989884e15d39
However, I think this is an edge case (people using the keyboard will usually use it all the time), which does not justify the UI implications.
For reference, this is how it currently looks like in
mainbranch, with the focus ring always visible:https://github.com/hypothesis/frontend-shared/assets/2719332/091f0c97-af7f-466b-9294-d893b2bf36dc