Keyboard Focus

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.