Kris f23e196b4f
UX: Switch button focus state to focus-visible (#30744)
From https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible:

> The :focus-visible pseudo-class applies while an element matches the
[:focus](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus)
pseudo-class and the UA ([User
Agent](https://developer.mozilla.org/en-US/docs/Glossary/User_agent))
determines via heuristics that the focus should be made evident on the
element. (Many browsers show a "focus ring" by default in this case.)

This change switches buttons over to `:focus-visible` which shouldn't
change much, except for situations where focus state may linger in cases
when it's not desired, like the tracking button here for example:


![image](https://github.com/user-attachments/assets/57aaa193-0960-4757-a461-47fdcca7de2a)


When using `focus-visible` the `focus` state is no longer visible after
a tap, but the focus state will still appear when using keyboard
navigation or assistive technology like VoiceOver, as seen here:


<img
src="https://github.com/user-attachments/assets/62398532-3e05-4979-91a4-d3ddeb4758cb"
width="300" />
2025-01-13 14:05:51 -05:00
..