Add a roving tabindex to a Vue component. This is useful to implement keyboard navigation inside components according to WAI-ARIA.
import VueRovingTabindex from "@4rk/vue-roving-tabindex";
app.use(VueRovingTabindex);<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>The package provides two Vue directives:
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 />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 />