Smart Focus Ring

Hides the CSS focus ring by default and adds a user-is-tabbing class to the body when a user hits the tab key. This shows a focus ring on form elements like buttons, fields, textareas and selects.

Example

If you focus on the button via mouse, you won't see a focus outline. If you interact via keyboard, you will. 🎉

Usage

Install the package

$ npm i smart-focus-ring

Import it into your project and add this JavaScript.

import './node_modules/smart-focus-ring/lib/styles.css';
import smartFocusRing from 'smart-focus-ring';
smartFocusRing();

Credit

Based on David Gilbertson's Removing that ugly :focus ring (and keeping it too).