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