Detect if a focus ring should be displayed
npm install focus-ring> Detect if a focus ring should be displayed
- Tiny: less than 500 bytes gzipped
- Flexible: let focus-ring add and remove a body class or write your own event handler
- Unambiguous: always falls back to displaying focus rings when in doubt
- Simple API: works with the call of only one function
focus-ring was made for the browser, but works in any JavaScript runtime if provided with a target that implements EventTarget. It supports IE9+.
This project uses node and npm. Go check them out if you don't have them locally installed.
``sh`
$ npm install focus-ring
Then with a module bundler like rollup or webpack, use as you would anything else:
`javascript
// using ES6 modules
import focusRing from 'focus-ring';
// using CommonJS modules
const focusRing = require('focus-ring');
`
The UMD build is also available on unpkg:
`html`
You can find the library on window.focusRing.
`js
import focusRing from 'focus-ring';
const fr = focusRing();
// Specify a target other than document.body
focusRing(document.querySelector('#target'));
// Listen to individual focus ring events
fr.on(true, () => console.log('Display focus rings'));
// Remove event listeners
const listener = fr.on(false, () => console.log('Hide focus rings'));
fr.off(false, listener);
// Listen to both events
fr.on('*', e => console.log('Focus rings updated. New value: ' + e.value));
`
This implementation adds a class to the focus-ring target when focus rings should be displayed and removes it if they can be hidden.
`js
import focusRing from 'focus-ring';
// Adds .focus-ring class to document.body
focusRing.addClass();
// Adds .custom class to element with ID target
focusRing.addClass('custom', document.querySelector('#target'));
// Still supports custom event handlers so you can add additional logic
focusRing.addClass().on('*', console.log);
``
ISC License © Jonas Gierer