Tabble NPM | npm.io

Tabble

A simple, framework-agnostic accessiblity tool for managing HTML element tabindices

Install

npm install tabble

Try the demo

Visit the hosted demo page. For more info, please see the demo readme.

Usage Example:

Given a document:

<html lang="en">
  <body>
    <main>
      <section class="page">
        <a href="#">Link</a>
        <textarea></textarea>
        <button>Submit</button>
      </section>
      <section class="overlay">
        <input>
        <button>Submit</button>
      </section>
    </main>
  </body>
</html>

Create an instance with configuration:

import Tabble from 'tabble'

const page = document.querySelector('.page')
const config = {
  disable: ['.page *'],
  ignore: ['.overlay *']
}

const tabble = new Tabble(page, config)

Record the document's tabindex properties:

tabble.record()

Disable specificied selectors:

tabble.disable()

Changes the tabindex of each matching element that does not match ignored elements:

<html>
  <body>
    <main>
      <section class="page">
        <a tabindex="-1" href="#">Link</a>
        <textarea tabindex="-1"></textarea>
        <button tabindex="-1">Submit</button>
      </section>
      <section class="overlay">
        <input>
        <button>Submit</button>
      </section>
    </main>
  </body>
</html>

Restore the document back to its original state: