useKeyWithMouseEvents

import { Tabs, TabItem } from '@astrojs/starlight/components';

<Tabs> <TabItem label="JSX and TSX" icon="seti:javascript"> ## Summary - Rule available since: `v1.0.0` - Diagnostic Category: [`lint/a11y/useKeyWithMouseEvents`](/reference/diagnostics#diagnostic-category) - 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**](/reference/diagnostics#error). - Sources: - Same as [`jsx-a11y/mouse-events-have-key-events`](https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/main/docs/rules/mouse-events-have-key-events.md)

How to configure

json

{
	"linter": {
		"rules": {
			"a11y": {
				"useKeyWithMouseEvents": "error"
			}
		}
	}
}

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

jsx

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

<pre class="language-text"><code class="language-text">code-block.jsx:1:1 <a href="https://biomejs.dev/linter/rules/use-key-with-mouse-events">lint/a11y/useKeyWithMouseEvents</a> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ✖ 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. </code></pre>

jsx

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

<pre class="language-text"><code class="language-text">code-block.jsx:1:1 <a href="https://biomejs.dev/linter/rules/use-key-with-mouse-events">lint/a11y/useKeyWithMouseEvents</a> ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ✖ 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. </code></pre>

Valid

jsx

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

</TabItem> </Tabs>