Skip to main content

a11y/useKeyWithMouseEvents

MISSING DOCUMENTATION

Examples

Invalid

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

 file.tsx:1:5 lint/a11y/useKeyWithMouseEvents ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Pair the onMouseOver mouse event with the onFocus keyboard event.

    <div onMouseOver={ () => void 0 } />
         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^

  Actions triggered using mouse events should have corresponding
    keyboard events to account for keyboard-only navigation.


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

 file.tsx:1:5 lint/a11y/useKeyWithMouseEvents ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Pair the onMouseOut mouse event with the onBlur keyboard event.

    <div onMouseOut={ () => void 0 } />
         ^^^^^^^^^^^^^^^^^^^^^^^^^^^

  Actions triggered using mouse events should have corresponding
    keyboard events to account for keyboard-only navigation.


<div onMouseOver={ () => void 0 } >{props}</div>

 file.tsx:1:5 lint/a11y/useKeyWithMouseEvents ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Pair the onMouseOver mouse event with the onFocus keyboard event.

    <div onMouseOver={ () => void 0 } >{props}</div>
         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^

  Actions triggered using mouse events should have corresponding
    keyboard events to account for keyboard-only navigation.


<div onMouseOut={ () => void 0 } >{props}</div>

 file.tsx:1:5 lint/a11y/useKeyWithMouseEvents ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Pair the onMouseOut mouse event with the onBlur keyboard event.

    <div onMouseOut={ () => void 0 } >{props}</div>
         ^^^^^^^^^^^^^^^^^^^^^^^^^^^

  Actions triggered using mouse events should have corresponding
    keyboard events to account for keyboard-only navigation.

<div onmouseover="() => void 0" ></div>

 file.html:1:5 lint/a11y/useKeyWithMouseEvents ━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Pair the onmouseover mouse event with the onfocus keyboard event.

    <div onmouseover="() => void 0" ></div>
         ^^^^^^^^^^^^^^^^^^^^^^^^^^

  Actions triggered using mouse events should have corresponding
    keyboard events to account for keyboard-only navigation.


<div onmouseout="() => void 0" ></div>

 file.html:1:5 lint/a11y/useKeyWithMouseEvents ━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Pair the onmouseout mouse event with the onblur keyboard event.

    <div onmouseout="() => void 0" ></div>
         ^^^^^^^^^^^^^^^^^^^^^^^^^

  Actions triggered using mouse events should have corresponding
    keyboard events to account for keyboard-only navigation.


<div onmouseover="() => void 0" >lorem ipsum</div>

 file.html:1:5 lint/a11y/useKeyWithMouseEvents ━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Pair the onmouseover mouse event with the onfocus keyboard event.

    <div onmouseover="() => void 0" >lorem ipsum</div>
         ^^^^^^^^^^^^^^^^^^^^^^^^^^

  Actions triggered using mouse events should have corresponding
    keyboard events to account for keyboard-only navigation.


<div onmouseout="() => void 0" >lorem ipsum</div>

 file.html:1:5 lint/a11y/useKeyWithMouseEvents ━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Pair the onmouseout mouse event with the onblur keyboard event.

    <div onmouseout="() => void 0" >lorem ipsum</div>
         ^^^^^^^^^^^^^^^^^^^^^^^^^

  Actions triggered using mouse events should have corresponding
    keyboard events to account for keyboard-only navigation.

Valid

<div onMouseOver={ () => void 0 } onFocus={() => void 0} />
<div onMouseOut={ () => void 0 } onBlur={() => void 0} />
<div onMouseOver={ () => void 0 }  onFocus={() => void 0} >{props}</div>
<div onMouseOut={ () => void 0 }  onBlur={() => void 0} >{props}</div>
<Div onMouseOut={ () => void 0 } >{props}</Div>
<div onmouseover="() => void 0" onfocus="() => void 0" ></div>
<div onmouseout="() => void 0" onblur="() => void 0" ></div>
<div onmouseover="() => void 0"  onfocus="() => void 0" >lorem ipsum</div>
<div onmouseout="() => void 0"  onblur="() => void 0" >lorem ipsum</div>