staticElementInteractions

Reports static elements with event handlers that lack ARIA roles.

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

Static HTML elements like <div> and <span> have no semantic meaning. When adding interactive event handlers to these elements, you should provide a role attribute to convey their purpose to screen readers, search engine crawlers, and other technologies that rely on semantic elements.

Semantic HTML elements like <button> already have appropriate roles and don’t need additional attributes.

This is required for WCAG 4.1.2 compliance.

Examples

❌ Incorre

CE6dCB0onCliA3<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">AE d ivclassNa="meco">d>d>d>CE6spCB0onKeyDoA3<4{sp ansty="le--0:#D6DEEB;--1:#403F">53handl3<4}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">D61B0onC4<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">44A<" /><>di vdivclass="Nameexpressive-"><44AE spans="tyle--0:#7F">DECE6D61B0onKey4<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">4E4D1<111" spans="tyle--0:#7FDBCA;--1:#88">44A<" />di><>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">44A<} />di>

When Not To Use It

If you are using a framework that automatically assigns element roles, you can disable this rule.

Further Reading

• WCAG 4.1.2: Name, Role, Value
• WAI-ARIA role attribute

Equivalents in Other Linters

• Biome: noStaticElementInteractions
• ESLint: jsx-a11y/no-static-element-interactions
• Oxlint: jsx-a11y/no-static-element-interactions