Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/vue-a11y/vue-focus-loop
Vue component that helps you to to trap focus in an element.
https://github.com/vue-a11y/vue-focus-loop
a11y accessibility focus focus-loop focus-trap tabbable vue-a11y vuejs
Last synced: 3 months ago
JSON representation
Vue component that helps you to to trap focus in an element.
- Host: GitHub
- URL: https://github.com/vue-a11y/vue-focus-loop
- Owner: vue-a11y
- License: mit
- Created: 2020-07-27T12:05:12.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2022-02-24T11:53:02.000Z (over 2 years ago)
- Last Synced: 2024-03-22T12:23:29.555Z (3 months ago)
- Topics: a11y, accessibility, focus, focus-loop, focus-trap, tabbable, vue-a11y, vuejs
- Language: JavaScript
- Homepage: http://vue-focus-loop.surge.sh/
- Size: 1.55 MB
- Stars: 23
- Watchers: 2
- Forks: 3
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Lists
- awesome-access - @vue-a11y/focus-loop - Vue component that helps you to to trap focus in an element. (Components and plugins / Courses)
README
# [@vue-a11y/focus-loop](https://focus-loop.vue-a11y.com)
---
🔥 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).
---
## Introduction
Vue component that helps you to to trap focus in an element.
When developing accessible components, in certain behaviors it is important to trap focus on the element.
For 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.
- Focus is trapped: Tab and Shift+Tab will cycle through the focusable nodes within `` without returning to the main document below;
- Automatic focus on the first focusable element, with the option to disable;
- Restoring focus to the last activeElement;
- Hides the document from screen readers when `` is visible and enabled.
## Installation
Add `@vue-a11y/focus-loop` in your Vue project.
```sh
npm install -S @vue-a11y/focus-loop
# or
yarn add @vue-a11y/focus-loop
```
Or via CDN
```html
```
## Usage
You can use it globally in your main.js.
```js
import Vue from 'vue'
import VueFocusLoop from '@vue-a11y/focus-loop'
Vue.use(VueFocusLoop)
```
Or you can import into your component.
```js
import { FocusLoop } from '@vue-a11y/focus-loop'
export default {
components: {
FocusLoop
}
}
```
**Example** of use on your single file component.
```vue
Launch demo modal
Submit
Reset
```
## Make the focus-loop container visible and rendered
prop | type | default
---------- | --------- | ------------
isVisible | `Boolean` | `false`
```html
```
## Disable loop
You can disable the focus trap and activate it only when you really need it.
prop | type | default
---------- | --------- | ------------
disabled | `Boolean` | `false`
For example:
```html
```
## Disable autofocus on the first element
When activating the ``, the first element receives the focus automatically, however, if you want to disable this behavior, just disable it through the `autoFocus` prop.
prop | type | default
----------- | --------- | ------------
autoFocus | `Boolean` | `true`
For example:
```html
```
## Keyboard support
Keyboard users will use `Tab` and `Shift + Tab` to navigate tabbable elements.
According 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.
Key | Function
------------ | ------------
Tab | â–¸ Moves focus to next focusable element inside the dialog.
â–¸ When focus is on the last focusable element in the dialog, moves focus to the first focusable element in the dialog.
Shift + Tab | â–¸ Moves focus to previous focusable element inside the dialog.
â–¸ When focus is on the first focusable element in the dialog, moves focus to the last focusable element in the dialog.
## Links
- [Demo](https://vue-focus-loop.surge.sh)
## Articles that served as inspiration:
- [Using JavaScript to trap focus in an element](https://hiddedevries.nl/en/blog/2017-01-29-using-javascript-to-trap-focus-in-an-element)
## Other options
- [focus-trap](https://github.com/davidtheclark/focus-trap)
- [vue-focus-lock](https://github.com/theKashey/vue-focus-lock)
## Contributing
- From typos in documentation to coding new features;
- Check the open issues or open a new issue to start a discussion around your feature idea or the bug you found;
- Fork repository, make changes and send a pull request;
Follow us on Twitter [@vue_a11y](https://twitter.com/vue_a11y)
**Thank you**