jsx-a11y/click-events-have-key-events

A div with an onClick only works with a mouse. People who use a keyboard, a switch or a screen reader can't trigger it, because Enter and Space do nothing on a div.

The best fix is usually a button. It takes focus and turns Enter and Space into a click without any extra code. If you need another element, add onKeyDown, onKeyUp or onKeyPress.

The rule skips components, controls such as button, input, select and a with an href, elements with aria-hidden, and elements with role="presentation" or role="none".

Configure#

Off by default. To turn it on:

[lint.rules]
"jsx-a11y/click-events-have-key-events" = "error" # or "warn"

Examples#

const row = <div onClick={openDetails}>{item.name}</div>;
const more = <a onClick={loadMore}>Load more</a>;

const row = <button onClick={openDetails}>{item.name}</button>;

const card = (
  <div role="button" tabIndex={0} onClick={openDetails} onKeyDown={openOnEnter}>
    {item.name}
  </div>
);