ember-trap-focus

Traps focus within itself. You can navigate child focusable elements with up, down, tab, shift + tab, alt + tab. I have attempted to match the accesibility best practices listed here.

This could be useful if you wanted to trap focus within something like a modal. When you gotta... focus-trap and focus-wrap.

Does not auto focus the first item.
- Scope this auto-focus modifier out if you need that.
When pressing down or tab:
- When the known focusables are not focused, gives focus to the first item.
- If focus is on the last known focusable, it gives focus to the first item.
- Gives focus to the next item.
When pressing up or shift+tab or alt+tab:
- When the known focusables are not focused, gives focus to the last item.
- If focus is on the first known focuable, it gives focus to the last item.
- Gives focus to the previous item.
When pressing home:
- Gives focus to the first item.
When pressing end:
- Gives focus to the last item.
Attempts to skip hidden items and items with display none of tabindex="-1".
Accepts splattributes.

Checkout the DEMO

Very similar to : https://github.com/josemarluedke/ember-focus-trap except that they depend on focus-trap which is a deprecated and known to be janky library, and they expose a modifier.

Todo: We should also expose a modifier instead of a component.

Compatibility

Ember.js v3.13 or above (octane baby!)

Installation

ember install ember-trap-focus

Usage

<FocusTrap
  {{!-- accepts splattributes --}}
>
  <input>
  <button>
  ...etc
</FocusTrap>

To check out the selectors we use to determine what is focusable scope the util: focusable-elements

Contributing

See the Contributing guide for details.

License