A simple, framework-agnostic accessiblity tool for managing HTML element tabindices
npm install tabbleVisit the hosted demo page. For more info, please see the demo readme.
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:
tabble.restore()npm testnpx playwright testnpx eslint .