3ddf51837e
You can preview this rule [here](https://sonarsource.github.io/rspec/#/rspec/S1082/javascript) (updated a few minutes after each push). ## Review A dedicated reviewer checked the rule description successfully for: - [ x] logical errors and incorrect information - [ x] information gaps and missing content - [x ] text style and tone - [x ] PR summary and labels follow [the guidelines](https://github.com/SonarSource/rspec/#to-modify-an-existing-rule) --------- Co-authored-by: alexander-kamushkin-sonarsource <alexander-kamushkin-sonarsource@users.noreply.github.com> Co-authored-by: Tibor Blenessy <saberduck@users.noreply.github.com> Co-authored-by: Ilia Kebets <104737176+ilia-kebets-sonarsource@users.noreply.github.com>
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] |