Skip to content
Flint
Blog

ariaHiddenFocusables

Reports elements with aria-hidden='true' that are focusable.

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

Elements with aria-hidden="true" should not be reachable via keyboard navigation. When users can focus elements they cannot perceive with a screen reader, it creates confusion and unexpected behavior.

This rule reports on any element that is focusable -either inherently or via tabIndex- and has aria-hidden="true".

Examples

Section titled “Examples”
CE6dCB0aria-hiddA1<1"sp ansty="le--0:#ECC48D;--1:#984E">4Dtr1<1"sp ansty="le--0:#7FDBCA;--1:#8844">AB0tabIndA1<1"sp ansty="le--0:#ECC48D;--1:#984E">41<1"sp ansty="le--0:#7FDBCA;--1:#8844">AE d ivclassNa="meco">d>d>d>CE6inpCB0aria-hiddA1<1"sp ansty="le--0:#ECC48D;--1:#984E">4Dtr1<1"sp ansty="le--0:#7FDBCA;--1:#8844">AE d ivclassNa="meco">d>d>d>CE<6asp ansty="le--0:#7FDB">CB0hrA1<1"sp ansty="le--0:#ECC48D;--1:#984E">41<1"sp ansty="le--0:#7FDBCA;--1:#8844">AB0aria-hiddA1<1"sp ansty="le--0:#ECC48D;--1:#984E">4Dtr1<1"sp ansty="le--0:#7FDBCA;--1:#8844">AE d ivclassNa="meco">d>d>d>CE6buttCB0aria-hiddA1<1"sp ansty="le--0:#ECC48D;--1:#984E">4Dtr1<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-hi4<4AE= spans="tyle--0:#D9F5DD;--1:#11">1<111" spans="tyle--0:#ECC48D;--1:#98">4E4D1<111" spans="tyle--0:#7FDBCA;--1:#88">44A<" /><>di vdivclass="Nameexpressive-"><44AE spans="tyle--0:#7F">DECE<6img spans="tyle--0:#7F">D61B0aria-hi4<4AE= spans="tyle--0:#D9F5DD;--1:#11">1<111" spans="tyle--0:#ECC48D;--1:#98">4E4D1<111" spans="tyle--0:#7FDBCA;--1:#88">44A<" />di><>di vdivclass="Nameexpressive-"><44AE spans="tyle--0:#7F">DECE6buD61B0aria-hi4<4AE= spans="tyle--0:#D9F5DD;--1:#11">1<111" spans="tyle--0:#ECC48D;--1:#98">4E4D1<111" spans="tyle--0:#7FDBCA;--1:#88">4<4AE spans="tyle--0:#C5E478;--1:#3B">61B0tabI4<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">44A<" />di><>di vdivclass="Nameexpressive-"><44AE spans="tyle--0:#7F">DED61B04<4AE= spans="tyle--0:#D9F5DD;--1:#11">1<111" spans="tyle--0:#ECC48D;--1:#98">41<111" spans="tyle--0:#7FDBCA;--1:#88">44A<" />di>

When Not To Use It

Section titled “When Not To Use It”

If you separately use a framework that manages focus state for you such that focusable elements with aria-hidden="true" are never focused, you may prefer to disable this rule.

Further Reading

Section titled “Further Reading”

Equivalents in Other Linters

Section titled “Equivalents in Other Linters”