diff --git a/its/ruling/src/test/expected/jsts/ant-design/javascript-S6847.json b/its/ruling/src/test/expected/jsts/ant-design/javascript-S6847.json new file mode 100644 index 00000000000..2ebb2a3887a --- /dev/null +++ b/its/ruling/src/test/expected/jsts/ant-design/javascript-S6847.json @@ -0,0 +1,13 @@ +{ +"ant-design:components/space/__tests__/index.test.js": [ +142 +], +"ant-design:site/theme/template/Content/Demo/index.jsx": [ +146, +379, +396, +416, +464, +474 +] +} diff --git a/its/ruling/src/test/expected/jsts/ant-design/typescript-S6847.json b/its/ruling/src/test/expected/jsts/ant-design/typescript-S6847.json new file mode 100644 index 00000000000..e0f84e33720 --- /dev/null +++ b/its/ruling/src/test/expected/jsts/ant-design/typescript-S6847.json @@ -0,0 +1,17 @@ +{ +"ant-design:components/alert/index.tsx": [ +177 +], +"ant-design:components/avatar/avatar.tsx": [ +168 +], +"ant-design:components/checkbox/Checkbox.tsx": [ +120 +], +"ant-design:components/radio/radio.tsx": [ +68 +], +"ant-design:site/theme/template/Content/Article.tsx": [ +113 +] +} diff --git a/its/ruling/src/test/expected/jsts/desktop/typescript-S6847.json b/its/ruling/src/test/expected/jsts/desktop/typescript-S6847.json new file mode 100644 index 00000000000..b081e684ddc --- /dev/null +++ b/its/ruling/src/test/expected/jsts/desktop/typescript-S6847.json @@ -0,0 +1,24 @@ +{ +"desktop:app/src/ui/changes/commit-message.tsx": [ +753 +], +"desktop:app/src/ui/dialog/dialog.tsx": [ +593 +], +"desktop:app/src/ui/diff/image-diffs/image-container.tsx": [ +23 +], +"desktop:app/src/ui/dropdown-select-button.tsx": [ +161 +], +"desktop:app/src/ui/lib/avatar.tsx": [ +223 +], +"desktop:app/src/ui/lib/vertical-segmented-control/vertical-segmented-control.tsx": [ +197 +], +"desktop:app/src/ui/tutorial/tutorial-step-instruction.tsx": [ +34, +35 +] +} diff --git a/its/ruling/src/test/expected/jsts/react-cloud-music/javascript-S6847.json b/its/ruling/src/test/expected/jsts/react-cloud-music/javascript-S6847.json new file mode 100644 index 00000000000..3efc4a82b4d --- /dev/null +++ b/its/ruling/src/test/expected/jsts/react-cloud-music/javascript-S6847.json @@ -0,0 +1,20 @@ +{ +"react-cloud-music:src/application/Player/play-list/index.jsx": [ +225 +], +"react-cloud-music:src/application/Search/index.jsx": [ +54, +152 +], +"react-cloud-music:src/application/SongList/index.jsx": [ +41 +], +"react-cloud-music:src/application/User/Login/LoginForm/index.jsx": [ +46, +51, +56 +], +"react-cloud-music:src/application/User/Login/PhoneForm/index.jsx": [ +42 +] +} diff --git a/its/ruling/src/test/expected/jsts/redux/javascript-S6847.json b/its/ruling/src/test/expected/jsts/redux/javascript-S6847.json new file mode 100644 index 00000000000..54854479ba2 --- /dev/null +++ b/its/ruling/src/test/expected/jsts/redux/javascript-S6847.json @@ -0,0 +1,8 @@ +{ +"redux:examples/todomvc/components/TodoItem.js": [ +43 +], +"redux:examples/todos-with-undo/components/Todo.js": [ +6 +] +} diff --git a/its/ruling/src/test/expected/jsts/vuetify/typescript-S6847.json b/its/ruling/src/test/expected/jsts/vuetify/typescript-S6847.json new file mode 100644 index 00000000000..9ebd62bb3ae --- /dev/null +++ b/its/ruling/src/test/expected/jsts/vuetify/typescript-S6847.json @@ -0,0 +1,8 @@ +{ +"vuetify:packages/vuetify/src/components/VImg/VImg.tsx": [ +206 +], +"vuetify:packages/vuetify/src/components/VRating/VRating.tsx": [ +181 +] +} diff --git a/sonar-plugin/javascript-checks/src/main/java/org/sonar/javascript/checks/CheckList.java b/sonar-plugin/javascript-checks/src/main/java/org/sonar/javascript/checks/CheckList.java index 5c07eaa49b9..2ac0382f769 100644 --- a/sonar-plugin/javascript-checks/src/main/java/org/sonar/javascript/checks/CheckList.java +++ b/sonar-plugin/javascript-checks/src/main/java/org/sonar/javascript/checks/CheckList.java @@ -300,6 +300,7 @@ public static List> getAllChecks() { NoNewNativeNonconstructorCheck.class, NoNonNullAssertionCheck.class, NoNoninteractiveElementToInteractiveRoleCheck.class, + NoNonInteractiveElementsWithHandlersCheck.class, NoNoninteractiveTabindexCheck.class, NoOctalEscapeCheck.class, NoOneIterationLoopCheck.class, diff --git a/sonar-plugin/javascript-checks/src/main/java/org/sonar/javascript/checks/NoNonInteractiveElementsWithHandlersCheck.java b/sonar-plugin/javascript-checks/src/main/java/org/sonar/javascript/checks/NoNonInteractiveElementsWithHandlersCheck.java new file mode 100644 index 00000000000..30ccb9099cc --- /dev/null +++ b/sonar-plugin/javascript-checks/src/main/java/org/sonar/javascript/checks/NoNonInteractiveElementsWithHandlersCheck.java @@ -0,0 +1,36 @@ +/* + * SonarQube JavaScript Plugin + * Copyright (C) 2011-2023 SonarSource SA + * mailto:info AT sonarsource DOT com + * + * This program is free software; you can redistribute it and/or + * modify it under the terms of the GNU Lesser General Public + * License as published by the Free Software Foundation; either + * version 3 of the License, or (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * Lesser General Public License for more details. + * + * You should have received a copy of the GNU Lesser General Public License + * along with this program; if not, write to the Free Software Foundation, + * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. + */ +package org.sonar.javascript.checks; + +import org.sonar.check.Rule; +import org.sonar.plugins.javascript.api.EslintBasedCheck; +import org.sonar.plugins.javascript.api.JavaScriptRule; +import org.sonar.plugins.javascript.api.TypeScriptRule; + +@TypeScriptRule +@JavaScriptRule +@Rule(key = "S6847") +public class NoNonInteractiveElementsWithHandlersCheck implements EslintBasedCheck { + + @Override + public String eslintKey() { + return "no-noninteractive-element-interactions"; + } +} diff --git a/sonar-plugin/javascript-checks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/S6847.html b/sonar-plugin/javascript-checks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/S6847.html new file mode 100644 index 00000000000..10b840b6b0b --- /dev/null +++ b/sonar-plugin/javascript-checks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/S6847.html @@ -0,0 +1,34 @@ +

Non-interactive HTML elements, such as <div> and <span>, are not designed to have event handlers. When these +elements are given event handlers, it can lead to accessibility issues.

+

Why is this an issue?

+

Attaching event handlers to non-interactive HTML elements can lead to significant accessibility issues. These elements, such as +<div> and <span>, are not designed to interact with assistive technologies like screen readers, making it +difficult for users with disabilities to navigate and interact with the website. Additionally, these elements may not be focusable or provide visual +feedback when interacted with, resulting in a confusing and potentially frustrating user experience. Therefore, to maintain an accessible and +user-friendly website, event handlers should be used exclusively with interactive elements.

+

How to fix it

+

To fix this issue, remove the event handler from the non-interactive element and attach it to an interactive element instead. If the element is not +interactive, it should not have an event handler.

+

Code examples

+

Noncompliant code example

+
+<li onClick={() => void 0} />
+<div onClick={() => void 0} role="listitem" />
+
+

Compliant solution

+
+<div onClick={() => void 0} role="button" />
+<div onClick={() => void 0} role="presentation" />
+<input type="text" onClick={() => void 0} /> // Interactive element does not require role.
+<button onClick={() => void 0} className="foo" /> // button is interactive.
+<div onClick={() => void 0} role="button" aria-hidden /> // This is hidden from the screenreader.
+
+

Resources

+

Documentation

+ + diff --git a/sonar-plugin/javascript-checks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/S6847.json b/sonar-plugin/javascript-checks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/S6847.json new file mode 100644 index 00000000000..f4894d6e44b --- /dev/null +++ b/sonar-plugin/javascript-checks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/S6847.json @@ -0,0 +1,29 @@ +{ + "title": "Non-interactive elements shouldn\u0027t have event handlers", + "type": "CODE_SMELL", + "status": "ready", + "remediation": { + "func": "Constant\/Issue", + "constantCost": "5min" + }, + "tags": [ + "accessibility", + "react" + ], + "defaultSeverity": "Minor", + "ruleSpecification": "RSPEC-6847", + "sqKey": "S6847", + "scope": "All", + "quickfix": "infeasible", + "code": { + "impacts": { + "MAINTAINABILITY": "MEDIUM", + "RELIABILITY": "LOW" + }, + "attribute": "CONVENTIONAL" + }, + "compatibleLanguages": [ + "JAVASCRIPT", + "TYPESCRIPT" + ] +} diff --git a/sonar-plugin/javascript-checks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/Sonar_way_profile.json b/sonar-plugin/javascript-checks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/Sonar_way_profile.json index 33100f28ac7..49c984c3258 100644 --- a/sonar-plugin/javascript-checks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/Sonar_way_profile.json +++ b/sonar-plugin/javascript-checks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/Sonar_way_profile.json @@ -315,6 +315,7 @@ "S6844", "S6845", "S6846", + "S6847", "S6848", "S6849", "S6850",