Package Exports

@a11y/focus-trap
@a11y/focus-trap/debounce

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@a11y/focus-trap) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

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!

➤ Installation

npm i @a11y/focus-trap

➤ 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.

<focus-trap>
  <button>Focus 1</button>
  <button>Focus 2</button>
  <button>Focus 3</button>
  <button>Focus 4</button>
  <button>Focus 5</button>
</focus-trap>

➤ API

The focus-trap element implements the following interface.

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[]);
}

➤ License

Licensed under MIT.