A11y Tab Trap

Create accessible tab trap.

Getting Started

1. Install
2. Examples
3. Methods

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.