Skip to content
A Ember modifier to trap your focus.
Branch: master
Clone or download
Latest commit 5cd9d52 May 12, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github 📺 Remove an extra line from release drafter template May 12, 2019
addon
app ⚡️ Implement focus-trap modifier May 11, 2019
config 📺 Configure git repo as ssh for deploy May 12, 2019
tests 🔤 Add documentation and example for shouldSelfFocus May 12, 2019
vendor Initial Commit from Ember CLI v3.9.0 May 11, 2019
.editorconfig Initial Commit from Ember CLI v3.9.0 May 11, 2019
.ember-cli Initial Commit from Ember CLI v3.9.0 May 11, 2019
.eslintignore
.eslintrc.js 📺 Add babel-eslint for parsing eslint May 11, 2019
.gitignore Initial Commit from Ember CLI v3.9.0 May 11, 2019
.npmignore 📺 Add a few more files to npmignore May 12, 2019
.prettierrc.js
.template-lintrc.js 📺 Remove lint test generators May 11, 2019
.travis.yml 📺 Remove deploy with travis May 12, 2019
.watchmanconfig Initial Commit from Ember CLI v3.9.0 May 11, 2019
CHANGELOG.md 🔤 Add changelog for v0.2.0 May 12, 2019
CONTRIBUTING.md 🔤 Initial pass at README May 11, 2019
LICENSE.md Initial Commit from Ember CLI v3.9.0 May 11, 2019
README.md
ember-cli-build.js Initial Commit from Ember CLI v3.9.0 May 11, 2019
index.js Initial Commit from Ember CLI v3.9.0 May 11, 2019
jsconfig.json ⚡️ Setup prettier with ESLint May 11, 2019
package.json v0.2.0 May 12, 2019
testem.js ⚡️ Setup prettier with ESLint May 11, 2019
yarn.lock 📺 Add babel-eslint for parsing eslint May 11, 2019

README.md

Build Status Ember Observer Score NPM version

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 v2.18 or above
  • Ember CLI v2.13 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>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 id="initial-focusee">Some button</button>
  </p>
</div>

Contributing

See the Contributing guide for details.

License

This project is licensed under the MIT License.

You can’t perform that action at this time.