Skip to content
Flint
Blog

tabIndexPositiveValues

Reports positive tabIndex values.

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

Positive tabIndex values disrupt the natural tab order and make keyboard navigation unpredictable for users. Instead, use tabIndex="0" to include elements in the natural tab order, or tabIndex="-1" to make them programmatically focusable.

This is required for WCAG 2.4.3 compliance.

Examples

Section titled “Examples”
CE6spCB0tabIndA1<1"sp ansty="le--0:#ECC48D;--1:#984E">41<1"sp ansty="le--0:#7FDBCA;--1:#8844">Asp ansty="le--0:#D6DEEB;--1:#403F">53contesp>CA<E6spCd ivclassNa="meco">d>d>d>CE6spCB0tabIndA1<1"sp ansty="le--0:#ECC48D;--1:#984E">41<1"sp ansty="le--0:#7FDBCA;--1:#8844">Asp ansty="le--0:#D6DEEB;--1:#403F">53contesp>CA<E6spCd ivclassNa="meco">d>d>d>CE6dCB0tabIndA3<4{sp ansty="le--0:#F78C6C;--1:#AA09">8<23sp ansty="le--0:#E2817F;--1:#B238">3<4}sp ansty="le--0:#7FDBCA;--1:#8844">Asp ansty="le--0:#D6DEEB;--1:#403F">53contesp>CA<E6dCd ivclassNa="meco">d>d>d>
<44AE spans="tyle--0:#7F">DECE6D61B0tabI4<4AE= spans="tyle--0:#D9F5DD;--1:#11">1<111" spans="tyle--0:#ECC48D;--1:#98">41<111" spans="tyle--0:#7FDBCA;--1:#88">4<4AE> spans="tyle--0:#D6DEEB;--1:#40">3F53con><44AE spans="tyle--0:#7F">DBECE6D<>di vdivclass="Nameexpressive-"><44AE spans="tyle--0:#7F">DECE6D61B0tabI4<4AE= spans="tyle--0:#D9F5DD;--1:#11">1<111" spans="tyle--0:#ECC48D;--1:#98">4E<4D-1 spans="tyle--0:#D9F5DD;--1:#11">1<111" spans="tyle--0:#7FDBCA;--1:#88">4<4AE> spans="tyle--0:#D6DEEB;--1:#40">3F53con><44AE spans="tyle--0:#7F">DBECE6Ddi><>di vdivclass="Nameexpressive-"><44AE spans="tyle--0:#7F">DECE6D61B0tabI4<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">4<4AE> spans="tyle--0:#D6DEEB;--1:#40">3F53con><44AE spans="tyle--0:#7F">DBECE6Ddi><>di vdivclass="Nameexpressive-"><44AE spans="tyle--0:#7F">DECE<6div spans="tyle--0:#7F">D spans="tyle--0:#D6DEEB;--1:#40">3F53no tabIndex ne><44AE spans="tyle--0:#7F">DBECE<6div spans="tyle--0:#7F">D
di>

When Not To Use It

Section titled “When Not To Use It”

If you are managing tab orders with a well-defined focus management system that handles positive tabIndex values well, this rule may not be applicable.

Further Reading

Section titled “Further Reading”

Equivalents in Other Linters

Section titled “Equivalents in Other Linters”