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