This one line of CSS solves the problem of a focus ring appearing when the mouse interacts (visually annoying) whilst importantly keeping it for keyboard navigation:
:focus:not(:focus-visible) { outline: none; }Nice and simple, and bookmarking because I’ve been using it in more and more projects.
Source: [twitter.com](https://twitter.com/LeaVerou/status/1045768279753666562)
[Discover more links](/links/)\ Saved 26-Aug 2020 under #a11y & #accessibility & #css & #webdev. [Edit this post](https://github.com/remy/remysharp.com/blob/main/public/links/2020-08-26-9d483db3.md)