Create rule S6847 (jsx-a11y/no-noninteractive-element-interactions)…

…: Non-interactive elements shouldn't have event handlers (#4388)

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
+]
+}

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
+]
+}

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
+]
+}

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
+]
+}

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
+]
+}

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
+]
+}

sonar-plugin/javascript-checks/src/main/java/org/sonar/javascript/checks/CheckList.java

@@ -300,6 +300,7 @@ public static List<Class<? extends JavaScriptCheck>> getAllChecks() {
  NoNewNativeNonconstructorCheck.class,
  NoNonNullAssertionCheck.class,
  NoNoninteractiveElementToInteractiveRoleCheck.class,
+ NoNonInteractiveElementsWithHandlersCheck.class,
  NoNoninteractiveTabindexCheck.class,
  NoOctalEscapeCheck.class,
  NoOneIterationLoopCheck.class,

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";
+ }
+}

sonar-plugin/javascript-checks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/S6847.html

@@ -0,0 +1,34 @@
+<p>Non-interactive HTML elements, such as <code>&lt;div&gt;</code> and <code>&lt;span&gt;</code>, are not designed to have event handlers. When these
+elements are given event handlers, it can lead to accessibility issues.</p>
+<h2>Why is this an issue?</h2>
+<p>Attaching event handlers to non-interactive HTML elements can lead to significant accessibility issues. These elements, such as
+<code>&lt;div&gt;</code> and <code>&lt;span&gt;</code>, 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.</p>
+<h2>How to fix it</h2>
+<p>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.</p>
+<h3>Code examples</h3>
+<h4>Noncompliant code example</h4>
+<pre data-diff-id="1" data-diff-type="noncompliant">
+&lt;li onClick={() =&gt; void 0} /&gt;
+&lt;div onClick={() =&gt; void 0} role="listitem" /&gt;
+</pre>
+<h4>Compliant solution</h4>
+<pre data-diff-id="1" data-diff-type="compliant">
+&lt;div onClick={() =&gt; void 0} role="button" /&gt;
+&lt;div onClick={() =&gt; void 0} role="presentation" /&gt;
+&lt;input type="text" onClick={() =&gt; void 0} /&gt; // Interactive element does not require role.
+&lt;button onClick={() =&gt; void 0} className="foo" /&gt; // button is interactive.
+&lt;div onClick={() =&gt; void 0} role="button" aria-hidden /&gt; // This is hidden from the screenreader.
+</pre>
+<h2>Resources</h2>
+<h3>Documentation</h3>
+<ul>
+ <li> WCAG - <a href="https://www.w3.org/TR/wai-aria-practices-1.1/#aria_ex">WAI-ARIA Authoring Practices Guide - Design Patterns and Widgets</a>
+ </li>
+ <li> MDN - <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_button_role#Keyboard_and_focus">ARIA
+ Techniques</a> </li>
+</ul>
+

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"
+ ]
+}

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",