Add roving tabindex to your components.

What's roving tabindex?

Installation

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

Demo

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>

1. Import and register rovuing-tabindex
2. 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.
3. Use v-rove-focusable on every focusable element inside the container parent.

Contributing

Contributions, issues and feature requests are welcome. Feel free to check issues page if you want to contribute.

Author

Mehdi HoseiniPajooh

Twitter: @Mehdi_HoseiniP
Github: @Mehdi-Hp

License

DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
Version 2, December 2004

Related

vue-roving-tabindex