#mouse-focused

This script adds specific class ('is-mouse-focused') to DOM-elements which was focused by mouse.

It is common for developers to add css which hides focused element's outline to make html page look prettier. However it makes content unaccessible (see WAI-ARIA Practices). This script allows to separate focusing from keyboard and mouse. After including it you can use the following code:

.is-mouse-focused {
 outline: none;
}

This css removes default outline from mouse focused elements. But for users, which use keyboard to navigate, experience will not changed.

Demo page

Installation

Component can be installed with npm:

npm install mouse-focused

Usage

Using require

require('mouse-focused');

or simply add script to html

<script type="text/javascript" src="mouse-focused.js"></script>