src/content/docs/linter/rules/use-aria-activedescendant-with-tabindex.mdx
import { Tabs, TabItem } from '@astrojs/starlight/components';
<Tabs> <TabItem label="JSX and TSX" icon="seti:javascript"> ## Summary - Rule available since: `v1.3.0` - Diagnostic Category: [`lint/a11y/useAriaActivedescendantWithTabindex`](/reference/diagnostics#diagnostic-category) - This rule is **recommended**, meaning it is enabled by default. - This rule has an [**unsafe**](/linter/#unsafe-fixes) fix. - The default severity of this rule is [**error**](/reference/diagnostics#error). - Sources: - Same as [`jsx-a11y/aria-activedescendant-has-tabindex`](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/aria-activedescendant-has-tabindex.md){
"linter": {
"rules": {
"a11y": {
"useAriaActivedescendantWithTabindex": "error"
}
}
}
}
Enforce that tabIndex is assigned to non-interactive HTML elements with aria-activedescendant.
aria-activedescendant is used to manage to 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 a 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.
<div aria-activedescendant={someID} />
<div aria-activedescendant={someID} tabIndex={0} />
<input aria-activedescendant={someID} />