1.0.7 • Published 4 years ago
accessibility-directives v1.0.7
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>