useKeyWithMouseEvents (since v1.0.0)
Diagnostic Category: lint/a11y/useKeyWithMouseEvents
Sources:
Enforce onMouseOver / onMouseOut are accompanied by onFocus / onBlur.
Coding for the keyboard is important for users with physical disabilities who cannot use a mouse, AT compatibility, and screenreader users.
Examples
Section titled ExamplesInvalid
Section titled Invalid<div onMouseOver={() => {}} />a11y/useKeyWithMouseEvents.js:1:1 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:1 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
Section titled Valid<> <div onMouseOver={() => {}} onFocus={() => {}} /> <div onMouseOut={() => {}} onBlur={() => {}} /> <div onMouseOver={() => {}} {...otherProps} /> <div onMouseOut={() => {}} {...otherProps} /> <div onMouseOver={() => {}} onFocus={() => {}} {...otherProps} /> <div onMouseOut={() => {}} onBlur={() => {}} {...otherProps} /></>