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 v4.16 or above
• Embroider or ember-auto-import v2
• Node.js v20 or above

Installation

pnpm add ember-focus-trap

or

npm install ember-focus-trap

Usage

See demos and read the documentation here.

Import the modifier and use it in your components:

import { focusTrap } from 'ember-focus-trap';

<template>
  <div {{focusTrap}}>
    <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>
</template>

With Focus Trap Options

import { focusTrap } from 'ember-focus-trap';
import { hash } from '@ember/helper';

<template>
  <div
    {{focusTrap
      focusTrapOptions=(hash
        onDeactivate=@onDeactivate
        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>
</template>

Contributing

See the Contributing guide for details.

License

This project is licensed under the MIT License.