useKeyWithClickEvents (since v1.0.0)
Diagnostic Category: lint/a11y/useKeyWithClickEvents
Source: click-events-have-key-events
Enforce onClick is accompanied by at least one of the following: onKeyUp, onKeyDown, onKeyPress.
Coding for the keyboard is important for users with physical disabilities who cannot use a mouse, AT compatibility, and screenreader users. This does not apply for interactive or hidden elements.
Examples
Section titled ExamplesInvalid
Section titled 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
Section titled 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>