focus-outline-manager

Watch users keyboard input and manage the focus outline visibility

NOTICE: This library is no longer needed in most cases. Modern browsers added this behavior by default for most focusable elements, except for text <input> and <textarea>, for which you can show a custom focus indicator, such as a different outline or box-shadow. For example: input:focus-visible, textarea:focus-visible { outline: 2px solid black; }. Keep in mind that the custom indicator needs to be accessible (minimum contrast, use of color, etc). Unfortunatelly, for now, it is not possible to set different styling on an input field which is focused by keyboard (not mouse) with CSS only, without JS. In case you want to change the default focus indicator style for all elements, without affecting the focus indicator visibility, you can use a new pseudo-class :focus-visible instead of :focus. For example: :focus-visible {outline: 2px solid black;}.

By default, browsers add an outline around buttons and other controls when they are clicked:

Removing the outline by setting *:focus {outline: none;} will make the site less accessible for keyboard users.

focus-outline-manager enables you to remove the outline for mouse users, retaining it for keyboard users.

Demo

• View JSBin demo

Install

npm install --save focus-outline-manager

Usage

Using CommonJS module loading:

require('focus-outline-manager');

CSS:

.focus-outline-hidden :focus {
    outline: none;
}

Credits

• focus-outline-manager is based on a Chromium UI utility focus-outline-manager.js (Copyright © 2012, The Chromium Authors).

Other Implementations

• https://github.com/csmr/classy-focus.js
• https://github.com/kimmobrunfeldt/fix-outline
• https://github.com/ambassify/smart-outline
• https://github.com/ry5n/keyring
• https://github.com/lindsayevans/outline.js