@a11y/focus-trap
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.5 • Public • Published

    @a11y/focus-trap

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

    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.

    Install

    npm i @a11y/focus-trap

    DownloadsWeekly Downloads

    9,794

    Version

    1.0.5

    License

    MIT

    Unpacked Size

    26.6 kB

    Total Files

    17

    Last publish

    Collaborators

    • explore