JS Focus Ring

JS Focus Ring helps you deliver a consistent focus experience to browsers, following the speculative :focus-ring pseudo-class.

Use the js-focus and js-focus-ring attributes to safely target different :focus-ring experiences. This is probably the most common usecase:

[js-focus]:not([js-focus-ring]) {
  outline-width: 0;
}

Someday, you will swap it out for this native solution:

:focus:not(:focus-ring) {
  outline-width: 0;
}

Usage

Add JS Focus Ring to your project:

npm install js-focus-ring --save

Import JS Focus Ring in JavaScript module environments and execute on demand:

import jsFocusRing from 'js-focus-ring';

jsFocusRing(/* optionally pass in the window you are targetting */);

Alternatively, load it as an individual script:

<script src="https://jonathantneal.github.io/js-focus-ring/js-focus-ring.env.js"></script>
<script>jsFocusRing(/* optionally pass in the window you are targetting */)</script>

---

JS Focus Ring is 446 bytes env transpiled, minified, and gzipped.

JS Focus Ring works in all browsers that support addEventListener, which includes Internet Explorer 9.