mouse-focused

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

Usage no npm install needed!

<script type="module">
  import mouseFocused from 'https://cdn.skypack.dev/mouse-focused';
</script>

README

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.

NPM

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>