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
