It seems Firefox will ship with
:focus-visible support in v85.
Chrome has been supporting it since September.
It will allow us to remove the button outline appearing when clicked without removing it for users who rely on it for accessibility.
/* Hide focus when button receives focus via mouse */
/* Show focus only for keyboard users */
outline: 5px solid red;
But as pointed out by css-tricks, we should still avoid using it since it requires a polyfill for other/older browsers and therefore adds more code and complexity to our bundles.
Plus we already have a solution for that. It’s called Accessible Design and it includes designing those focus states to be part of the website experience.
All hail the wide supported