Skip to content
Flint
Blog

nonInteractiveElementInteractions

Reports non-interactive elements with interactive event handlers.

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

Non-interactive HTML elements and non-interactive ARIA roles indicate content and containers in the user interface. These elements should not have interactive event handlers because they are not designed to be interactive.

Non-interactive elements include <main>, <area>, <h1> through <h6>, <p>, <img>, <li>, <ul>, and <ol>. Non-interactive ARIA roles include article, banner, complementary, img, listitem, main, navigation, region, and tooltip.

When you need to add interactivity, use native interactive elements like <button> or <a>, or add an appropriate interactive role to the element.

This is required for WCAG 4.1.2 compliance.

Examples

Section titled “Examples”
CE6CB0onCliA3<4{sp ansty="le--0:#D9F5DD;--1:#1111">11<()sp ansty="le--1:#8844">CEA<=>sp ansty="le--0:#7FDB">CA sp><{}sp ansty="le--0:#E2817F;--1:#B238">3<4}sp ansty="le--0:#7FDBCA;--1:#8844">Asp ansty="le--0:#D6DEEB;--1:#403F">53Headisp>CA<E6Cd ivclassNa="meco"><1>d>d>d>CE6maCB0onKeyDoA3<4{sp ansty="le--0:#D6DEEB;--1:#403F">53handl3<4}sp ansty="le--0:#7FDBCA;--1:#8844">Asp ansty="le--0:#D6DEEB;--1:#403F">53Contesp>CA<E6maCd ivclassNa="meco">d>d>d>CE6iCB0onCliA3<4{sp ansty="le--0:#D6DEEB;--1:#403F">53handleCli3<4}sp ansty="le--0:#7FDBCA;--1:#8844">AB0sA1<1"sp ansty="le--0:#ECC48D;--1:#984E">4Dimage.p1<1"sp ansty="le--0:#7FDBCA;--1:#8844">AE d ivclassNa="meco">d>d>d>CE6sectiCB0onCliA3<4{sp ansty="le--0:#D6DEEB;--1:#403F">53handl3<4}sp ansty="le--0:#7FDBCA;--1:#8844">AB0roA1<1"sp ansty="le--0:#ECC48D;--1:#984E">4Dartic1<1"sp ansty="le--0:#7FDBCA;--1:#8844">AE d ivclassNa="meco">d>d>d>
<44AE spans="tyle--0:#7F">DECDde<44AE spans="tyle--0:#7F">DECE6buD61B0onC4<4AE= spans="tyle--0:#E2817F;--1:#B2">3<834{ spans="tyle--0:#D9F5DD;--1:#11">11<11() spans="tyle--1:#88"><44AE spans="tyle--0:#7F">D92 spans="tyle--0:#7F">DBC>3<834} spans="tyle--0:#7FDBCA;--1:#88">4<4AE> spans="tyle--0:#D6DEEB;--1:#40">3F53Hea><44AE spans="tyle--0:#7F">DBECE6buD<44AE spans="tyle--0:#7F">DBECD<>di vdivclass="Nameexpressive-"><44AE spans="tyle--0:#7F">DECD61B0onC4<4AE= spans="tyle--0:#E2817F;--1:#B2">3<834{ spans="tyle--0:#D9F5DD;--1:#11">11<11() spans="tyle--1:#88"><44AE spans="tyle--0:#7F">D92 spans="tyle--0:#7F">DBC>3<834} spans="tyle--0:#7FDBCA;--1:#88">4<4AE spans="tyle--0:#C5E478;--1:#3B">61B04<4AE= spans="tyle--0:#D9F5DD;--1:#11">1<111" spans="tyle--0:#ECC48D;--1:#98">4E4Dbu1<111" spans="tyle--0:#7FDBCA;--1:#88">4<4AE >divclass="Nameec-">3F<53 spans="tyle--0:#D6DEEB;--1:#40">3F53Hea<44AE spans="tyle--0:#7F">DBECDdi><>di vdivclass="Nameexpressive-"><44AE spans="tyle--0:#7F">DECE6buD61B0onC4<4AE= spans="tyle--0:#E2817F;--1:#B2">3<834{ spans="tyle--0:#D9F5DD;--1:#11">11<11() spans="tyle--1:#88"><44AE spans="tyle--0:#7F">D92 spans="tyle--0:#7F">DBC>3<834} spans="tyle--0:#7FDBCA;--1:#88">4<4AE> spans="tyle--0:#D6DEEB;--1:#40">3F53Clic><44AE spans="tyle--0:#7F">DBECE6buDdi><>di vdivclass="Nameexpressive-"><44AE spans="tyle--0:#7F">DECE6secD61B0onC4<4AE= spans="tyle--0:#E2817F;--1:#B2">3<834{ spans="tyle--0:#D6DEEB;--1:#40">3F53han3<834} spans="tyle--0:#7FDBCA;--1:#88">4<4AE spans="tyle--0:#C5E478;--1:#3B">61B04<4AE= spans="tyle--0:#D9F5DD;--1:#11">1<111" spans="tyle--0:#ECC48D;--1:#98">4E4Dbu1<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 automatically handles accessibility for non-interactive elements with event handlers, you can disable this rule.

Further Reading

Section titled “Further Reading”

Equivalents in Other Linters

Section titled “Equivalents in Other Linters”