roving-tabindex-element-list

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

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

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 - Plugin that keeps the element list sorted based on element positions in the dom.
• Prevent wrapping - 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