{"id":23582467,"url":"https://github.com/fork/vue-roving-tabindex","last_synced_at":"2025-05-06T23:44:28.212Z","repository":{"id":35853964,"uuid":"219784159","full_name":"fork/vue-roving-tabindex","owner":"fork","description":"Add a roving tabindex to a Vue component","archived":false,"fork":false,"pushed_at":"2024-01-04T10:13:35.000Z","size":171,"stargazers_count":16,"open_issues_count":7,"forks_count":6,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-05-04T11:49:58.128Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/fork.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}},"created_at":"2019-11-05T15:53:40.000Z","updated_at":"2025-04-09T10:14:59.000Z","dependencies_parsed_at":"2024-06-19T11:18:11.433Z","dependency_job_id":"c573dd23-81a9-466d-89e8-cc3414e69f6b","html_url":"https://github.com/fork/vue-roving-tabindex","commit_stats":{"total_commits":7,"total_committers":3,"mean_commits":"2.3333333333333335","dds":0.4285714285714286,"last_synced_commit":"b3962e0053d20c5a2a68302eadf52f20ff3663bc"},"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fork%2Fvue-roving-tabindex","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fork%2Fvue-roving-tabindex/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fork%2Fvue-roving-tabindex/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fork%2Fvue-roving-tabindex/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fork","download_url":"https://codeload.github.com/fork/vue-roving-tabindex/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252788404,"owners_count":21804280,"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-12-27T01:11:41.349Z","updated_at":"2025-05-06T23:44:28.190Z","avatar_url":"https://github.com/fork.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# `@4rk/vue-roving-tabindex`\n\nAdd a roving tabindex to a Vue component. This is useful to implement keyboard navigation inside components according to [WAI-ARIA](https://www.w3.org/TR/wai-aria-practices/#kbd_general_within).\n\n## Installation\n\n```javascript\nimport VueRovingTabindex from \"@4rk/vue-roving-tabindex\";\n\napp.use(VueRovingTabindex);\n```\n\n## Usage\n\n```vue\n\u003ctemplate\u003e\n  \u003cul v-roving-tabindex-container\u003e\n    \u003cli\u003e\u003cbutton type=\"button\" v-roving-tabindex\u003efoo\u003c/button\u003e\u003c/li\u003e\n    \u003cli\u003e\u003cbutton type=\"button\" v-roving-tabindex\u003ebar\u003c/button\u003e\u003c/li\u003e\n    \u003cli\u003e\u003cbutton type=\"button\" v-roving-tabindex\u003ebaz\u003c/button\u003e\u003c/li\u003e\n  \u003c/ul\u003e\n\u003c/template\u003e\n```\n\n## Directive API\n\nThe package provides two Vue directives:\n\n### v-roving-tabindex-container\n\nThis directive denotes the boundary of a roving tabindex sequence. Add it to a parent element of the `v-roving-tabindex` elements.\n\nIt has a single boolean modifier to change the direction from vertical to horizontal:\n\n```vue\n\u003cdiv v-roving-tabindex-container.horizontal /\u003e\n```\n\n### v-roving-tabindex\n\nThis directive should be used on every focussable element inside a `v-roving-tabindex-container` that is part of the roving tabindex.\n\nIts value can be set to `false` to remove the element from the roving tabindex:\n\n```vue\n\u003cbutton type=\"button\" v-roving-tabindex=\"false /\u003e\n```\n\n## Related work\n\n- [react-roving-tabindex](https://github.com/stevejay/react-roving-tabindex)\n- [roving-tabindex-element-list](https://github.com/tajakobsen/roving-tabindex-element-list)\n- [vue-mixin-roving-tabindex](https://github.com/tajakobsen/vue-mixin-roving-tabindex)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffork%2Fvue-roving-tabindex","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffork%2Fvue-roving-tabindex","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffork%2Fvue-roving-tabindex/lists"}