fabiocaccamo/tabbo.js

:chocolate_bar: :keyboard: enhanced keyboard tabbing usability on any website / webapp with one line of code.

tabbo.js

🍫 ⌨️ enhanced keyboard tabbing usability on any website / webapp with one line of code.

Table of contents

• Features
• Installation
• Usage
• APIs
• Development
• Security
• License

Features

• Vanilla JS / Zero dependencies
• Preserved default tabindex behaviour
• Tabbing enabled on the following elements: 'a', 'button', 'input', 'select', 'summary', 'textarea', '[tabindex]' (any element with tabindex attribute)
• Tabbing disabled on all elements that are disabled (impossible to interact with) or invisible (hidden or without width/height)
• Tabbing disabled on all elements that are children/descendants of elements with tabbing disabled
• Tabbing trapped inside modal elements (any element with aria-modal="true" attribute that is enabled and visible)
• Reversed tabbing order when Shift key is pressed
• Looped tabbing when reaching the last focusable element
• Checkboxes can be checked/unchecked using Enter key

Installation

This library is available through npm:

npm install @fabiocaccamo/tabbo.js

Usage

CDN

<script src=" https://cdn.jsdelivr.net/npm/@fabiocaccamo/tabbo.js/dist/tabbo.min.js"></script>

Local

<script src="node_modules/@fabiocaccamo/tabbo.js/dist/tabbo.min.js"></script>

Node

const tabbo = require("@fabiocaccamo/tabbo.js");

APIs

The only thing you have to do is activate tabbo as soon as possible:

tabbo.activate();

If needed, you can deactivate tabbo at any time:

tabbo.deactivate();

Development

Setup

• git clone https://github.com/fabiocaccamo/tabbo.js.git
• npm install

Watch

• npm run watch

Build

• npm run build

Security

Refer to SECURITY.md

License

Released under MIT License.