ember-focus-trap

Ember Focus Trap: A Ember modifier to trap your focus.

View the docs here.

We use focus-trap as a lower-level implementation. It is super lightweight and has minimal dependencies.

Trap focus within a DOM node.

There may come a time when you find it important to trap focus within a DOM node — so that when a user hits Tab or Shift+Tab or clicks around, she can"t escape a certain cycle of focusable elements.

Please read the focus-trap documentation to understand what a focus trap is, what happens when a focus trap is activated, and what happens when one is deactivated.

Compatibility

• Ember.js v3.16 or above (Ember v4 compatible)
• Ember CLI v3.20 or above
• Node.js v12 or above

Installation

ember install ember-focus-trap

Usage

See demos and read the documentation here.

<div {{focus-trap}}>
  <p>
    Here is a focus trap
    <a href="#">with</a>
    <a href="#">some</a>
    <a href="#">focusable</a>
    parts.
  </p>
  <p>
    <button type="button">Some button</button>
  </p>
</div>

With Focus Trap Options

<div
  {{focus-trap
    focusTrapOptions=(hash
      onDeactivate=(action this.myFunction)
      initialFocus="#initial-focusee"
    )
  }}
>
  <p>
    Here is a focus trap
    <a href="#">with</a>
    <a href="#">some</a>
    <a href="#">focusable</a>
    parts.
  </p>
  <p>
    <button type="button" id="initial-focusee">Some button</button>
  </p>
</div>

Contributing

See the Contributing guide for details.

License

This project is licensed under the MIT License.