useKeyWithMouseEvents (since v1.0.0)

Diagnostic Category: lint/a11y/useKeyWithMouseEvents

Source: mouse-events-have-key-events

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

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

<>
  <div onMouseOver={() => {}} onFocus={() => {}} />
  <div onMouseOut={() => {}} onBlur={() => {}} />
  <div onMouseOver={() => {}} {...otherProps} />
  <div onMouseOut={() => {}} {...otherProps} />
  <div onMouseOver={() => {}} onFocus={() => {}} {...otherProps} />
  <div onMouseOut={() => {}} onBlur={() => {}} {...otherProps} />
</>

Accessibility guidelines

WCAG 2.1.1