{"id":15288420,"url":"https://github.com/chanced/focus-svelte","last_synced_at":"2025-04-13T06:31:56.900Z","repository":{"id":52496719,"uuid":"408243404","full_name":"chanced/focus-svelte","owner":"chanced","description":"focus lock for svelte","archived":false,"fork":false,"pushed_at":"2024-03-20T01:07:08.000Z","size":176,"stargazers_count":30,"open_issues_count":3,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-26T23:04:25.999Z","etag":null,"topics":["accessibility","focus","focus-trap","svelte","svelte-components","sveltejs","sveltekit"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/focus-svelte","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/chanced.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-09-19T21:43:57.000Z","updated_at":"2024-11-11T13:35:54.000Z","dependencies_parsed_at":"2024-06-19T09:33:33.362Z","dependency_job_id":"0b09ba06-e0b9-4263-8599-2e6b8e66dbd1","html_url":"https://github.com/chanced/focus-svelte","commit_stats":{"total_commits":109,"total_committers":2,"mean_commits":54.5,"dds":0.00917431192660545,"last_synced_commit":"86cc70e1ef1ddbbe0c7a472558c4732f4ea528dd"},"previous_names":[],"tags_count":16,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chanced%2Ffocus-svelte","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chanced%2Ffocus-svelte/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chanced%2Ffocus-svelte/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chanced%2Ffocus-svelte/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/chanced","download_url":"https://codeload.github.com/chanced/focus-svelte/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248674649,"owners_count":21143760,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["accessibility","focus","focus-trap","svelte","svelte-components","sveltejs","sveltekit"],"created_at":"2024-09-30T15:48:44.894Z","updated_at":"2025-04-13T06:31:56.796Z","avatar_url":"https://github.com/chanced.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# :mouse_trap: focus-svelte \n\nFocus trap for svelte with zero dependencies.\n\n## Installation\n\n```bash\nnpm install -D focus-svelte\n# yarn add -D focus-svelte\n# pnpm add -D focus-svelte\n```\n\n## Example\n\n[https://svelte.dev/repl/4b31b2f4a45c4ee08230f6d47d31db48](https://svelte.dev/repl/4b31b2f4a45c4ee08230f6d47d31db48?version=3.42.6)\n\n## Description\n\nfocus-svelte works a bit differently than other focus traps I've encounted.\nRather than using an event listener to track user activity and override the\ndefault behavior of the browser, the DOM is manipulated instead. All elements\noutside of an active focus trap's descendants or ancestory have their\n`tabindex` set to `-1` if it was `0` or greater previously.\n\nTo keep track of changes after the trap is enabled, a `MutationObserver` monitors\nthe DOM for updates. Once all focus traps are disabled or removed, the observer\nis stopped and the elements' properties are reset. If a focus trap later becomes active,\nthe observer is restarted and nodes are decorated accordingly.\n\nWhen a trap becomes active for the first time, the `HTMLElement` that is assigned focus is\ndetermined by the configuration options passed to the component or action. \n- If `element` is \nassigned and is tabbable, it will be focused upon. \n- If `element` is `undefined` or not tabbable and `focusable` is `true`, the `HTMLElement` with `use:focus` is granted focus.\n- If neither of the previous conditions are met, focus will be placed on the first tabbable element.\n\n## Usage\n\nThere is both an action and a component that can be utilized.\n\n### Options\n\n| option             | description                                                                                                                                                                                                                                                                     | type                            | default                                    |\n| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------- | ------------------------------------------ |\n| `element`          | If `element` is assigned and is tabbable, it will be focused upon when the trap is enabled. `string` values will be considered a query selector.                                                                                                                                | `Element \\| string`             | `undefined`                                |\n| `focusable`        | The `HTMLElement` the action is assigned to gets a `tabindex` of `0` when the trap becomes active                                                                                                                                                                               | `boolean`                       | `false`                                    |\n| `focusDelay`       | can either be a number of ms to wait or an async function that resolves (`void`) when the focus of an element should be set.                                                                                                                                                    | `number \\| () =\u003e Promise\u003cvoid\u003e` | [`tick`](https://svelte.dev/tutorial/tick) |\n| `delay`            | Determines how long to wait before batching updates to `tabIndex` and `ariaHidden`.                                                                                                                                                                                             | `number \\| () =\u003e Promise\u003cvoid\u003e` | [`tick`](https://svelte.dev/tutorial/tick) |\n| `assignAriaHidden` | When a focus trap becomes enabled and is `true`, all elements outside of an active trap or their ancestory have their [aria-hidden](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-hidden_attribute) attribute set to `\"true\"`. | `boolean`                       | `false`                                    |\n| `preventScroll`    | sets [`preventScroll`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#parameters) when focusing.                                                                                                                                                            | `boolean`                       | `false`                                    |\n| `enabled`          | If `true`, the focus trap becomes active.                                                                                                                                                                                                                                       | `boolean`                       | `false`                                    |\n\n### action\n\n```html\n\u003cscript\u003e\n\timport { focus } from \"focus-svelte\";\n\tlet enabled = true;\n\tfunction toggleFocus() {\n\t\tenabled = !enabled;\n\t}\n\u003c/script\u003e\n\n\u003cbutton on:click=\"{toggleFocus}\"\u003e{enabled ? \"disable\" : \"enable\"} focus\u003c/button\u003e\n\n\u003cdiv use:focus=\"{enabled}\"\u003e\n\t\u003cinput value={enabled ? \"focus is trapped here\" : \"regular tabbable input\"} /\u003e\n\u003c/div\u003e\n\n\u003cinput value={enabled ? \"can't tab here\" : \"can be tabbed into!\"} /\u003e\n```\n\n#### With `assignAriaHidden`\n\n```html\n\u003cscript\u003e\n\timport { focus } from \"focus-svelte\";\n\tlet enabled = true;\n\tfunction toggleFocus() {\n\t\tenabled = !enabled;\n\t}\n\u003c/script\u003e\n\n\u003cbutton on:click=\"{toggleFocus}\"\u003e{enabled ? \"disable\" : \"enable\"} focus\u003c/button\u003e\n\n\u003cdiv use:focus=\"{{enabled, assignAriaHidden: true}}\"\u003e\n\t\u003cinput value={enabled ? \"focus is trapped here\" : \"regular tabbable input\"} /\u003e\n\u003c/div\u003e\n\n\u003cinput value={enabled ? \"can't tab here\" : \"can be tabbed into!\"} /\u003e\n```\n\n### component\n\n```html\n\u003cscript\u003e\n\timport { Focus } from \"focus-svelte\";\n\tlet enabled = true;\n\tfunction toggleFocus() {\n\t\tenabled = !enabled;\n\t}\n\u003c/script\u003e\n\n\u003cbutton on:click=\"{toggleFocus}\"\u003e{enabled ? \"disable\" : \"enable\"} focus\u003c/button\u003e\n\n\u003cFocus {enabled} assignAriaHidden=\"{true}\"\u003e\n\t\u003cinput value={enabled ? \"focus is trapped here\" : \"regular tabbable input\"} /\u003e\n\u003c/Focus\u003e\n\n\u003cinput value={enabled ? \"can't tab here\" : \"can be tabbed into!\"} /\u003e\n```\n\n**Note**: As the action needs an `HTMLElement`, the component version wraps your content with a `div`.\n\n### override\n\nIf you wish to override the behavior of an element, you can set `data-focus-override=\"true\"`\nand it will retain its original tabindex.\n\n## Contributing\n\nPull requests are always welcome.\n\n## License\n\n[MIT](https://choosealicense.com/licenses/mit/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchanced%2Ffocus-svelte","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchanced%2Ffocus-svelte","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchanced%2Ffocus-svelte/lists"}