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;
}Add Keyboard Focus to your build tool:
npm install keyboard-focus --save-devActivate Keyboard Focus on the document:
import keyboardFocus from 'keyboard-focus';
keyboardFocus(document);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.
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.