https://github.com/tajakobsen/roving-tabindex-element-list

JS library that keeps a list of Elements that can be navigated using tab
https://github.com/tajakobsen/roving-tabindex-element-list

a11y accessibility npm-package

Last synced: 19 days ago
JSON representation

JS library that keeps a list of Elements that can be navigated using tab

• Host: GitHub
• URL: https://github.com/tajakobsen/roving-tabindex-element-list
• Owner: tajakobsen
• License: mit
• Created: 2017-10-27T11:00:34.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2017-11-20T08:12:42.000Z (about 7 years ago)
• Last Synced: 2024-04-25T05:42:40.348Z (10 months ago)
• Topics: a11y, accessibility, npm-package
• Language: JavaScript
• Size: 55.7 KB
• Stars: 2
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Roving tabindex element list

[![Build Status](https://travis-ci.org/tajakobsen/roving-tabindex-element-list.svg?branch=master)](https://travis-ci.org/tajakobsen/roving-tabindex-element-list)

[![npm version](https://badge.fury.io/js/roving-tabindex-element-list.svg)](https://badge.fury.io/js/roving-tabindex-element-list)

JavaScript library that keeps a list of Elements that can be navigated using tab. This is very useful when working

with accessibility.

## Usage

```javascript

import NavigationList from 'roving-tabindex-element-list';

const navigationList = new NavigationList(); 

navigationList.registerElement(element1);

navigationList.registerElement(element2);

// congratulations, you can now use arrow keys + HOME + END to move between the elements in the list 

```

## Altering behaviour with plugins

```javascript

const plugin = {

  init: (navigationList) => {

    navigationList.on('beforeUpdateState', ({ elements }) => {

      console.log('State is updating for list: ', elements);

    });

  }

}

  

const navigationList = new NavigationList({

  plugins: [plugin]

});

```

### List of included plugins

 * [Sort by dom position](./src/plugins/sort-by-dom-position.js) - Plugin that keeps the element list sorted based on 

 element positions in the dom.

  * [Prevent wrapping](./src/plugins/prevent-wrapping.js) - Plugin that prevents the tabindex from wrapping around to the 

  last element, when pressing up on the first element, and vise versa. 

## Licence

This librariy is licenced with the [MIT Licence](LICENCE)