Roving Tabindex - javascript helper to create accessible widgets

Demos

Radio Group

Implemented using WAI Guidelines.

<div role="radiogroup" aria-labelledby="label_1">
    <strong id="label_1">My favourite color:</strong>
    <div id="radio-group-widget">
        <div role="radio" aria-checked="false" tabindex="0">Red</div>
        <div role="radio" aria-checked="false" tabindex="-1">Green</div>
        <div role="radio" aria-checked="false" tabindex="-1">Blue</div>
    </div>
</div>

const radiogroup = document.getElementById('radio-group-widget');

new RovingTabindex(radiogroup);

radiogroup.addEventListener('movefocus', (event) => {
    event.detail.to.click()
});

radiogroup.addEventListener('keydown', (event) => {
    if (event.target.matches('[role="radio"]') && event.key === " ") {
        event.preventDefault(); //do not scroll down
        event.target.click();
    }
});

radiogroup.addEventListener('click', (event) => {
   if (event.target.matches('[role="radio"][tabindex="-1"]')) {
       let from = radiogroup.querySelector('[tabindex="0"]');
       let to = event.target;

       //uncheck previously checked item
       from.setAttribute('tabindex', '-1');
       from.setAttribute('aria-checked', 'false');

       //check new item
       to.setAttribute('tabindex', '0');
       to.setAttribute('aria-checked', 'true');
       to.focus();
   }
});

Toolbar

Implemented using WAI Guidelines.

<div id="toolbar-widget" role="toolbar" aria-label="Demo toolbar" aria-controls="square">
    <div class="wrapper">
        <button tabindex="0">1</button>
        <button tabindex="-1">2</button>
        <button tabindex="-1">3</button>
    </div>
    <button tabindex="-1">4</button>
    <button tabindex="-1">5</button>
</div>
<div id="square"></div>

const toolbar = document.getElementById('toolbar-widget');

new RovingTabindex(toolbar, {
    next: ['ArrowRight'],
    previous: ['ArrowLeft'],
    childrenSelector: 'button'
});

const manageFocus = (from,to) => {
    from.setAttribute('tabindex', '-1');
    to.setAttribute('tabindex', '0');
    to.focus();
};

toolbar.addEventListener('movefocus', (event) => {
    manageFocus(event.detail.from, event.detail.to)
});

toolbar.addEventListener('click', (event) => {
    if (event.target.matches('[tabindex="-1"]')) {
        let from = toolbar.querySelector('[tabindex="0"]');
        let to = event.target;

        manageFocus(from, to);
    }
});

Getting started

1. Setup your HTML: a parent and children with appropriate tabindex.

   <div id="demo">
       <button tabindex="0">Button 1</button>
       <button tabindex="-1">Button 2</button>
       <button tabindex="-1">Button 3</button>
   </div>

2. Add rovingtabindex.js before your closing body tag.

   <script src="rovingtabindex.js"></script>

3. Initialize RovingTabindex.

   new RovingTabindex('#demo');

Settings

• first

  Type: array

  Default: ["Home"]

  Array with all values of event.key, that set focus to the first element.

• last

  Type: array

  Default: ["End"]

  Array with all values of event.key, that set focus to the last element.

• next

  Type: array

  Default: ["ArrowRight", "ArrowDown"]

  Array with all values of event.key, that set focus to the next element. If wrap is set to true, then last element's next element is the first element.

• previous

  Type: array

  Default: ["ArrowLeft", "ArrowUp"]

  Array with all values of event.key, that set focus to the previous element. If wrap is set to true, then first element's previous element is the last element.

• character

  Type: boolean

  Default: true

  Indicates if typing a character should move focus to the first item beginning with that character. If no item matches typed character, focus does not move.

• wrap

  Type: boolean

  Default: true

  If set to true indicates, first item's previous item is last item and last item's next item is first item.

• childrenSelector

  Type: string

  Default: ':scope > *'

  Informs the widget which elements it should iterate over. Allows to ignore wrapping elements, icons and so on.

• findActive

  Type: function

  Default: (item) => item.getAttribute('tabindex') === '0'

  Function used to identify active child on first interaction.

Methods

• destroy

  Removes all event listeners.

Events

• rovingtabindexinitialized

  Fired when widget gets initialized.

• rovingtabindexdestroyed

  Fired after completing destroy action.

• movefocus

  Fired after pressing key should move focus. event.details contains two fields (fromto) indicating previously focused item and item, that should get focused.

Get it now

You will find all the code on Github.