clickEventKeyEvents

Reports onClick without keyboard event handlers.

✅ This rule is included in the jsx logical preset.

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:

• onKeyDown
• onKeyPress
• onKeyUp

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.

Examples

❌ Incorrect

<div onClick={() => {}} />

<span onClick={handler} />

✅ Correct

<div onClick={() => {}} onKeyDown={handler} />

<div onClick={() => {}} onKeyUp={handler} />

<button onClick={() => {}} />

<div onClick={() => {}} aria-hidden="true" />

<CustomElement onClick={() => {}} aria-hidden="true" />

When Not To Use It

If you’re using a framework that automatically assigns keyboard events for corresponding mouse events, you can safely disable this rule.

Further Reading

• MDN: click event
• WCAG 2.1.1: Keyboard

Equivalents in Other Linters

• ESLint: jsx-a11y/click-events-have-key-events
• Oxlint: jsx_a11y/click-events-have-key-events