{"id":13635250,"url":"https://github.com/theKashey/vue-focus-lock","last_synced_at":"2025-04-19T03:34:40.859Z","repository":{"id":45341483,"uuid":"102167782","full_name":"theKashey/vue-focus-lock","owner":"theKashey","description":"It is a trap! A lock for a Focus. A11y util for scoping a focus.","archived":false,"fork":false,"pushed_at":"2025-01-04T02:13:46.000Z","size":932,"stargazers_count":140,"open_issues_count":8,"forks_count":14,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-03-29T18:02:41.441Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"Vue","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/theKashey.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":"2017-09-02T02:38:19.000Z","updated_at":"2025-02-11T13:18:27.000Z","dependencies_parsed_at":"2024-01-22T19:33:03.330Z","dependency_job_id":"e7813a06-7a16-4032-b3a3-e38ec58fef66","html_url":"https://github.com/theKashey/vue-focus-lock","commit_stats":null,"previous_names":[],"tags_count":17,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theKashey%2Fvue-focus-lock","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theKashey%2Fvue-focus-lock/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theKashey%2Fvue-focus-lock/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/theKashey%2Fvue-focus-lock/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/theKashey","download_url":"https://codeload.github.com/theKashey/vue-focus-lock/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249600542,"owners_count":21297712,"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":[],"created_at":"2024-08-02T00:00:43.012Z","updated_at":"2025-04-19T03:34:40.589Z","avatar_url":"https://github.com/theKashey.png","language":"Vue","funding_links":[],"categories":["awesome-vue [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)","Projects Using Vue.js","Awesome Vue.js [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg) ★101652](https://github.com/sindresorhus/awesome)","A11y [🔝](#readme)","Awesome Vue.js [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)","Components and plugins"],"sub_categories":["A11y","Courses"],"readme":"# vue-focus-lock\nIt is a trap! We got your focus and will not let him out!\n\n[![NPM](https://nodei.co/npm/vue-focus-lock.png?downloads=true\u0026stars=true)](https://nodei.co/npm/vue-focus-lock/)\n\n----\n\n- __Vue3 users__ - use v3+ `vue-focus-lock@3`\n- __Vue2 users__ - use v2+ `vue-focus-lock@2`\n\n----\n\nThis is a small, but very useful for:\n - Modal dialogs. You can not leave it with \"Tab\", ie tab-out.\n - Focused tasks. It will always brings you back.\n \nYou have to use it in _every_ modal dialog, or you `a11y` will be shitty.\n \n# How to use\nJust wrap something with focus lock, and focus will be `moved inside` on mount.\n```html\n\u003cFocusLock\u003e\n You can not leave this form\n \u003cbutton @click=\"onClick\" /\u003e\n\u003c/FocusLock\u003e \n```\n Demo - https://codesandbox.io/s/l5qlpxqvnq\n\n# WHY?\nFrom [MDN Article about accessible dialogs](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_dialog_role):\n - The dialog must be properly labeled\n - Keyboard __focus must be managed__ correctly\n \nThis one is about managing the focus.\n\nI'v got a good [article about focus management, dialogs and  WAI-ARIA](https://medium.com/@antonkorzunov/its-a-focus-trap-699a04d66fb5).    \n\n\n# Behavior\n 0. It will always keep focus inside Lock.\n 1. It will cycle forward then you press Tab.\n 2. It will cycle in reverse direction on Shift+Tab.\n 3. It will do it using _browser_ tools, not emulation.\n 4. It will handle positive tabIndex inside form.\n 5. It will prevent any jump outside, returning focus to the last element.\n \n !! this realisation will not return focus  to the original place on Unlock !! \n\nYou can use nested Locks or have more than one Lock on the page.\nOnly `last`, or `deepest` one will work. No fighting.\n\n# API\n FocusLock has few props to tune behavior, all props are optional:\n  - `disabled`, to disable(enable) behavior without altering the tree.\n  - `group=''`, named focus group for focus scattering aka [combined lock targets](https://github.com/theKashey/vue-focus-lock/issues/2).\n  - `noFocusGuards=false`, disable focus guards - virtual inputs which secure tab index.\n\n#### Removing Tailing Guard\n  FocusLock is adding `Focus Guards` before and after lock to remove some side effects, like page scrolling. \n  If you want to allow user _tab_ into address bar (only if your modal is the last tabbable element on the body), \n  you might remove the Tailing Guard. To do this, set `noFocusGuards` prop to `tail`.\n```html\n\u003cFocusLock no-focus-guards=\"tail\"\u003e\n    ...\n\u003c/FocusLock\u003e \n```\n\n# How it works\n Everything thing is simple - vue-focus-lock just dont left focus left boundaries of component, and\n do something only if escape attempt was succeeded.\n \n It is not altering tabbing behavior at all. We are good citizens.\n\n# Licence\n MIT\n \n \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FtheKashey%2Fvue-focus-lock","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FtheKashey%2Fvue-focus-lock","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FtheKashey%2Fvue-focus-lock/lists"}