https://github.com/fork/vue-roving-tabindex

Add a roving tabindex to a Vue component
https://github.com/fork/vue-roving-tabindex

Last synced: 1 day ago
JSON representation

Add a roving tabindex to a Vue component

• Host: GitHub
• URL: https://github.com/fork/vue-roving-tabindex
• Owner: fork
• License: mit
• Created: 2019-11-05T15:53:40.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2024-01-04T10:13:35.000Z (12 months ago)
• Last Synced: 2024-11-29T14:57:08.641Z (29 days ago)
• Language: JavaScript
• Size: 167 KB
• Stars: 15
• Watchers: 8
• Forks: 6
• Open Issues: 7
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

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](https://www.w3.org/TR/wai-aria-practices/#kbd_general_within).

## Installation

```javascript

import VueRovingTabindex from "@4rk/vue-roving-tabindex";

app.use(VueRovingTabindex);

```

## Usage

```vue

  


    
foo

    
bar

    
baz

  


```

## 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:

```vue



```


### 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:

```vue