ariaActiveDescendantTabIndex
Reports elements with aria-activedescendant without tabIndex.
✅ This rule is included in the jsxlogicalandlogicalStrictpresets.
aria-activedescendant is used to manage focus within a composite widget.
Elements with this attribute should be tabbable, either through an inherent tabIndex (like <input>) or an explicit tabIndex attribute.
Without proper tabIndex, keyboard users cannot reach the element to interact with it.
Examples
Section titled “Examples”<JSX.IntrinsicElements.div: DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>
AriaAttributes["aria-activedescendant"]?: string | undefined
Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.
aria-activedescendant={const someID: any
<JSX.IntrinsicElements.span: DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>
AriaAttributes["aria-activedescendant"]?: string | undefined
Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.
aria-activedescendant="item-1" /><JSX.IntrinsicElements.div: DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>
AriaAttributes["aria-activedescendant"]?: string | undefined
Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.
aria-activedescendant={const someID: any
HTMLAttributes<HTMLDivElement>.tabIndex?: number | undefined
<JSX.IntrinsicElements.div: DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>
AriaAttributes["aria-activedescendant"]?: string | undefined
Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.
aria-activedescendant={const someID: any
HTMLAttributes<HTMLDivElement>.tabIndex?: number | undefined
<JSX.IntrinsicElements.input: DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>
AriaAttributes["aria-activedescendant"]?: string | undefined
Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.
aria-activedescendant={const someID: any
<JSX.IntrinsicElements.button: DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>
AriaAttributes["aria-activedescendant"]?: string | undefined
Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.
aria-activedescendant={const someID: any
When Not To Use It
Section titled “When Not To Use It”If you’re not using aria-activedescendant or have a custom focus management system, you can disable this rule.