useKeyWithClickEvents (since v10.0.0)
This rule is recommended by Rome.
Enforce to have the onClick
mouse event with the onKeyUp
, the onKeyDown
, or the onKeyPress
keyboard event.
Examples
Invalid
<div onClick={() => {}} />
a11y/useKeyWithClickEvents.js:1:1 lint/a11y/useKeyWithClickEvents ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
✖ Enforce to have the onClick mouse event with the onKeyUp, the onKeyDown, or the onKeyPress keyboard event.
> 1 │ <div onClick={() => {}} />
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^
2 │
ℹ Actions triggered using mouse events should have corresponding keyboard events to account for keyboard-only navigation.
<div onClick={() => {}} ></div>
a11y/useKeyWithClickEvents.js:1:1 lint/a11y/useKeyWithClickEvents ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
✖ Enforce to have the onClick mouse event with the onKeyUp, the onKeyDown, or the onKeyPress keyboard event.
> 1 │ <div onClick={() => {}} ></div>
│ ^^^^^^^^^^^^^^^^^^^^^^^^^
2 │
ℹ Actions triggered using mouse events should have corresponding keyboard events to account for keyboard-only navigation.
Valid
<div onClick={() => {}} onKeyDown={handleKeyDown} />
<div onClick={() => {}} onKeyUp={handleKeyUp} />
<div onClick={() => {}} onKeyPress={handleKeyPress} />
// this rule doesn't apply to user created component
<MyComponent onClick={() => {}} />
<div onClick={() => {}} {...spread}></div>
<div {...spread} onClick={() => {}} ></div>
<button onClick={() => console.log("test")}>Submit</button>