Skip to content

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

License

Notifications You must be signed in to change notification settings

fabiocaccamo/tabbo.js

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

18 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

tabbo.js

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

Table of contents

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.