Focus style should use :focus-visible instead of :focus

Problem/Motivation

Focus styles should only apply when they are really necessary, e.g. when navigating with the keyboard. See this explanation on MDN:

Browsers no longer visibly indicate focus (such as by drawing a "focus ring"), around each element when it has focus. Instead, they use a variety of heuristics to provide focus indicators only when it would be most helpful to the user. For instance, when a button is clicked using a pointing device, the focus is generally not visually indicated, but when a text box needing user input has focus, focus is indicated.

Proposed resolution

Use the :focus-visible pseudo-selector, instead of :focus.