The
:focus-visiblepseudo-class applies while an element matches the:focuspseudo-class and the UA (User Agent) determines via heuristics that the focus should be made evident on the element.
Although it's up to the browser to define when the :focus-visible state is active, most browsers use it to show focus states triggered by non-mouse interaction. This includes more than just keyboards, although that is the 'main' use. That way, mouse interaction still uses the :focus state. Usually the :focus-visible state will also apply to any element that uses keyboard interaction, such as inputs.
This can be useful as many elements are focused after mouse interaction, such as buttons or inputs. :focus-visible will not show this state, which can lead to nicer UX.
As far as I can tell, assuming a browser supports :focus-visible, it's fairly safe to disable native :focus styles in favour of custom :focus-visible styles.
[[20220919110434-focus-visible-defensive]]
https://www.sarasoueidan.com/blog/focus-indicators/