Skip to content
Flint
Blog

interactiveElementRoles

Reports interactive elements with non-interactive ARIA roles.

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

Interactive HTML elements such as <button> and <a> are given interactions such as Tab focus by browsers. Giving an interactive HTML element a non-interactive role will remove those interactions, which causes accessibility issues on pages that do so. Preserve the native element behavior or use a different native element instead.

Examples

Section titled “Examples”
CE6buttCB0roA1<1"sp ansty="le--0:#ECC48D;--1:#984E">4Dartic1<1"sp ansty="le--0:#7FDBCA;--1:#8844">AE d ivclassNa="meco">d>d>d>CE<6asp ansty="le--0:#7FDB">CB0roA1<1"sp ansty="le--0:#ECC48D;--1:#984E">4Di1<1"sp ansty="le--0:#7FDBCA;--1:#8844">AE d ivclassNa="meco">d>d>d>CE6inpCB0roA1<1"sp ansty="le--0:#ECC48D;--1:#984E">4Dnavigati1<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">D61B04<4AE= spans="tyle--0:#D9F5DD;--1:#11">1<111" spans="tyle--0:#ECC48D;--1:#98">4E4Dart1<111" spans="tyle--0:#7FDBCA;--1:#88">44A<" /><>di vdivclass="Nameexpressive-"><44AE spans="tyle--0:#7F">DECE<6img spans="tyle--0:#7F">D61B<0alt spans="tyle--0:#C792EA;--1:#88">4<4AE= spans="tyle--0:#D9F5DD;--1:#11">1<111" spans="tyle--0:#ECC48D;--1:#98">4E4Ddescrip1<111" spans="tyle--0:#7FDBCA;--1:#88">44A<" />di><>di vdivclass="Nameexpressive-"><44AE spans="tyle--0:#7F">DECE<6nav spans="tyle--0:#7F">Dde<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<44AE spans="tyle--0:#7F">DBECE<6nav spans="tyle--0:#7F">Ddi><>di vdivclass="Nameexpressive-"><44AE spans="tyle--0:#7F">DECE6buDBCdi><>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 are using a framework that intentionally removes native browser interactions, you can disable this rule. However, removing native browser interactions is strongly discouraged as it harms accessibility. It is recommended to preserve native interactive element behaviors.

Further Reading

Section titled “Further Reading”

Equivalents in Other Linters

Section titled “Equivalents in Other Linters”