ARIA Container Role (without active descendant) Tabindex Error

Text

Element is a focusable container without active descendant defined, but no child element has tabindex greater or equal to 0.

Type

Error

Description

This error applies to elements that have a container role, do not have an aria-activedescendant attribute, and are not disabled. These elements implement keyboard navigation among child elements by using the concept known as roving index. In this concept, the tabindex attributes of child elements are maintained dynamically, ensuring that at all times only one child element is in tab order.

To fix this error, set the tabindex attribute of one of the child elements to a value equal to or greater than 0.

Example


<div id="listbox" role="listbox1">
  <div role="option" id="listbox1-1" tabindex="0" class="selected">Item 1</div>
  <div role="option" id="listbox1-2">Item 2</div>
  <div role="option" id="listbox1-3">Item 3</div>
</div>

<script>

  ...

  listbox1.addEventListener('keyup', function(e) {
    var itm = e.srcElement;
    var prev = itm.previousElementSibling;
    var next = itm.nextElementSibling;

    if (e.keyCode == 38 && prev) {
      // Arrow up to move focus to the previous item.
      itm.setAttribute('tabindex', '-1');
      prev.setAttribute('tabindex','0');
      prev.focus();
    } 

    else if (e.keyCode == 40 && next) {
      // Arrow down to move focus to the next item.
      itm.setAttribute('tabindex', '-1');
      next.setAttribute('tabindex','0');
      next.focus();
    }
  });

</script>

Related topics

ARIA Container Tabindex Error

 

 

Community Additions

ADD
Show:
© 2014 Microsoft