44 lines
1.4 KiB
Plaintext
44 lines
1.4 KiB
Plaintext
|
== 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
|
||
|
|
|
||
|
|
[source,javascript,diff-id=1,diff-type=noncompliant]
|
||
|
|
----
|
||
|
|
<div onClick={() => {}} />
|
||
|
|
|
||
|
|
<div onMouseOver={ () => {}} } />
|
||
|
|
----
|
||
|
|
|
||
|
|
==== Compliant solution
|
||
|
|
|
||
|
|
[source,javascript,diff-id=1,diff-type=compliant]
|
||
|
|
----
|
||
|
|
<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 - https://www.w3.org/TR/WCAG20-TECHS/SCR2.html[Using redundant keyboard and mouse event handlers]
|
||
|
|
* G90 - https://www.w3.org/TR/WCAG20-TECHS/G90.html[Providing keyboard-triggered event handlers]
|