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