https://github.com/azinasili/a11ytrap
Keyboard trap for modals and other components
https://github.com/azinasili/a11ytrap
a11y a11ytrap accessibility accessible arrow-keys focus-management keyboard keyboard-trap navigation
Last synced: 6 months ago
JSON representation
Keyboard trap for modals and other components
- Host: GitHub
- URL: https://github.com/azinasili/a11ytrap
- Owner: azinasili
- License: mit
- Created: 2018-03-31T02:40:22.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2022-12-29T11:42:18.000Z (over 3 years ago)
- Last Synced: 2025-10-22T18:42:58.753Z (8 months ago)
- Topics: a11y, a11ytrap, accessibility, accessible, arrow-keys, focus-management, keyboard, keyboard-trap, navigation
- Language: JavaScript
- Size: 352 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# A11yTrap
Trap keyboard navigation within a component. A11yTrap makes it easy to add accessibility support for modals, dropdowns and other web components.
[DEMO](https://codepen.io/azinasili/pen/MVBPxL?editors=1010)
## Installation
With [NPM](https://www.npmjs.com/package/a11ytrap):
```bash
npm install a11ytrap --save
```
With [Bower](https://bower.io/):
```bash
bower install a11ytrap --save
```
Or include A11yTrap directly:
```html
```
## Usage
Import A11yTrap and configure a component (all options with default values are shown).
```javascript
import A11yTrap from 'a11ytrap';
const MyComponent = new A11yTrap('.MyComponent', {
enableArrowKeys: false,
focusOnElement: null,
focusOnFirstElement: false,
focusOnLastElement: false,
});
MyComponent.init();
```
A11yTrap will now handle focus management for your component.
By default A11yTrap will include all focusable elements into it's focus management.
To add a custom element into the trap add `tabindex="0"` or `a11ytrap-element` attribute
to your element's markup.
### Configuration options
#### enableArrowKeys
**Type:** `Boolean` **Default:** `false`
**Usage:** Allow arrow keys to navigate component.
#### focusOnElement
**Type:** `Element` **Default:** `null`
**Usage:** Begin focus management on a specific focusable element in component.
#### focusOnFirstElement
**Type:** `Boolean` **Default:** `false`
**Usage:** Begin focus management on first focusable element of component.
#### focusOnLastElement
**Type:** `Boolean` **Default:** `false`
**Usage:** Begin focus management on last focusable element of component.
*Note: If more than one option is being used A11yTrap will default to focusOnFirstElement.*
### Methods
#### init()
**Usage:** Creates new instance of A11yTrap.
#### destroy()
**Usage:** Kills the instance of A11yTrap.
#### focusElement(index)
**Usage:** Focus on a element within component.
#### focusPrevious()
**Usage:** Focus on previous element.
#### focusNext()
**Usage:** Focus on next element.
## Todo
- [ ] Add tests
- [ ] Properly handle series of radio inputs
- [ ] Fix issue when destroying and re-enabling A11yTrap
- [x] Enable arrow key control
- [x] Enable custom elements
## License
MIT License