Smart Outline

Disabling focus outline without breaking accessibility. This library will only disable the focus outline when the user is using his mouse to navigate your web page. Once a users starts using his keyboard the outline is activated again resulting in the best of both worlds, visually and accessibility wise.

Demo

• View online demo
• View JSFiddle demo

Usage

This library supports both AMD and CommonJS module loading and it falls back to a global smartOutline object.

// use RequireJS
var smartOutline = require('smartOutline');

// ES6
import smartOutline from 'smartOutline';

// Load via script tag
<script src="https://cdn.rawgit.com/ambassify/smart-outline/master/main.js"></script>

smartOutline.init();

Initialize with custom configuration

smartOutline.init({ domId: 'my-custom-id' });

Run demo page

Execute following command:

npm run serve

and navigate to http://127.0.0.1:7000.

Unit Tests

npm test

You can also view the online QUnit test page.

Options

| Option | Type | Description | |----------|:-------------:|------| | domId | string | ID that is assigned to the style element that gets injected in the DOM | | hideFocusCSS | string | Overwrite the default CSS to hide the focus outline when a user is using the mouse | | nonce | string | Add a nonce attribute to the injected style element for CSP enabled sites |

Methods

| Method | Return | Description | |----------|:-------------:|------| | .init() | HTMLElement | Initialize the smart outline module | | .isKeyboardUser() | boolean | Return true if the current user is a keyboard user | | .isEnabled() | boolean | Check if smart outline is active | | .destroy() | null | Disable smart outline by remove injected style element and all event listeners |

Browser Support

• Chrome
• Firefox
• Safari
• Opera
• IE 9+
• Edge

Contributing

If you have some issue or code you would like to add, feel free to open a Pull Request or Issue and we will look into it as soon as we can.

License

We are releasing this under a MIT License.

About us

If you would like to know more about us, be sure to have a look at our website, or our Twitter accounts Ambassify, Sitebase, JorgenEvens