Polyfill

Installation

npm install --save focus-visible

We recommend only using versions of the polyfill that have been published to npm, rather than
cloning the repo and using the source directly. This helps ensure the version you're using is stable
and thoroughly tested.

If you do want to build from source, make sure you clone the latest tag!

Backwards compatibility

Until all browsers ship :focus-visible developers will need to use it defensively to avoid accidentally
removing focus styles in legacy browsers. This is easy to do with the polyfill.

/* This will hide the focus indicator if the element receives focus via the mouse, but it will still show up on keyboard focus.*/.js-focus-visible:focus:not(.focus-visible) {
outline: none;
}
/* Optionally: Define a strong focus indicator for keyboard focus. If you choose to skip this step then the browser's default focus indicator will be displayed instead.*/.js-focus-visible.focus-visible {
…
}

In the future, when all browsers support :focus-visible, the
snippets above will be unnecessary. But until that time it's important
to be mindful when you use :focus-visible and to ensure you always
have a fallback strategy.