Tabindex, outlines only with tab button

Question

I'm trying to fix accessibility on my site and to manage the navigation with tab button, I'm using tabindex. I noticed that elements with tabindex have an outline, both on tab focus and on click. I would remove outlines on click (or drag) and leave it on tab focus.

Is there a solution (maybe in css) to resolve this problem?

Answer 1

At the moment there is no easy way to achieve this without JavaScript detecting differences between focus on keyboard and mouse. However, there is a new CSS pusedo-class called :focus-visible (previously called :focus-ring) that solves this problem. It allows you to style the focus indicator just for keyboard users while not having it apply to mouse users.

Currently it's not supported in any browser without turning on a feature flag, but there is a polyfill available that would allow you to use it.

Additional resource: A11ycast focus-ring