Skip to content

ambassify/smart-outline

master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Smart Outline

CircleCI

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

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

About

Disabling focus outline without breaking accessibility

Resources

Stars

Watchers

Forks

Packages

No packages published