wildhoney / tabby.js

Never neglect your tabs when it comes to usability again! Making tabIndex easy for custom elements to improve your UX.

Tabby.js

Never neglect your tabs when it comes to usability again! Making tabindex easy for custom elements to improve your UX.

Purpose

In today's JavaScript environment with all the custom elements, it's easy to forget that tabbing is an integral part of the UX. With HTML5 you can define tabindex on any property, but you need additional functionality for it to do anything useful. That's where Tabby becomes useful! By emitting two custom events when tabbing occurs, you can define the behaviour with ease.

 

Install with npm: npm install tabby-js

Getting Started

Tabby emits two custom events for you to listen for. These can be listened to the vanilla JavaScript way (.addEventListener('tabEnter')) or the jQuery way (.on('tabEnter')) – other libraries are supported as long as they tap into the vanilla JavaScript events.

tabEnter

Emitted when an element with a `tabindex` attribute has focus with the tab key – allowing you to highlight the element, or to open your faux-select.

tabLeave

Emitted irrespective of whether the tab key was involved (an alias of `onblur`) – allowing you to reset the element's state.

// Emitted when a user tabs into the box.
elements.on('tabEnter', function() {
    $(this).addClass('focus');
});

// Emitted each and every time (same as onblur).
elements.on('tabLeave', function() {
    $(this).removeClass('focus');
});

Contributions

I'd be over the moon for contributions for any of my projects – including of course Tabby! If you would like to contribute, please fork and issue a pull request and I'll happily merge it in to master.