Introduction :fire:

This package provide support for various accessibility features for only using with VueJS application. There are multiple directives which can directly be used for inheriting the basic functionalities for making website accessible

Install Guide

Using NPM

npm install accessibility-directives --save

Using yarn

yarn add accessibility-directives --save

Uses

import vue from 'vue // es6
const vue = require('vue) // require js

import DirectiveLibary from 'accessibility-directives' // es6
const DirectiveLibary = require(accessibility-directives) // require js

Vue.use( DirectiveLibary, [ 'FocusTrap' ] ) // pass list of directive required, a list of supported directives is provided in the bottom section with detailed uses and explanation
// or
Vue.use( DirectiveLibary ) // It will provide support for all the directives

Agenda 🥂

There are several directives provided which can be used for implementing various accessibility feature support

Directives Directory :book:

Trap focus

Vue.use( DirectiveLibary, [ 'FocusTrap' ] ) // can be included with name FocusTrap

This is handy directive to use when working with modal components. Using this we can trap a user inside a modal until some specific events take palce

1. User presses Escape key or space bar: In both cases use this directive in following way

e.g <div v-focus-trap="escapeModal">

<script>
  export default {
    methods: {
      escapeModal() {
        console.log("close was triggered");
        console.log("now get focus back to initiating element");
        // try to save focus when opening modal, so we can focus back when close event occure
        let elm = use refrence to initiating DOM elm
        // check for elm to exist, if so focus elm
        if (elm) {
          elm.focus();
        }
      }
    }
  };
</script>