Lint Rules

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} />
</>

Accessibility guidelines

WCAG 2.1.1

Resources