jsx-a11y/mouse-events-have-key-events

Require onFocus with onMouseOver and onBlur with onMouseOut

Also called jsx_a11y/mouse-events-have-key-events

Keyboard users never hover, so a tooltip or a preview that only shows on hover doesn't exist for them. Focus is the keyboard's version of hover, so pair onMouseOver with onFocus, and onMouseOut with onBlur.

The rule only checks HTML elements, not components.

Configure#

Off by default. To turn it on:

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

Every option, set to its default:

bunfig.toml
[lint.rules]
"jsx-a11y/mouse-events-have-key-events" = ["error", {
  hoverInHandlers = ["onMouseOver"],
  hoverOutHandlers = ["onMouseOut"],
}]

Examples#

example.jsx2 problems
const help = (
  <button onMouseOver={showTooltip} onMouseOut={hideTooltip}>
    Help
  </button>
);
example.jsxNo problems
const help = (
  <button
    onMouseOver={showTooltip}
    onFocus={showTooltip}
    onMouseOut={hideTooltip}
    onBlur={hideTooltip}
  >
    Help
  </button>
);

Options#

OptionDefaultWhat it does
hoverInHandlers["onMouseOver"]Handlers that need an onFocus next to them.
hoverOutHandlers["onMouseOut"]Handlers that need an onBlur next to them.

Your list replaces the default. onMouseEnter isn't checked unless you add it:

example.jsxNo problems
const card = <div onMouseEnter={showPreview} />;
example.jsxwith { "hoverInHandlers": ["onMouseOver", "onMouseEnter"] }1 problem
const card = <div onMouseEnter={showPreview} />;