Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
@vue-a11y/focus-loop
Advanced tools
Changelog
Readme
🔥 HEADS UP! You are in the Vue 2 compatible branch, check the "next" branch for Vue3 support.
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.
<FocusLoop>
without returning to the main document below;<focusLoop>
is visible and enabled.Add @vue-a11y/focus-loop
in your Vue project.
npm install -S @vue-a11y/focus-loop
# or
yarn add @vue-a11y/focus-loop
Or via CDN
<script src="http://unpkg.com/@vue-a11y/focus-loop"></script>
You can use it globally in your main.js.
import Vue from 'vue'
import VueFocusLoop from '@vue-a11y/focus-loop'
Vue.use(VueFocusLoop)
Or you can import into your component.
import { FocusLoop } from '@vue-a11y/focus-loop'
export default {
components: {
FocusLoop
}
}
Example of use on your single file component.
<template>
<div>
<b-button v-b-modal.modal-1>Launch demo modal</b-button>
<b-modal id="modal-1" title="BootstrapVue">
<FocusLoop :is-visible="isOpen">
<b-form @submit="onSubmit" @reset="onReset" v-if="show">
<b-form-group id="input-group-2" label="Your Name:" label-for="input-1">
<b-form-input
id="input-1"
v-model="form.name"
required
placeholder="Enter name"
></b-form-input>
</b-form-group>
<b-form-group id="input-group-2" label="Your Email:" label-for="input-2">
<b-form-input
id="input-2"
type="email"
v-model="form.email"
required
placeholder="Enter email"
></b-form-input>
</b-form-group>
<b-button type="submit" variant="primary">Submit</b-button>
<b-button type="reset" variant="danger">Reset</b-button>
</b-form>
</FocusLoop>
</b-modal>
</div>
</template>
prop | type | default |
---|---|---|
isVisible | Boolean | false |
<FocusLoop :is-visible="isOpen">
<!-- your elements here -->
</FocusLoop>
You can disable the focus trap and activate it only when you really need it.
prop | type | default |
---|---|---|
disabled | Boolean | false |
For example:
<FocusLoop :is-visible="isOpen" disabled>
<!-- your elements here -->
</FocusLoop>
When activating the <FocusLoop>
, 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:
<FocusLoop :is-visible="isOpen" :auto-focus="false">
<!-- your elements here -->
</FocusLoop>
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. |
Follow us on Twitter @vue_a11y
Thank you
FAQs
Vue component that helps you to to trap focus in an element.
The npm package @vue-a11y/focus-loop receives a total of 2,587 weekly downloads. As such, @vue-a11y/focus-loop popularity was classified as popular.
We found that @vue-a11y/focus-loop demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.