Home Javascript Vue Component to Trap/Hold Focus Inside A DOM Element

Vue Component to Trap/Hold Focus Inside A DOM Element

Javascript webcodeflow · December 9, 2021 · Comments off

A focus trap is a Vue component to confine the focus within a DOM element. When users press or click Tab or Shift + Tab, they cannot escape a certain cycle of focusable items.

vue on focus event, trap focus inside modal jquery, how to keep focus within modal dialog, trap focus javascript, focus trap accessibility, prevent tabbing out of modal dialogs

How to make use of it:

Install and download:

# NPM
$ npm install focus-trap focus-trap-vue --save

Import and 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>

trap focus within a dom element, focus trap vue Plugin/Github