Small helper for enabling nicer focus behaviour
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.eslintrc.yml
.gitignore
.npmignore
README.md
has-tabbed.js
index.html
package-lock.json
package.json

README.md

has-tabbed

npm version npm downloads

Small library that adds CSS class to html when user starts tabbing, and removes it if user clicks anywhere.

This enables you to have focus outline only when user is using keyboard.

Demo | Blog post

Usage

Get it from npm

npm install --save has-tabbed

and use it

import HasTabbed from 'has-tabbed';

const tabbed = new HasTabbed();

That's it. By default library is activated when instance is created. You can control it manually by using activate and deactivate methods.

// Removes all listeners and CSS class
tabbed.deactivate();

// Adds listeners again
tabbed.activate();

Then you can use --tabbed class in your CSS

/* This is naive example used in the demo */
* {
  outline: 1px dotted rgba(50, 50, 50, 0);
  outline-offset: 0.8rem;
  will-change: outline-color, outline-offset;
}

.--tabbed *:focus {
  outline: 1px dotted rgba(50, 50, 50, 1);
  outline-offset: 0.5rem;
  transition: outline-offset 250ms;
}

Options

className

By default library will add --tabbed class to html element. To change it just pass custom class name when creating an instance.

import HasTabbed from 'has-tabbed';

const tabbed = new HasTabbed('my-super-duper-class');

Old school usage

You should use ES modules, but you can use it directly in the browser.

<!-- copy "has-tabbed.js" to your project -->
<script src="has-tabbed.js"></script>
<script>
  var tabbed = new HasTabbed();
</script>