Small library that adds CSS class to html when user starts using keyboard to navigate, and removes it if user clicks anywhere.
This enables you to have focus outline only when user is using keyboard.
Get it from npm
npm install --save has-tabbed
and use it
;const tabbed = ;
That's it. By default library is active when instance is created.
You can control it manually by using
// Removes all listeners and CSS classtabbed;// Adds listeners againtabbed;
Then you can use
has-tabbed class in your CSS
/* This is naive example used in the demo */
Library accepts a single options object with the following properties:
CSS class name which will be added to the
If you want to add CSS class on all keyboard events not only when user presses tab, change this one to
;const tabbed =className: 'navigating-using-keyboard'triggerOnAllKeys: true;
v1.0.0 breaking changes
classNameproperty is now replaced with an options object.
- Default class name is changed from
Old school usage
You should use ES modules, but you can use it directly in the browser.
<!-- copy "has-tabbed.js" to your project -->