jsx-a11y/click-events-have-key-events
Require a keyboard handler alongside onClick on non-interactive elements so keyboard users are not locked out.
- Category: Accessibility
- Severity: warn
- Source:
oxlint-builtin:jsx-a11y - Framework: global
- Enabled when: always (unless customRulesOnly=true)
- Documentation: https://oxc.rs/docs/guide/usage/linter/rules/jsx_a11y/click-events-have-key-events
Validate the diagnostic
Confirm the reported code matches this rule before you edit it.
Fires on JSX elements with onClick that lack onKeyUp, onKeyDown, or onKeyPress, restricted to non-interactive HTML elements like div or span — native <button> and <a href> are skipped, as are elements with aria-hidden='true'. False positive: a wrapper div whose only job is to bubble clicks up from an inner <button> that already handles keyboard input.
How to fix
Follow the rule guidance while preserving unrelated behavior.
Copyable fix prompt
Copy this self-contained prompt into your coding agent after you confirm the diagnostic.
Prefer replacing the static element with a native <button>, which gives Enter/Space activation for free. If the div must stay, add an onKeyDown handler that fires the same callback when event.key is 'Enter' or ' ', plus role='button' and tabIndex={0} so keyboard users can focus and activate it. See https://oxc.rs/docs/guide/usage/linter/rules/jsx_a11y/click-events-have-key-events
Related rules
More Accessibility rules from the rules reference:
react-doctor/alt-text: Require alternative text on img, area, input[type='image'], and object elements so screen readers can describe them.react-doctor/anchor-ambiguous-text: Describe a link's destination — avoid bare 'click here' / 'learn more' / 'link' as the only link text.react-doctor/anchor-has-content: Add visible or aria-labelled text inside every `<a>`.react-doctor/anchor-is-valid: Require anchors to navigate to a real destination — use a button for click-only actions instead of href='#' or javascript:void(0).react-doctor/aria-activedescendant-has-tabindex: Add `tabIndex` to elements with `aria-activedescendant` so they're keyboard-focusable.