{"id":13635213,"url":"https://github.com/vue-a11y/vue-focus-loop","last_synced_at":"2025-04-13T08:24:40.260Z","repository":{"id":43679027,"uuid":"282885703","full_name":"vue-a11y/vue-focus-loop","owner":"vue-a11y","description":"Vue component that helps you to to trap focus in an element.","archived":false,"fork":false,"pushed_at":"2024-10-02T00:57:42.000Z","size":1751,"stargazers_count":24,"open_issues_count":1,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-10-29T20:25:24.641Z","etag":null,"topics":["a11y","accessibility","focus","focus-loop","focus-trap","hacktoberfest","tabbable","vue-a11y","vuejs"],"latest_commit_sha":null,"homepage":"http://vue-focus-loop.surge.sh/","language":"JavaScript","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/vue-a11y.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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},"funding":{"open_collective":"vue-a11y"}},"created_at":"2020-07-27T12:05:12.000Z","updated_at":"2024-10-02T00:57:46.000Z","dependencies_parsed_at":"2024-11-06T03:34:39.652Z","dependency_job_id":"d4e1e863-f99f-45ff-88ad-6f9475e5f655","html_url":"https://github.com/vue-a11y/vue-focus-loop","commit_stats":{"total_commits":33,"total_committers":2,"mean_commits":16.5,"dds":"0.030303030303030276","last_synced_commit":"17c7f4794ab8e277324a9f5407d072ff836b1d34"},"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vue-a11y%2Fvue-focus-loop","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vue-a11y%2Fvue-focus-loop/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vue-a11y%2Fvue-focus-loop/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vue-a11y%2Fvue-focus-loop/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vue-a11y","download_url":"https://codeload.github.com/vue-a11y/vue-focus-loop/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248652094,"owners_count":21139948,"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":["a11y","accessibility","focus","focus-loop","focus-trap","hacktoberfest","tabbable","vue-a11y","vuejs"],"created_at":"2024-08-02T00:00:42.542Z","updated_at":"2025-04-13T08:24:40.228Z","avatar_url":"https://github.com/vue-a11y.png","language":"JavaScript","funding_links":["https://opencollective.com/vue-a11y"],"categories":["Components and plugins"],"sub_categories":["Courses"],"readme":"# [@vue-a11y/focus-loop](https://focus-loop.vue-a11y.com)\n\n---\n🔥 HEADS UP! You are in the Vue 2 compatible branch, [check the \"next\" branch for Vue3 support](https://github.com/vue-a11y/vue-focus-loop/tree/next).\n\n---\n## Introduction\n\nVue component that helps you to to trap focus in an element.\n\nWhen developing accessible components, in certain behaviors it is important to trap focus on the element.\n\nFor example, when opening a modal, it is recommended that the focus is only on the tabbable elements of that modal and only release the focus, when the modal is closed.\n\n- Focus is trapped: Tab and Shift+Tab will cycle through the focusable nodes within `\u003cFocusLoop\u003e` without returning to the main document below;\n- Automatic focus on the first focusable element, with the option to disable;\n- Restoring focus to the last activeElement;\n- Hides the document from screen readers when `\u003cfocusLoop\u003e` is visible and enabled.\n\n## Installation\n\nAdd `@vue-a11y/focus-loop` in your Vue project.\n\n```sh\nnpm install -S @vue-a11y/focus-loop\n# or\nyarn add @vue-a11y/focus-loop\n```\n\nOr via CDN\n\n```html\n\u003cscript src=\"http://unpkg.com/@vue-a11y/focus-loop\"\u003e\u003c/script\u003e\n```\n\n## Usage\n\nYou can use it globally in your main.js.\n\n```js\nimport Vue from 'vue'\nimport VueFocusLoop from '@vue-a11y/focus-loop'\n\nVue.use(VueFocusLoop)\n```\n\nOr you can import into your component.\n\n```js\nimport { FocusLoop } from '@vue-a11y/focus-loop'\n\nexport default {\n  components: {\n    FocusLoop\n  }\n}\n```\n\n**Example** of use on your single file component.\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003cb-button v-b-modal.modal-1\u003eLaunch demo modal\u003c/b-button\u003e\n\n    \u003cb-modal id=\"modal-1\" title=\"BootstrapVue\"\u003e\n      \u003cFocusLoop :is-visible=\"isOpen\"\u003e\n        \u003cb-form @submit=\"onSubmit\" @reset=\"onReset\" v-if=\"show\"\u003e\n          \u003cb-form-group id=\"input-group-2\" label=\"Your Name:\" label-for=\"input-1\"\u003e\n            \u003cb-form-input\n              id=\"input-1\"\n              v-model=\"form.name\"\n              required\n              placeholder=\"Enter name\"\n            \u003e\u003c/b-form-input\u003e\n          \u003c/b-form-group\u003e\n\n          \u003cb-form-group id=\"input-group-2\" label=\"Your Email:\" label-for=\"input-2\"\u003e\n            \u003cb-form-input\n              id=\"input-2\"\n              type=\"email\"\n              v-model=\"form.email\"\n              required\n              placeholder=\"Enter email\" \n            \u003e\u003c/b-form-input\u003e\n          \u003c/b-form-group\u003e\n\n          \u003cb-button type=\"submit\" variant=\"primary\"\u003eSubmit\u003c/b-button\u003e\n          \u003cb-button type=\"reset\" variant=\"danger\"\u003eReset\u003c/b-button\u003e\n        \u003c/b-form\u003e\n      \u003c/FocusLoop\u003e\n    \u003c/b-modal\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n```\n\n## Make the focus-loop container visible and rendered\n\nprop       | type      | default\n---------- | --------- | ------------\nisVisible  | `Boolean` | `false`\n\n```html\n\u003cFocusLoop :is-visible=\"isOpen\"\u003e\n  \u003c!-- your elements here --\u003e\n\u003c/FocusLoop\u003e\n```\n\n## Disable loop\n\nYou can disable the focus trap and activate it only when you really need it.\n\nprop       | type      | default\n---------- | --------- | ------------\ndisabled   | `Boolean` | `false`\n\nFor example:\n\n```html\n\u003cFocusLoop :is-visible=\"isOpen\" disabled\u003e\n  \u003c!-- your elements here --\u003e\n\u003c/FocusLoop\u003e\n```\n\n## Disable autofocus on the first element\n\nWhen activating the `\u003cFocusLoop\u003e`, the first element receives the focus automatically, however, if you want to disable this behavior, just disable it through the `autoFocus` prop.\n\nprop        | type      | default\n----------- | --------- | ------------\nautoFocus   | `Boolean` | `true`\n\nFor example:\n\n```html\n\u003cFocusLoop :is-visible=\"isOpen\" :auto-focus=\"false\"\u003e\n  \u003c!-- your elements here --\u003e\n\u003c/FocusLoop\u003e\n```\n\n## Keyboard support\n\nKeyboard users will use `Tab` and `Shift + Tab` to navigate tabbable elements.  \n\nAccording to the Modal Dialog Example in WAI-ARIA Authoring Practices specification, when the focus is on the last focusable element, you must move the focus to the first element and vice versa.\n\nKey          | Function\n------------ | ------------\nTab          | ▸ Moves focus to next focusable element inside the dialog.  \u003cbr\u003e ▸ When focus is on the last focusable element in the dialog, moves focus to the first focusable element in the dialog.\nShift + Tab  | ▸ Moves focus to previous focusable element inside the dialog.  \u003cbr\u003e ▸ When focus is on the first focusable element in the dialog, moves focus to the last focusable element in the dialog.\n\n## Links\n- [Demo](https://vue-focus-loop.surge.sh)\n\n## Articles that served as inspiration:\n- [Using JavaScript to trap focus in an element](https://hiddedevries.nl/en/blog/2017-01-29-using-javascript-to-trap-focus-in-an-element)\n\n## Other options\n- [focus-trap](https://github.com/davidtheclark/focus-trap)\n- [vue-focus-lock](https://github.com/theKashey/vue-focus-lock)\n\n## Contributing\n- From typos in documentation to coding new features;\n- Check the open issues or open a new issue to start a discussion around your feature idea or the bug you found;\n- Fork repository, make changes and send a pull request;\n\nFollow us on Twitter [@vue_a11y](https://twitter.com/vue_a11y)\n\n**Thank you**","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvue-a11y%2Fvue-focus-loop","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvue-a11y%2Fvue-focus-loop","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvue-a11y%2Fvue-focus-loop/lists"}