A11y Tab Trap
Create accessible tab trap.
Getting Started
Install
npm
npm i a11y-tab-trap --save
Yarn
yarn add a11y-tab-trap
Examples
HTML
<button class="btn-open">Open dialog</button>
<article role="dialog" tabindex="-1">
<button class="btn-close">Close dialog</button>
<form action="#" method="get">
<label for="email">Email</label>
<input #id="email" type="email" />
</form>
</article>TypeScript
CreateTapTrap() Fonction
import { createTabTrap } from 'a11y-tab-trap';
let a11yTabTrap;
const openDialog = () => {
const refDialog = document.querySelector('[role="dialog"]');
a11yTabTrap = createTabTrap(refDialog);
};
const closeDialog = () => {
a11yTabTrap?.remove();
};
document.querySelector('.btn-open')
.addEventListener('click', openDialog);
document.querySelector('.btn-close')
.addEventListener('click', closeDialog);A11yTabTrap Class
import { A11yTabTrap } from 'a11y-tab-trap';
const a11yTabTrap = new A11yTabTrap();
const openDialog = () => {
const refDialog = document.querySelector('[role="dialog"]');
a11yTabTrap.set(refDialog);
};
const closeDialog = () => {
a11yTabTrap.remove();
};
document.querySelector('.btn-open')
.addEventListener('click', openDialog);
document.querySelector('.btn-close')
.addEventListener('click', closeDialog);Getter
A11yTabTrap.active
Returns true when the tab-trap is active (before calling the set() method). Returns false when the tab-trap is inactive (after calling the remove() method).
Methods
A11yTabTrap.set(htmlElement, options)
Apply a focus trap on the child element of the htmlElement parameter using the options passed in parameter.
options
| Attribute | Default value | Description |
|---|---|---|
initialFocus?: HtmlElement
|
rootElement | Element that will be focused after calling the set() method. |
finalFocus?: HtmlElement | null
|
document.activeElement |
Element that will be focused after calling the remove() method. |
A11yTabTrap.remove()
Apply focus to the last focused element before calling the set() method and remove event listeners.
A11yTabTrap.destroy()
Remove event listeners.