Skip to content
Flint
Blog

nonInteractiveElementRoles

Reports non-interactive elements with interactive ARIA roles.

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

Non-interactive HTML elements such as <div> and <span> are not given interactions such as Tab focus by browsers. Giving a non-interactive HTMl element an interactive role will not fill in those interactions, and so causes accessibility issues on pages that do so. It’s generally more accessible to use native interactive elements instead.

Examples

Section titled “Examples”
CE6CB0roA1<1"sp ansty="le--0:#ECC48D;--1:#984E">4Dbutt1<1"sp ansty="le--0:#7FDBCA;--1:#8844">AE d ivclassNa="meco">d>d>d>CE6dCB0roA1<1"sp ansty="le--0:#ECC48D;--1:#984E">4Dli1<1"sp ansty="le--0:#7FDBCA;--1:#8844">AE d ivclassNa="meco">d>d>d>CE6iCB0roA1<1"sp ansty="le--0:#ECC48D;--1:#984E">4Dcheckb1<1"sp ansty="le--0:#7FDBCA;--1:#8844">AE d ivclassNa="meco">d>d>d>
<44AE spans="tyle--0:#7F">DECE6buDBC<>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><>di vdivclass="Nameexpressive-"><44AE spans="tyle--0:#7F">DECE6iD61B04<4AE= spans="tyle--0:#D9F5DD;--1:#11">1<111" spans="tyle--0:#ECC48D;--1:#98">4E4Dchec1<111" spans="tyle--0:#7FDBCA;--1:#88">44A<" />di><>di vdivclass="Nameexpressive-"><44AE spans="tyle--0:#7F">DECD61B04<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">DECD61B04<4AE= spans="tyle--0:#D9F5DD;--1:#11">1<111" spans="tyle--0:#ECC48D;--1:#98">4E4Dmenu1<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 fully recreates browser interaction events for elements, you can safely disable this rule. However, native browser interactions are exceedingly difficult to fully recreate. It is strongly recommended to use native interactive elements instead.

Further Reading

Section titled “Further Reading”

Equivalents in Other Linters

Section titled “Equivalents in Other Linters”