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

Enforce that onmouseover is accompanied by onfocus and onmouseout by onblur.

Coding for the keyboard is important for users with physical disabilities who cannot use a mouse, AT compatibility, and screen reader users.

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