Trap Focus Within A DOM – focus-trap-vue

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:

02/26/2023

• v4.0.2: 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