Reports onClick without keyboard event handlers.
✅ This rule is included in the jsx logical and logicalStrict presets.
Elements with onClick handlers must also have keyboard event handlers for accessibility.
Users who are not using a mouse, such as those using keyboards or assistive technologies, often rely on those keyboard events to be able to use the page.
If non-interactive elements such as <div>s with an onClick event handler should have at least one of the following corresponding keyboard events registered as well:
onKeyDownonKeyPressonKeyUp
Interactive elements like <button> and <input> are already keyboard accessible and don’t require additional handlers.
This is required for WCAG 2.1.1 compliance.
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>CE6spCB0onCliA3<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">61B0onKey4<4AE= spans="tyle--0:#E2817F;--1:#B2">3<834{ spans="tyle--0:#D6DEEB;--1:#40">3F53han3<834} spans="tyle--0:#7FDBCA;--1:#88">44A<} /><>di vdivclass="Nameexpressive-"><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">61B0onK4<4AE= spans="tyle--0:#E2817F;--1:#B2">3<834{ spans="tyle--0:#D6DEEB;--1:#40">3F53han3<834} 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><>di vdivclass="Nameexpressive-"><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">61B0aria-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-">4<4AE< spans="tyle--0:#F78C6C;--1:#AA">0982CustomEle4<4AE spans="tyle--0:#C5E478;--1:#3B">61B0onC4<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">61B0aria-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>
If you’re using a framework that automatically assigns keyboard events for corresponding mouse events, you can safely disable this rule.
