Why is this an issue?

Offering the same experience with the mouse and the keyboard allow users to pick their preferred devices.

Additionally, users of assistive technology will also be able to browse the site even if they cannot use the mouse.

This rules detects the following issues:

• when onClick is not accompanied by at least one of the following: onKeyUp, onKeyDown, onKeyPress.
• when onmouseover/onmouseout are not paired by onfocus/onblur.

How to fix it in JSX

Add at least one of the following event handlers onKeyUp, onKeyDown, onKeyPress to the element when using onClick event handler. Add corresponding event handlers onfocus/onblur to the element when using onmouseover/onmouseout event handlers.

Code examples

Noncompliant code example

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

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

Compliant solution

<div onClick={() => {}} onKeyDown={this.handleKeyDown} />

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

Exceptions

This does not apply for interactive or hidden elements, eg. when using aria-hidden="true" attribute.

Resources

• SCR2 - Using redundant keyboard and mouse event handlers
• G90 - Providing keyboard-triggered event handlers