useAriaActivedescendantWithTabindex (HTML)

Summary

Rule available since: v2.5.0
Diagnostic Category: lint/a11y/useAriaActivedescendantWithTabindex
This rule is recommended, meaning it is enabled by default.
This rule doesn’t have a fix.
The default severity of this rule is error.
Sources:
- Inspired from jsx-a11y/aria-activedescendant-has-tabindex

How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "a11y": {
5
        "useAriaActivedescendantWithTabindex": "error"
6
      }
7
    }
8
  }
9
}

Description

Enforce that tabindex is assigned to non-interactive HTML elements with aria-activedescendant.

aria-activedescendant is used to manage focus within a composite widget. The element with the attribute aria-activedescendant retains the active document focus.

It indicates which of its child elements has secondary focus by assigning the ID of that element to the value of aria-activedescendant. This pattern is used to build a widget like a search typeahead select list. The search input box retains document focus so that the user can type in the input. If the down arrow key is pressed and a search suggestion is highlighted, the ID of the suggestion element will be applied as the value of aria-activedescendant on the input element.

Because an element with aria-activedescendant must be tabbable, it must either have an inherent tabIndex of zero or declare a tabindex attribute.

Examples

Invalid

1
<div aria-activedescendant="some-id"></div>

code-block.html:1:1 lint/a11y/useAriaActivedescendantWithTabindex ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Enforce elements with aria-activedescendant are tabbable.
  
  > 1 │ <div aria-activedescendant="some-id"></div>
      │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ aria-activedescendant is used to manage focus within a composite widget.
    The element with the attribute aria-activedescendant retains the active document focus.
  
  ℹ Add the tabindex attribute to the element with a value greater than or equal to -1.

Valid

1
<div aria-activedescendant="some-id" tabindex="0"></div>

1
<input aria-activedescendant="some-id" />

1
<button aria-activedescendant="some-id"></button>