@appnest/focus-trap

A lightweight web component to trap focus within a DOM node

@appnest/focus-trap has moved to @a11y/focus-trap. Please uninstall this package and install @a11y/focus-trap instead.
Last updated a year ago by explore .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install @appnest/focus-trap 
SYNC missed versions from official npm registry.

@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!

-----------------------------------------------------

➤ Installation

npm i @appnest/focus-trap

-----------------------------------------------------

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

-----------------------------------------------------

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

Current Tags

  • 1.0.0                                ...           latest (a year ago)

25 Versions

  • 1.0.0 [deprecated]           ...           a year ago
  • 0.0.27 [deprecated]           ...           a year ago
  • 0.0.26 [deprecated]           ...           a year ago
  • 0.0.25 [deprecated]           ...           a year ago
  • 0.0.24 [deprecated]           ...           a year ago
  • 0.0.23 [deprecated]           ...           a year ago
  • 0.0.22 [deprecated]           ...           a year ago
  • 0.0.21 [deprecated]           ...           a year ago
  • 0.0.20 [deprecated]           ...           a year ago
  • 0.0.19 [deprecated]           ...           a year ago
  • 0.0.18 [deprecated]           ...           a year ago
  • 0.0.17 [deprecated]           ...           a year ago
  • 0.0.16 [deprecated]           ...           a year ago
  • 0.0.15 [deprecated]           ...           a year ago
  • 0.0.14 [deprecated]           ...           a year ago
  • 0.0.13 [deprecated]           ...           a year ago
  • 0.0.12 [deprecated]           ...           a year ago
  • 0.0.11 [deprecated]           ...           a year ago
  • 0.0.10 [deprecated]           ...           a year ago
  • 0.0.9 [deprecated]           ...           a year ago
  • 0.0.8 [deprecated]           ...           a year ago
  • 0.0.7 [deprecated]           ...           a year ago
  • 0.0.6 [deprecated]           ...           a year ago
  • 0.0.5 [deprecated]           ...           a year ago
  • 0.0.4 [deprecated]           ...           a year ago
Maintainers (2)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 0
Dependencies (0)
None
Dev Dependencies (2)
Dependents (1)

Copyright 2014 - 2016 © taobao.org |