mouseEventKeyEvents

Reports mouse events without corresponding keyboard events.

✅ This rule is included in the jsx logical preset.

Mouse events should have keyboard equivalents for users who cannot use a mouse. This ensures that functionality is accessible to all users, such as those with limited hardware or personal disabilities.

Specifically:

• onMouseOver must be paired with onFocus
• onMouseOut must be paired with onBlur

This is required for WCAG 2.1.1 compliance.

Examples

❌ Incorrect

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

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

✅ Correct

<div onMouseOver={() => {}} onFocus={() => {}} />

<div onMouseOut={() => {}} onBlur={() => {}} />

When Not To Use It

If your application doesn’t use mouse event handlers, or if you use a framework that automatically injects key event handlers for equivalent mouse event handlers, you can disable this rule.

Further Reading

• WCAG 2.1.1: Keyboard

Equivalents in Other Linters

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