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; // Emitted each and every time (same as onblur).elements;
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.