useKeyWithMouseEvents (since v10.0.0)
This rule is recommended by Rome.
Enforce that onMouseOver/onMouseOut are accompanied by onFocus/onBlur for keyboard-only users. It is important to take into account users with physical disabilities who cannot use a mouse, who use assistive technology or screenreader.
Examples
Invalid
<div onMouseOver={() => {}} />a11y/useKeyWithMouseEvents.js:1:4 lint/a11y/useKeyWithMouseEvents ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
✖ onMouseOver must be accompanied by onFocus for accessibility.
> 1 │ <div onMouseOver={() => {}} />
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
2 │
ℹ Actions triggered using mouse events should have corresponding events to account for keyboard-only navigation.
<div onMouseOut={() => {}} />a11y/useKeyWithMouseEvents.js:1:4 lint/a11y/useKeyWithMouseEvents ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
✖ onMouseOut must be accompanied by onBlur for accessibility.
> 1 │ <div onMouseOut={() => {}} />
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
2 │
ℹ Actions triggered using mouse events should have corresponding events to account for keyboard-only navigation.
Valid
<>
<div onMouseOver={() => {}} onFocus={() => {}} />
<div onMouseOut={() => {}} onBlur={() => {}} />
<div onMouseOver={() => {}} {...otherProps} />
<div onMouseOut={() => {}} {...otherProps} />
<div onMouseOver={() => {}} onFocus={() => {}} {...otherProps} />
<div onMouseOut={() => {}} onBlur={() => {}} {...otherProps} />
</>