Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including focus-outline-manager with all npm packages installed. Try it out:

var focusOutlineManager = require("focus-outline-manager")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

focus-outline-manager v1.0.2

Watch users keyboard input and manage the focus outline visibility

focus-outline-manager

Watch users keyboard input and manage the focus outline visibility

NPM version

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

Removing the outline for all users 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

Install

npm install --save focus-outline-manager

Usage

Using CommonJS module loading:

require('focus-outline-manager');

CSS:

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

Metadata

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free