focus-trap-vue is a Vue.js component to trap focus within a DOM node. Requires the focus-trap library as the dependency.
When your users hit theĀ Tab or Shift+Tab or click around, they can’t escape a certain cycle of focusable elements.
How to use it:
Import & register the component.
import { FocusTrap } from 'focus-trap-vue' Vue.component('FocusTrap', FocusTrap)
Use the component.
<focus-trap v-model="demos.basic.isActive"> <div id="default" class="trap" :class="demos.basic.isActive && 'is-active'" tabindex="-1" > <p> Here is a focus trap <a href="#">with</a> <a href="#">some</a> <a href="#">focusable</a> parts. </p> <p> <button id="deactivate-default" @click="demos.basic.isActive = false" > deactivate trap </button> </p> </div> </focus-trap>
Props.
- escapeDeactivates: If false, the Escape key will not trigger deactivation of the focus trap. This can be useful if you want to force the user to make a decision instead of allowing an easy way out.
- returnFocusOnDeactivate: If false, when the trap is deactivated, focus will not return to the element that had focus before activation.
- allowOutsideClick: If set and returns true, a click outside the focus trap will not be prevented, even when clickOutsideDeactivates is false.
- initialFocus: By default, when a focus trap is activated the first element in the focus trap’s tab order will receive focus. With this option you can specify a different element to receive that initial focus. Can be a DOM node, or a selector string (which will be passed to document.querySelector() to find the DOM node), or a function that returns a DOM node.
- fallbackFocus: By default, an error will be thrown if the focus trap contains no elements in its tab order. With this option you can specify a fallback element to programmatically receive focus if no other tabbable elements are found. For example, you may want a popover’s <div> to receive focus if the popover’s content includes no tabbable elements. Make sure the fallback element has a negative tabindex so it can be programmatically focused. The option value can be a DOM node, a selector string (which will be passed to document.querySelector() to find the DOM node), or a function that returns a DOM node.
Preview:
Changelog:
10/21/2023
- v4.0.3: Bugfix
Download Details:
Author: posva
Live Demo: https://focus-trap-vue.esm.dev/
Download Link: https://github.com/posva/focus-trap-vue/archive/master.zip
Official Website: https://github.com/posva/focus-trap-vue
Install & Download:
# NPM
$ npm install focus-trap focus-trap-vue --save