---
source: crates/biome_js_analyze/tests/spec_tests.rs
expression: invalid.jsx
---
# Input
```jsx
<div onMouseOver={() => {}} />;
<div onMouseOut={() => {}} />;
<div onMouseOver={() => {}} onFocus={undefined} />;
<div onMouseOut={() => {}} onBlur={undefined} />;
<div onMouseOver={() => {}} onFocus={null} />;
<div onMouseOut={() => {}} onBlur={null} />;
<div onMouseOver={() => {}}></div>;
<div onMouseOut={() => {}}></div>;
<div {...spread} onMouseOut={() => {}}></div>;
<div {...spread} onMouseOver={() => {}}></div>;
```

# Diagnostics
```
invalid.jsx:1:1 lint/a11y/useKeyWithMouseEvents ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! onMouseOver must be accompanied by onFocus for accessibility.
  
  > 1 │ <div onMouseOver={() => {}} />;
      │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    2 │ <div onMouseOut={() => {}} />;
    3 │ <div onMouseOver={() => {}} onFocus={undefined} />;
  
  i Actions triggered using mouse events should have corresponding events to account for keyboard-only navigation.
  

```

```
invalid.jsx:2:1 lint/a11y/useKeyWithMouseEvents ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! onMouseOut must be accompanied by onBlur for accessibility.
  
    1 │ <div onMouseOver={() => {}} />;
  > 2 │ <div onMouseOut={() => {}} />;
      │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    3 │ <div onMouseOver={() => {}} onFocus={undefined} />;
    4 │ <div onMouseOut={() => {}} onBlur={undefined} />;
  
  i Actions triggered using mouse events should have corresponding events to account for keyboard-only navigation.
  

```

```
invalid.jsx:3:1 lint/a11y/useKeyWithMouseEvents ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! onMouseOver must be accompanied by onFocus for accessibility.
  
    1 │ <div onMouseOver={() => {}} />;
    2 │ <div onMouseOut={() => {}} />;
  > 3 │ <div onMouseOver={() => {}} onFocus={undefined} />;
      │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    4 │ <div onMouseOut={() => {}} onBlur={undefined} />;
    5 │ <div onMouseOver={() => {}} onFocus={null} />;
  
  i Actions triggered using mouse events should have corresponding events to account for keyboard-only navigation.
  

```

```
invalid.jsx:4:1 lint/a11y/useKeyWithMouseEvents ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! onMouseOut must be accompanied by onBlur for accessibility.
  
    2 │ <div onMouseOut={() => {}} />;
    3 │ <div onMouseOver={() => {}} onFocus={undefined} />;
  > 4 │ <div onMouseOut={() => {}} onBlur={undefined} />;
      │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    5 │ <div onMouseOver={() => {}} onFocus={null} />;
    6 │ <div onMouseOut={() => {}} onBlur={null} />;
  
  i Actions triggered using mouse events should have corresponding events to account for keyboard-only navigation.
  

```

```
invalid.jsx:5:1 lint/a11y/useKeyWithMouseEvents ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! onMouseOver must be accompanied by onFocus for accessibility.
  
    3 │ <div onMouseOver={() => {}} onFocus={undefined} />;
    4 │ <div onMouseOut={() => {}} onBlur={undefined} />;
  > 5 │ <div onMouseOver={() => {}} onFocus={null} />;
      │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    6 │ <div onMouseOut={() => {}} onBlur={null} />;
    7 │ <div onMouseOver={() => {}}></div>;
  
  i Actions triggered using mouse events should have corresponding events to account for keyboard-only navigation.
  

```

```
invalid.jsx:6:1 lint/a11y/useKeyWithMouseEvents ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! onMouseOut must be accompanied by onBlur for accessibility.
  
    4 │ <div onMouseOut={() => {}} onBlur={undefined} />;
    5 │ <div onMouseOver={() => {}} onFocus={null} />;
  > 6 │ <div onMouseOut={() => {}} onBlur={null} />;
      │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    7 │ <div onMouseOver={() => {}}></div>;
    8 │ <div onMouseOut={() => {}}></div>;
  
  i Actions triggered using mouse events should have corresponding events to account for keyboard-only navigation.
  

```

```
invalid.jsx:7:1 lint/a11y/useKeyWithMouseEvents ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! onMouseOver must be accompanied by onFocus for accessibility.
  
    5 │ <div onMouseOver={() => {}} onFocus={null} />;
    6 │ <div onMouseOut={() => {}} onBlur={null} />;
  > 7 │ <div onMouseOver={() => {}}></div>;
      │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    8 │ <div onMouseOut={() => {}}></div>;
    9 │ <div {...spread} onMouseOut={() => {}}></div>;
  
  i Actions triggered using mouse events should have corresponding events to account for keyboard-only navigation.
  

```

```
invalid.jsx:8:1 lint/a11y/useKeyWithMouseEvents ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! onMouseOut must be accompanied by onBlur for accessibility.
  
     6 │ <div onMouseOut={() => {}} onBlur={null} />;
     7 │ <div onMouseOver={() => {}}></div>;
   > 8 │ <div onMouseOut={() => {}}></div>;
       │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^
     9 │ <div {...spread} onMouseOut={() => {}}></div>;
    10 │ <div {...spread} onMouseOver={() => {}}></div>;
  
  i Actions triggered using mouse events should have corresponding events to account for keyboard-only navigation.
  

```

```
invalid.jsx:9:1 lint/a11y/useKeyWithMouseEvents ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! onMouseOut must be accompanied by onBlur for accessibility.
  
     7 │ <div onMouseOver={() => {}}></div>;
     8 │ <div onMouseOut={() => {}}></div>;
   > 9 │ <div {...spread} onMouseOut={() => {}}></div>;
       │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    10 │ <div {...spread} onMouseOver={() => {}}></div>;
  
  i Actions triggered using mouse events should have corresponding events to account for keyboard-only navigation.
  

```

```
invalid.jsx:10:1 lint/a11y/useKeyWithMouseEvents ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ! onMouseOver must be accompanied by onFocus for accessibility.
  
     8 │ <div onMouseOut={() => {}}></div>;
     9 │ <div {...spread} onMouseOut={() => {}}></div>;
  > 10 │ <div {...spread} onMouseOver={() => {}}></div>;
       │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  
  i Actions triggered using mouse events should have corresponding events to account for keyboard-only navigation.
  

```