smart-focus-ring

Hide the :focus ring by default, show it for keyboard users.

Usage no npm install needed!

<script type="module">
  import smartFocusRing from 'https://cdn.skypack.dev/smart-focus-ring';
</script>

README

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. 🎉

Button Outline Demo

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).