Rovueing-tabindex NPM

Add roving tabindex to your components.

Installation

npm i rovueing-tabindex
// Or
yarn add rovueing-tabindex
// Or
pnpm add rovueing-tabindex

Demo

npm.io

Usage

import { RovueingTabindex } from 'rovueing-tabindex';

app.use(RovueingTabindex, {
    direction: "ltr" | "rtl" // default: "ltr"
});

<template>
    <ul id="foods" v-rove>
        <button v-rove-focusable>Frittata</button>
        <button v-rove-focusable>Carbonara</button>
        <button v-rove-focusable>Lamb Chops</button>
        <button v-rove-focusable>Chow Mein</button>
    </ul>
</template>

Import and register rovuing-tabindex
Use v-rove on the parent which contains focusable items and denotes the boundary of a roving tabindex. Use v-rove-focusable.rtl if you need to overwrite the default options.
Use v-rove-focusable on every focusable element inside the container parent.