Remove Outline for Mouse Interactions

[michaelmang]

The :focus-visible trick
“What if we could apply focus styles only when the keyboard is used to focus something, not the mouse?” asks Chris in this blog post all about that and the :focus-visible trick. Chris points to Lea Verou’s suggestion several years ago now to remove the outline from all elements that are focused with a mouse:

:focus:not(:focus-visible) { outline: none }
I like this suggestion a lot and I think I’m going to add it to my newly refactored base.less file; that’s where we keep all global styles like h1, p, etc. Back to the refactoring!

Summary

Make the suggested CSS change so that outlines are only shown on keyboard interactions, not mouse interactions. Example: Click on the accordion.

Using the trick shown in the tweet, it will only apply to browsers that support the :focus-visible selector.

[100stacks]

@michaelmang, have you see this article:

https://blog.chromium.org/2020/03/updates-to-form-controls-and-focus.html

It explains why the focus ring is more pronounced.