An ember component for trapping focus
npm install ember-focus-trapperember-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.focus-trapper
Take care not to render more than one at any given time... you'll have a bad time.`
{{#focus-trapper disable=false}}
{{/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
------------------------------------------------------------------------------
* git clone cd ember-focus-trapper
* npm install
*
* npm run lint:hbsnpm run lint:js
* npm run lint:js -- --fix
*
* ember test – Runs the test suite on the current Ember versionember test --server
* – Runs the test suite in "watch mode"ember try:each
* – Runs the test suite against multiple Ember versions
* 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.