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