keyboard-focus

1.0.1 • Public • Published

Keyboard Focus JavaScript Logo

NPM Version Build Status Gitter Chat

Keyboard Focus lets you detect when an element has received focus from a keyboard instead of a pointer, such as a mouse or touch input.

Keyboard Focus adds a keyboard-focus attribute to any focused element that is given focus by a keyboard.

This can be used to style components specifically if focus is triggered by a keyboard or not:

/* hide the focus indicator when triggered by a pointer (touch, mouse, etc.) */
 
:focus:not([keyboard-focus]) {
  outline-width: 0;
}

Usage

Add Keyboard Focus to your build tool:

npm install keyboard-focus --save-dev

Activate Keyboard Focus on the document:

import keyboardFocus from 'keyboard-focus';
 
keyboardFocus(document);

Difference between [keyboard-focus] and .focus-visible

The .focus-visible class applies while an element matches the :focus pseudo-class and the UA determines via heuristics that the focus should be made evident on the element.

The [keyboard-focus] attribute-selector applies while an element matches the :focus pseudo-class regardless of these heuristics.

License

Keyboard Focus is licensed under the W3C Software License which is also GPL, MIT, and BSD compatible.

Keyboard Focus is forked from the focus-visible polyfill, and includes substantial material copied from their excellent efforts.

Package Sidebar

Install

npm i keyboard-focus

Weekly Downloads

2,925

Version

1.0.1

License

W3C

Unpacked Size

15.8 kB

Total Files

6

Last publish

Collaborators

  • jonathantneal