Create rule S6843 (jsx-a11y/no-interactive-element-to-noninteractive -role): Interactive DOM elements should not have non-interactive ARIA roles

its/ruling/src/test/expected/jsts/file-for-rules/javascript-S139.json

@@ -70,5 +70,8 @@
 ],
 "file-for-rules:S6789.js": [
 7
+],
+"file-for-rules:S6843.js": [
+2
 ]
 }

its/ruling/src/test/expected/jsts/file-for-rules/javascript-S1451.json

@@ -192,6 +192,9 @@
 0
 ],
 "file-for-rules:S6840.js": [
+    0
+],
+"file-for-rules:S6843.js": [
 0
 ],
 "file-for-rules:boundOrAssignedEvalOrArguments.js": [

its/ruling/src/test/expected/jsts/file-for-rules/javascript-S3798.json

@@ -66,6 +66,9 @@
 2
 ],
 "file-for-rules:S6840.js": [
+    1
+],
+"file-for-rules:S6843.js": [
 1
 ],
 "file-for-rules:boundOrAssignedEvalOrArguments.js": [

its/ruling/src/test/expected/jsts/file-for-rules/javascript-S6819.json

@@ -1,5 +1,8 @@
 {
 "file-for-rules:S6807.js": [
 4
+],
+"file-for-rules:S6843.js": [
+2
 ]
 }

its/ruling/src/test/expected/jsts/file-for-rules/javascript-S6843.json

@@ -0,0 +1,5 @@
+{
+"file-for-rules:S6843.js": [
+2
+]
+}

its/sources/jsts/custom/S6843.js

@@ -0,0 +1,3 @@
+function myButton() {
+    return <button role="article">Click me!</button>; // Noncompliant; "button" is interactive, but "article" isn't
+}

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

@@ -275,6 +275,7 @@ public static List<Class<? extends JavaScriptCheck>> getAllChecks() {
       NoInMisuseCheck.class,
       NoIncompleteAssertionsCheck.class,
       NoInferrableTypesCheck.class,
+      NoInteractiveElementToNoninteractiveRoleCheck.class,
       NoInvalidAwaitCheck.class,
       NoInvertedBooleanCheckCheck.class,
       NoIsMountedCheck.class,

sonar-plugin/javascript-checks/src/main/java/org/sonar/javascript/checks/NoInteractiveElementToNoninteractiveRoleCheck.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;
+
+@JavaScriptRule
+@TypeScriptRule
+@Rule(key = "S6843")
+public class NoInteractiveElementToNoninteractiveRoleCheck implements EslintBasedCheck {
+
+  @Override
+  public String eslintKey() {
+    return "no-interactive-element-to-noninteractive-role";
+  }
+}

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

@@ -0,0 +1,39 @@
+<h2>Why is this an issue?</h2>
+<p>Interactive DOM elements are elements that users can interact with. These include buttons, links, form inputs, and other elements that can be
+clicked, focused, or otherwise manipulated by the user. ARIA roles, on the other hand, are used to improve accessibility by providing additional
+semantic information about an element’s purpose and behavior. ARIA roles can be divided into two categories: interactive roles and non-interactive
+roles.</p>
+<p>Interactive ARIA roles are used for elements that a user can interact with, such as buttons or sliders. Non-interactive ARIA roles are used for
+elements that are not meant to be interacted with, such as content containers or landmarks. Examples of non-interactive ARIA roles include
+<code>article</code>, <code>banner</code>, <code>complementary</code>, <code>contentinfo</code>, <code>definition</code>, <code>directory</code>,
+<code>document</code>, <code>feed</code>, <code>figure</code>, <code>group</code>, <code>heading</code>, <code>img</code>, <code>list</code>,
+<code>listitem</code>, <code>math</code>, <code>none</code>, <code>note</code>, <code>presentation</code>, <code>region</code>,
+<code>separator</code>, <code>status</code>, <code>term</code>, and <code>tooltip</code>.</p>
+<p>Interactive DOM elements should not have non-interactive ARIA roles because it can confuse assistive technologies and their users. For example, if
+a button (an interactive element) is given a non-interactive ARIA role like <code>article</code>, it can mislead users into thinking that the button
+is just a piece of content, not something they can interact with. This can lead to a poor user experience, especially for users who rely on assistive
+technologies to navigate the web.</p>
+<p>Therefore, it’s important to ensure that interactive DOM elements are not given non-interactive ARIA roles.</p>
+<h2>How to fix it</h2>
+<p>Ensure that interactive DOM elements are not given non-interactive ARIA roles.</p>
+<h3>Code examples</h3>
+<h4>Noncompliant code example</h4>
+<pre data-diff-id="1" data-diff-type="noncompliant">
+function myButton() {
+    return &lt;button role="article"&gt;Click me!&lt;/button&gt;; // Noncompliant; "button" is interactive, but "article" isn't
+}
+</pre>
+<h4>Compliant solution</h4>
+<pre data-diff-id="1" data-diff-type="compliant">
+function myButton() {
+    return &lt;button role="button"&gt;Click me!&lt;/button&gt;;
+}
+</pre>
+<h2>Resources</h2>
+<h3>Documentation</h3>
+<ul>
+  <li> WCAG - <a href="https://www.w3.org/WAI/WCAG21/Understanding/name-role-value">Name, Role, Value</a> </li>
+  <li> WCAG - <a href="https://www.w3.org/TR/wai-aria-1.1/#usage_intro">WAI-ARIA Roles</a> </li>
+  <li> MDN web docs - <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles">WAI-ARIA Roles</a> </li>
+</ul>
+

sonar-plugin/javascript-checks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/S6843.json

@@ -0,0 +1,29 @@
+{
+  "title": "Interactive DOM elements should not have non-interactive ARIA roles",
+  "type": "CODE_SMELL",
+  "status": "ready",
+  "remediation": {
+    "func": "Constant\/Issue",
+    "constantCost": "5min"
+  },
+  "tags": [
+    "accessibility",
+    "react"
+  ],
+  "defaultSeverity": "Major",
+  "ruleSpecification": "RSPEC-6843",
+  "sqKey": "S6843",
+  "scope": "All",
+  "quickfix": "infeasible",
+  "code": {
+    "impacts": {
+      "MAINTAINABILITY": "LOW",
+      "RELIABILITY": "MEDIUM"
+    },
+    "attribute": "CONVENTIONAL"
+  },
+  "compatibleLanguages": [
+    "JAVASCRIPT",
+    "TYPESCRIPT"
+  ]
+}

sonar-plugin/javascript-checks/src/main/resources/org/sonar/l10n/javascript/rules/javascript/Sonar_way_profile.json

@@ -309,6 +309,7 @@
     "S6836",
     "S6840",
     "S6841",
-    "S6842"
+    "S6842",
+    "S6843"
   ]
 }