useKeyWithMouseEvents

JSX and TSX

Summary

Rule available since: v1.0.0
Diagnostic Category: lint/a11y/useKeyWithMouseEvents
This rule is recommended, which means is enabled by default.
This rule doesn’t have a fix.
The default severity of this rule is error.
Sources:
- Same as jsx-a11y/mouse-events-have-key-events

How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "a11y": {
5
        "useKeyWithMouseEvents": "error"
6
      }
7
    }
8
  }
9
}

Description

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

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

code-block.jsx: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.

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

code-block.jsx: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

1
<>
2
  <div onMouseOver={() => {}} onFocus={() => {}} />
3
  <div onMouseOut={() => {}} onBlur={() => {}} />
4
  <div onMouseOver={() => {}} {...otherProps} />
5
  <div onMouseOut={() => {}} {...otherProps} />
6
  <div onMouseOver={() => {}} onFocus={() => {}} {...otherProps} />
7
  <div onMouseOut={() => {}} onBlur={() => {}} {...otherProps} />
8
</>

Accessibility guidelines

WCAG 2.1.1