@4rk/vue-roving-tabindex
v2.0.0
Published
Add a roving tabindex to a Vue component
Downloads
358
Readme
@4rk/vue-roving-tabindex
Add a roving tabindex to a Vue component. This is useful to implement keyboard navigation inside components according to WAI-ARIA.
Installation
import VueRovingTabindex from "@4rk/vue-roving-tabindex";
app.use(VueRovingTabindex);
Usage
<template>
<ul v-roving-tabindex-container>
<li><button type="button" v-roving-tabindex>foo</button></li>
<li><button type="button" v-roving-tabindex>bar</button></li>
<li><button type="button" v-roving-tabindex>baz</button></li>
</ul>
</template>
Directive API
The package provides two Vue directives:
v-roving-tabindex-container
This directive denotes the boundary of a roving tabindex sequence. Add it to a parent element of the v-roving-tabindex
elements.
It has a single boolean modifier to change the direction from vertical to horizontal:
<div v-roving-tabindex-container.horizontal />
v-roving-tabindex
This directive should be used on every focussable element inside a v-roving-tabindex-container
that is part of the roving tabindex.
Its value can be set to false
to remove the element from the roving tabindex:
<button type="button" v-roving-tabindex="false />