https://github.com/henrygd/trap-focus-svelte

Tiny focus trap. Supports stacking, toggling, and dynamic content. Compatible with any framework. 360 bytes gzip.
https://github.com/henrygd/trap-focus-svelte

a11y accessibility focus focus-lock focus-trap svelte

Last synced: 3 months ago
JSON representation

Tiny focus trap. Supports stacking, toggling, and dynamic content. Compatible with any framework. 360 bytes gzip.

• Host: GitHub
• URL: https://github.com/henrygd/trap-focus-svelte
• Owner: henrygd
• License: mit
• Created: 2023-02-04T22:21:07.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2024-06-07T19:13:02.000Z (8 months ago)
• Last Synced: 2024-08-10T11:08:21.848Z (6 months ago)
• Topics: a11y, accessibility, focus, focus-lock, focus-trap, svelte
• Language: TypeScript
• Homepage: https://trap-focus-svelte.henrygd.me/
• Size: 125 KB
• Stars: 6
• Watchers: 1
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: readme.md
  • License: license

Awesome Lists containing this project

README

        
[npm-image]: https://flat.badgen.net/npm/v/trap-focus-svelte?color=blue

[npm-url]: https://www.npmjs.com/package/trap-focus-svelte

[size-image]: https://flat.badgen.net/static/gzip%20size/358%20bytes/green

[license-image]: https://flat.badgen.net/github/license/henrygd/trap-focus-svelte?color=purple

[license-url]: /license

# trap-focus-svelte

[![npm][npm-image]][npm-url] ![File Size][size-image] [![MIT license][license-image]][license-url]

Small 0.4kB focus trap that supports stacking, toggling, and dynamic content. Designed for Svelte but compatible with plain JavaScript or any framework.

Demo: https://trap-focus-svelte.henrygd.me

Svelte example: https://stackblitz.com/edit/vitejs-vite-k328kh?file=src/App.svelte

Vanilla example with TypeScript: https://stackblitz.com/edit/vitejs-vite-sesxte?file=src/main.ts

## Installation

```bash

pnpm install trap-focus-svelte

```

## Usage with Svelte

Add directly to an element as an action.

If the element is removed, the trap and event listeners are destroyed automatically.

```html

	import { trapFocus } from 'trap-focus-svelte'



	Inside trap

	Inside trap



Outside trap

```


You can also toggle the trap on they fly:

```html

	import { trapFocus } from 'trap-focus-svelte'

	let active = true

	const toggleTrap = () => (active = !active)



	Toggle trap

	Inside trap



Outside trap

```


## Usage with vanilla JavaScript or other frameworks

Import from `trap-focus-svelte/vanilla`

For an example of the demo site made without Svelte (with TypeScript / Vite) see [this StackBlitz](https://stackblitz.com/edit/vitejs-vite-sesxte?file=src/main.ts).

```html



	Inside trap

	Inside trap



Outside trap

```


```js

import { trapFocus } from 'trap-focus-svelte/vanilla'

const buttons = document.getElementById('buttons')

// create trap (pass false as a second argument to start disabled)

const buttonTrap = trapFocus(buttons)

// toggle trap

buttonTrap.update(false)

// destory trap

buttonTrap.destroy()

```

## Notes

If you have multiple traps active at the same time, the focus will be within the latest trap created or activated.

When that trap is destroyed or deactivated, the focus will work backwards down the chain, eventually restoring focus to the [`document.activeElement`](https://developer.mozilla.org/en-US/docs/Web/API/Document/activeElement) at the time of the oldest trap's activation.

## License

MIT