https://github.com/stamat/focus-outline
Remove element outlines on mouse click, show them on TAB key
https://github.com/stamat/focus-outline
a11y accessibility focus outline
Last synced: about 1 year ago
JSON representation
Remove element outlines on mouse click, show them on TAB key
- Host: GitHub
- URL: https://github.com/stamat/focus-outline
- Owner: stamat
- License: mit
- Created: 2020-08-23T16:36:19.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2023-08-04T10:21:13.000Z (almost 3 years ago)
- Last Synced: 2025-01-23T06:09:01.364Z (over 1 year ago)
- Topics: a11y, accessibility, focus, outline
- Language: JavaScript
- Homepage:
- Size: 43.9 KB
- Stars: 2
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# focus-outline [](https://www.npmjs.com/package/focus-outline)
Remove element outlines on mouse click, show them on TAB key. Extremely simple code. Inspired by [outline.js](https://github.com/lindsayevans/outline.js)
## Usage
Install it via npm:
```bash
npm i focus-outline
```
Offered as ESM and IIFE.
```javascript
import FocusOutline from 'focus-outline';
const focusOutline = new FocusOutline(); // initializes functionality
```
to remove functionality you can destroy the instance like so:
```javascript
focusOutline.destroy();
```
and if you want to re-initialize it:
```javascript
focusOutline.init();
```
Or you can use the IIFE version:
```html
var focusOutline = new FocusOutline();
```
## Configuration
You can pass an object with options to the constructor and configure the css used to disable the outline.
```javascript
const focusOutline = new FocusOutline({
css: ':focus { outline: none; } ::-moz-focus-inner { border: 0; }', // this is the default, you can have whatever you want here, if there is ever need for that lol
removeBoxShadow: true, // removes the box shadow too, default is `false`
bodyClass: 'no-focus-outline', // adds a class to the body when the outline is removed
keyCodes: [9], // array of key codes that trigger the outline to be shown, default is `[9]` (TAB)
callback: function(focusOutline) { if (focusOutline.enabled) console.log('outline is shown') } // callback function on outline disable and enable
});
```