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/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/shift+tab/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.
• 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

This project is licensed under the MIT License.