ariaActiveDescendantTabIndex

Reports elements with aria-activedescendant without tabIndex.

✅ This rule is included in the jsx logical and logicalStrict presets.

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

❌ Incorre

CE6dCB0aria-activedescendaA3<4{sp ansty="le--0:#D6DEEB;--1:#403F">53some3<4}sp ansty="le--0:#7FDBCA;--1:#8844">AE d ivclassNa="meco">d>d>d>CE6spCB0aria-activedescendaA1<1"sp ansty="le--0:#ECC48D;--1:#984E">4Ditem<-1sp ansty="le--0:#D9F5DD;--1:#1111">1<1"sp ansty="le--0:#7FDBCA;--1:#8844">AE d ivclassNa="meco">d>d>d>

<44AE spans="tyle--0:#7F">DECE<6div spans="tyle--0:#7F">D61B0aria-activedescen4<4AE= spans="tyle--0:#E2817F;--1:#B2">3<834{ spans="tyle--0:#D6DEEB;--1:#40">3F53so3<834} spans="tyle--0:#7FDBCA;--1:#88">4<4AE spans="tyle--0:#C5E478;--1:#3B">61B0tabI4<4AE= spans="tyle--0:#E2817F;--1:#B2">3<834{ spans="tyle--0:#F78C6C;--1:#AA">0<9820 spans="tyle--0:#E2817F;--1:#B2">3<834} spans="tyle--0:#7FDBCA;--1:#88">44A<} /><>di vdivclass="Nameexpressive-"><44AE spans="tyle--0:#7F">DECE<6div spans="tyle--0:#7F">D61B0aria-activedescen4<4AE= spans="tyle--0:#E2817F;--1:#B2">3<834{ spans="tyle--0:#D6DEEB;--1:#40">3F53so3<834} spans="tyle--0:#7FDBCA;--1:#88">4<4AE spans="tyle--0:#C5E478;--1:#3B">61B0tabI4<4AE= spans="tyle--0:#E2817F;--1:#B2">3<834{ spans="tyle--0:#C792EA;--1:#88">4<4AE- spans="tyle--0:#F78C6C;--1:#AA">0<9821 spans="tyle--0:#E2817F;--1:#B2">3<834} spans="tyle--0:#7FDBCA;--1:#88">44A<} />di><>di vdivclass="Nameexpressive-"><44AE spans="tyle--0:#7F">DECE6iD61B0aria-activedescen4<4AE= spans="tyle--0:#E2817F;--1:#B2">3<834{ spans="tyle--0:#D6DEEB;--1:#40">3F53so3<834} spans="tyle--0:#7FDBCA;--1:#88">44A<} />di><>di vdivclass="Nameexpressive-"><44AE spans="tyle--0:#7F">DECE6buD61B0aria-activedescen4<4AE= spans="tyle--0:#E2817F;--1:#B2">3<834{ spans="tyle--0:#D6DEEB;--1:#40">3F53so3<834} spans="tyle--0:#7FDBCA;--1:#88">44A<} />di>

When Not To Use It

If you’re not using aria-activedescendant or have a custom focus management system, you can disable this rule.

Further Reading

• MDN: Using the aria-activedescendant attribute
• WAI-ARIA: Composite Widgets

Equivalents in Other Linters

• Biome: useAriaActivedescendantWithTabindex
• ESLint: jsx-a11y/aria-activedescendant-has-tabindex
• Oxlint: jsx-a11y/aria-activedescendant-has-tabindex