svelte-focus-trap Svelte Themes

Svelte Focus Trap

Svelte directive that will trap focus within itself. Useful for modals or other places you want focus to trap and wrap.

svelte-focus-trap

A svelte directive that will trap focus within an element. 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.
  • 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".

Todos:

  • Demo
  • Tests + Ci

Installation

npm install --save-dev svelte-focus-trap

Usage

<script>
  import { focusTrap } from 'svelte-focus-trap'
</script>

{#if showing}
  <div
    use:focusTrap
  > 
    <!-- ...modal contents -->
  </div>
{/if}

License

This project is licensed under the MIT License.

Top categories

svelte logo

Need a Svelte website built?

Hire a professional Svelte developer today.
Loading Svelte Themes