useKeyWithMouseEvents (HTML)

Summary

Rule available since: v2.5.0
Diagnostic Category: lint/a11y/useKeyWithMouseEvents
This rule is recommended, meaning it is enabled by default.
This rule doesn’t have a fix.
The default severity of this rule is error.
Sources:
- Inspired from 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

Require keyboard equivalents for mouse hover events.

Keyboard users cannot trigger onmouseover or onmouseout. Pair onmouseover with onfocus, and pair onmouseout with onblur, so the same behavior is available when focus moves with the keyboard or other assistive technology.

Examples

Invalid

1
<div onmouseover="handleMouseOver()"></div>

code-block.html:1:1 lint/a11y/useKeyWithMouseEvents ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ onmouseover must be accompanied by onfocus.
  
  > 1 │ <div onmouseover="handleMouseOver()"></div>
      │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Users who navigate via keyboard cannot interact with elements that only have mouse event handlers. Add an onfocus attribute to ensure keyboard accessibility.

1
<div onmouseout="handleMouseOut()"></div>

code-block.html:1:1 lint/a11y/useKeyWithMouseEvents ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ onmouseout must be accompanied by onblur.
  
  > 1 │ <div onmouseout="handleMouseOut()"></div>
      │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Users who navigate via keyboard cannot interact with elements that only have mouse event handlers. Add an onblur attribute to ensure keyboard accessibility.

Valid

1
<div onmouseover="handleMouseOver()" onfocus="handleFocus()"></div>

1
<div onmouseout="handleMouseOut()" onblur="handleBlur()"></div>

1
<div onmouseover="handleMouseOver()" onfocus="handleFocus()" onmouseout="handleMouseOut()" onblur="handleBlur()"></div>

Accessibility guidelines

WCAG 2.1.1