useKeyWithMouseEvents
Summary
Section titled “Summary”- Rule available since:
v1.0.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:
How to configure
Section titled “How to configure”{ "linter": { "rules": { "a11y": { "useKeyWithMouseEvents": "error" } } }}Description
Section titled “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
Section titled “Examples”Invalid
Section titled “Invalid”<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.
<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.
<> <div onMouseOver={() => {}} onFocus={() => {}} /> <div onMouseOut={() => {}} onBlur={() => {}} /> <div onMouseOver={() => {}} {...otherProps} /> <div onMouseOut={() => {}} {...otherProps} /> <div onMouseOver={() => {}} onFocus={() => {}} {...otherProps} /> <div onMouseOut={() => {}} onBlur={() => {}} {...otherProps} /></>Accessibility guidelines
Section titled “Accessibility guidelines”Related links
Section titled “Related links”Summary
Section titled “Summary”- 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
- Inspired from
How to configure
Section titled “How to configure”{ "linter": { "rules": { "a11y": { "useKeyWithMouseEvents": "error" } } }}Description
Section titled “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
Section titled “Examples”Invalid
Section titled “Invalid”<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.
<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.
<div onmouseover="handleMouseOver()" onfocus="handleFocus()"></div><div onmouseout="handleMouseOut()" onblur="handleBlur()"></div><div onmouseover="handleMouseOver()" onfocus="handleFocus()" onmouseout="handleMouseOut()" onblur="handleBlur()"></div>Accessibility guidelines
Section titled “Accessibility guidelines”Related links
Section titled “Related links”Sponsored by
Copyright (c) 2023-present Biome Developers and Contributors.