A lightweight web component to trap focus within a DOM node.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
assets
readme
src
.browserslistrc
.gitignore
CODE_OF_CONDUCT.md
CONTRIBUTING.md
LICENSE.md
README.md
karma.conf.js
package.json
pre-build.js
rollup.config.js
tsconfig.build.json
tsconfig.json
tslint.json
typings.d.ts

README.md

@appnest/focus-trap

Downloads per month NPM Version Dependencies Contributors Published on webcomponents.org

A lightweight web component to trap 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!

split

❯ Installation

npm i @appnest/focus-trap

split

❯ Usage

Import @appnest/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>

split

❯ 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.
  getFocusableChildren: (() => HTMLElement[]);
}

split

❯ License

Licensed under MIT.