ember-focus-trapper

This is an ember addon for trapping keyboard focus.

Installation

ember install ember-focus-trapper

Usage

This is a block-only component, intended to be wrapped around a chunk of html that includes focusable elements. As soon as the focus-trapper is rendered, it will only allow focusable elements within the yielded block to be focused. Take care not to render more than one focus-trapper at any given time... you'll have a bad time.

{{#focus-trapper disable=false}}
  <form action="">
    <label>You must fill out this input field: <input type="text"></label>
    <label>And this input field: <input type="text"></label>
  </form>
{{/focus-trapper}}

Options

• disable (boolean, defaults to false) : When disable=true all focus management behavior is disabled.
• cycle (boolean, defaults to false) : When cycle=true, focus-trapper will cycle focus to the first focusable element when tabbing from the last focusable element, and will cycle focus to the last focusable element when shift-tabbing from the first focusable element. When cycle=false, tabbing from the last focusable element keeps focus on that element, and shift-tabbing from the first focusable element keeps focus on that element.

Things to be aware of

• Provide an escape:

Whenever you use the focus-trapper, be sure there is some button or action that the user can trigger from within the focus trapper to escape.

• Returning focus:

Once the focus-trapper becomes disabled or is removed from the page, be sure to return the user's focus to where ever it was previously (ex. when closing a modal containing a focus trapper, the user's focus should be returned to the button they clicked to open the modal)

• Use one, and only one, focus-trapper at a time.:

Using multiple focus trappers at the same time is not supported and will cause bad things to happen. Don't do it. If you absolutely can't avoid it, at least make sure to set disabled=true on every focus-trapper except for one.

Contributing

Installation

• git clone <repository-url>
• cd ember-focus-trapper
• npm install

Linting

• npm run lint:hbs
• npm run lint:js
• npm run lint:js -- --fix

Running tests

• ember test – Runs the test suite on the current Ember version
• ember test --server – Runs the test suite in "watch mode"
• ember try:each – Runs the test suite against multiple Ember versions

Running the dummy application

• ember serve
• Visit the dummy application at http://localhost:4200.

For more information on using ember-cli, visit https://ember-cli.com/.

License

This project is licensed under the MIT License.