# a11ytrap

> A proper accessible focus management for components.

Latest version **1.0.2** (published 2018-11-04) · MIT license · 0 weekly downloads

## Install

```sh
npm install a11ytrap
pnpm add a11ytrap
yarn add a11ytrap
bun add a11ytrap
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2018-11-04 |
| First published | 2018-04-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 17.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Azin Asili |
| Maintainers | azinasili |
| Keywords | a11ytrap, a11y, accessible, accessibility, keyboard, navigation, focus management |

## Links

- npm: https://www.npmjs.com/package/a11ytrap
- Repository: https://github.com/azinasili/a11ytrap
- Issues: https://github.com/azinasili/a11ytrap/issues
- npm.io page: https://npm.io/package/a11ytrap

## Alternatives

- [express-promise-router](https://npm.io/package/express-promise-router.md) — 736.1K weekly downloads
- [next-usequerystate](https://npm.io/package/next-usequerystate.md) — 29.8K weekly downloads
- [@bitkyc08/opencodex](https://npm.io/package/@bitkyc08/opencodex.md) — 4.6K weekly downloads
- [lynkr](https://npm.io/package/lynkr.md) — 575 weekly downloads
- [baremetal.js](https://npm.io/package/baremetal.js.md) — 42 weekly downloads

## Recent versions

- 1.0.2 (latest) — 2018-11-04
- 1.0.1 — 2018-04-04
- 1.0.0 — 2018-04-04

## 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
<script src="/path/to/a11ytrap.js"></script>
```


## 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

---
_Source: https://npm.io/package/a11ytrap · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._