https://github.com/levimcg/focus-trapper

A Web Component wrapper that makes it easier to manage focus trapping
https://github.com/levimcg/focus-trapper

accessibility keyboard-events webcomponents

Last synced: about 8 hours ago
JSON representation

A Web Component wrapper that makes it easier to manage focus trapping

• Host: GitHub
• URL: https://github.com/levimcg/focus-trapper
• Owner: levimcg
• License: mit
• Created: 2019-05-31T01:47:35.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2024-04-17T19:40:05.000Z (7 months ago)
• Last Synced: 2024-04-17T20:58:48.930Z (7 months ago)
• Topics: accessibility, keyboard-events, webcomponents
• Language: HTML
• Homepage: https://levimcg.github.io/focus-trapper/
• Size: 66.4 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Focus Trapper

A Web Component wrapper that makes it easier to manage focus trapping.

- [🔎 Check out the demo](https://levimcg.github.io/focus-trapper/)

- [📘 Read the blog post](https://levimcg.com/blog/focus-trapping-web-component/)

## About

🚨 A quick note—this is totally experimental and I'd love some [feedback](https://github.com/levimcg/focus-trapper/issues).

One of the challenging things about building accessible UI components in handling keyboard navigation, especially managing focus in components like [modal dialogs](https://www.w3.org/TR/wai-aria-practices-1.1/#dialog_modal). The goal of Focus Trapper is to abstract some of that functionality into a declarative, easy-to-use Web Component.

## Getting started

Import `FocusTrapper.js` into your project and register it as a `customElement`;

Focus trapper is available on [npm](https://www.npmjs.com/package/focus-trapper) or you can import it from [jsDelivr](https://www.jsdelivr.com/package/npm/focus-trapper) if you just want to try it out in a script tag.

```html

  import FocusTrapper from 'https://cdn.jsdelivr.net/npm/[email protected]/src/FocusTrapper.js';

  

  // Define the <focus-trapper></focus-trapper> custom element

  customElements.define('focus-trapper', FocusTrapper);

```

After you have defined the `` custom element you should be able to use it in your HTML.

```html

  Button one

  Button two

  Button three

```

By default the `focus-trapper` custom element won't do anything. To make it trap focus you'll need to add the `trapped` attribute. Once the `trapped` attribute is set in your markup, or the `trapped` property is set programmatically on an instance of an `focus-trapper` element, you'll be able to tab into the focusable content inside, but focus will always be moved from the last focusable element to the first and vice versa.

```html

  Button one

  Button two

  Button three

```

## Inspiration

The idea for this focus trapper component was inspired by the [FocusTrapZone](https://developer.microsoft.com/en-us/fabric#/controls/web/focustrapzone) React component in the the [Microsoft Fabric](https://developer.microsoft.com/en-us/fabric#/) design system.

## Known issues

🐛 So far these are the bugs I can find.

- Using radio buttons breaks the focus trap if you tab through a set of them without making a selection.