https://github.com/andreasbm/focus-trap

A lightweight web component that traps focus within a DOM node
https://github.com/andreasbm/focus-trap

acessibility custom-elements dialog focus focus-trap shadow-dom shadow-root web-components

Last synced: 3 days ago
JSON representation

A lightweight web component that traps focus within a DOM node

• Host: GitHub
• URL: https://github.com/andreasbm/focus-trap
• Owner: andreasbm
• License: mit
• Created: 2019-02-03T21:39:28.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2022-09-30T14:40:28.000Z (about 2 years ago)
• Last Synced: 2024-10-23T20:44:32.401Z (11 days ago)
• Topics: acessibility, custom-elements, dialog, focus, focus-trap, shadow-dom, shadow-root, web-components
• Language: TypeScript
• Homepage: https://appnest-demo.firebaseapp.com/focus-trap/
• Size: 3.11 MB
• Stars: 52
• Watchers: 4
• Forks: 10
• Open Issues: 18
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE.md
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

        
@a11y/focus-trap




		









	




  A lightweight web component that traps focus within a DOM node

  A focus trap ensures that tab and shift + tab keys will cycle through the focus trap's tabbable elements but not leave the focus trap. This is great for making accessible modals. Go here to see a demo https://appnest-demo.firebaseapp.com/focus-trap/.








	



* Does one things very very well - it traps the focus!

* Pierces through the shadow roots when looking for focusable elements.

* Works right out of the box (just add it to your markup)

* Created using only vanilla js - no dependencies and framework agnostic!

[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/rainbow.png)](#installation)

## ➤ Installation

```javascript

npm i @a11y/focus-trap

```

[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/rainbow.png)](#usage)

## ➤ Usage

Import `@a11y/focus-trap` somewhere in your code and you're ready to go! Simply add the focus trap to your `html` and it'll be working without any more effort from your part.

```html

  Focus 1

  Focus 2

  Focus 3

  Focus 4

  Focus 5

```

[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/rainbow.png)](#api)

## ➤ API

The `focus-trap` element implements the following interface.

```typescript

interface IFocusTrap {

  // Returns whether or not the focus trap is inactive.

  inactive: boolean;

  // Returns whether the focus trap currently has focus.

  readonly focused: boolean;

  // Focuses the first focusable element in the focus trap.

  focusFirstElement: (() => void);

  // Focuses the last focusable element in the focus trap.

  focusLastElement: (() => void);

  // Returns a list of the focusable children found within the element.

  getFocusableElements: (() => HTMLElement[]);

}

```

[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/rainbow.png)](#license)

## ➤ License

	

Licensed under [MIT](https://opensource.org/licenses/MIT).