Add rule S6819 (jsx-a11y/prefer-tag-over-role): Prefer tag over ARI…

…A role (#4267)

its/ruling/src/test/expected/jsts/ant-design/javascript-S6819.json

@@ -0,0 +1,5 @@
+{
+"ant-design:components/grid/__tests__/gap.test.js": [
+16
+]
+}

its/ruling/src/test/expected/jsts/ant-design/typescript-S6819.json

@@ -0,0 +1,20 @@
+{
+"ant-design:components/_util/transButton.tsx": [
+60
+],
+"ant-design:components/alert/__tests__/index.test.tsx": [
+91
+],
+"ant-design:components/divider/index.tsx": [
+57
+],
+"ant-design:components/input/ClearableLabeledInput.tsx": [
+55
+],
+"ant-design:components/table/hooks/useFilter/FilterDropdown.tsx": [
+466
+],
+"ant-design:components/typography/Base/index.tsx": [
+399
+]
+}

its/ruling/src/test/expected/jsts/desktop/typescript-S6819.json

@@ -0,0 +1,14 @@
+{
+"desktop:app/src/ui/changes/commit-message.tsx": [
+753
+],
+"desktop:app/src/ui/changes/undo-commit.tsx": [
+36
+],
+"desktop:app/src/ui/dialog/header.tsx": [
+67
+],
+"desktop:app/src/ui/lib/vertical-segmented-control/segmented-item.tsx": [
+67
+]
+}

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

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

its/ruling/src/test/expected/jsts/fireact/javascript-S6819.json

@@ -0,0 +1,5 @@
+{
+"fireact:src/components/Pagination/index.js": [
+40
+]
+}

its/ruling/src/test/expected/jsts/vuetify/typescript-S6819.json

@@ -0,0 +1,44 @@
+{
+"vuetify:packages/vuetify/src/components/VBadge/VBadge.tsx": [
+112
+],
+"vuetify:packages/vuetify/src/components/VBanner/VBanner.tsx": [
+84
+],
+"vuetify:packages/vuetify/src/components/VIcon/VIcon.tsx": [
+53
+],
+"vuetify:packages/vuetify/src/components/VImg/VImg.tsx": [
+292
+],
+"vuetify:packages/vuetify/src/components/VList/VList.tsx": [
+225
+],
+"vuetify:packages/vuetify/src/components/VList/VListGroup.tsx": [
+112
+],
+"vuetify:packages/vuetify/src/components/VPagination/VPagination.tsx": [
+308
+],
+"vuetify:packages/vuetify/src/components/VProgressCircular/VProgressCircular.tsx": [
+77
+],
+"vuetify:packages/vuetify/src/components/VProgressLinear/VProgressLinear.tsx": [
+100
+],
+"vuetify:packages/vuetify/src/components/VSlider/VSliderThumb.tsx": [
+123
+],
+"vuetify:packages/vuetify/src/components/VSnackbar/VSnackbar.tsx": [
+130
+],
+"vuetify:packages/vuetify/src/components/VTextField/VTextField.tsx": [
+182
+],
+"vuetify:packages/vuetify/src/components/VTextarea/VTextarea.tsx": [
+226
+],
+"vuetify:packages/vuetify/src/composables/icons.tsx": [
+116
+]
+}

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

@@ -356,6 +356,7 @@ public static List<Class<? extends JavaScriptCheck>> getAllChecks() {
       PreferReturnThisTypeCheck.class,
       PreferSpreadCheck.class,
       PreferStringStartsEndsWithCheck.class,
+      PreferTagOverRoleCheck.class,
       PreferTypeGuardCheck.class,
       PrimitiveWrappersCheck.class,
       ProcessArgvCheck.class,

sonar-plugin/javascript-checks/src/main/java/org/sonar/javascript/checks/PreferTagOverRoleCheck.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 = "S6819")
+public class PreferTagOverRoleCheck implements EslintBasedCheck {
+
+  @Override
+  public String eslintKey() {
+    return "prefer-tag-over-role";
+  }
+}

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

@@ -0,0 +1,33 @@
+<h2>Why is this an issue?</h2>
+<p>ARIA (Accessible Rich Internet Applications) roles are used to make web content and web applications more accessible to people with disabilities.
+However, you should not use ARIA role on a generic element (like <code>span</code> or <code>div</code>) if there is a semantic HTML tag with similar
+functionality, just use that tag instead.</p>
+<p>For example, instead of using a div element with a role of button (<code>&lt;div role="button"&gt;Click me&lt;/div&gt;</code>), you should just use
+a button element (<code>&lt;button&gt;Click me&lt;/button&gt;</code>).</p>
+<p>Semantic HTML tags are generally preferred over ARIA roles for accessibility due to their built-in functionality, universal support by browsers and
+assistive technologies, simplicity, and maintainability. They come with inherent behaviors and keyboard interactions, reducing the need for additional
+JavaScript. Semantic HTML also enhances SEO by helping search engines better understand the content and structure of web pages. While ARIA roles are
+useful, they should be considered a last resort when no suitable HTML element can provide the required behavior or semantics.</p>
+<h2>How to fix it in JSX</h2>
+<p>Replace the ARIA role with an appropriate HTML tag.</p>
+<h3>Code examples</h3>
+<h4>Noncompliant code example</h4>
+<pre data-diff-id="1" data-diff-type="noncompliant">
+&lt;div role="button" tabindex="0" onClick={handleClick}&gt;Click me&lt;/div&gt;
+</pre>
+<h4>Compliant solution</h4>
+<pre data-diff-id="1" data-diff-type="compliant">
+&lt;button onClick={handleClick}&gt;Click me&lt;/button&gt;
+</pre>
+<h2>Resources</h2>
+<h3>Documentation</h3>
+<ul>
+  <li> <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques">MDN - Using ARIA: Roles, states, and properties</a>
+  </li>
+  <li> <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles">MDN - ARIA roles (Reference)</a> </li>
+</ul>
+<h3>Standards</h3>
+<ul>
+  <li> <a href="https://www.w3.org/TR/wai-aria-1.2/">W3C - Accessible Rich Internet Applications (WAI-ARIA) 1.2</a> </li>
+</ul>
+

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

@@ -0,0 +1,28 @@
+{
+  "title": "Prefer tag over ARIA role",
+  "type": "CODE_SMELL",
+  "status": "ready",
+  "remediation": {
+    "func": "Constant\/Issue",
+    "constantCost": "5min"
+  },
+  "tags": [
+    "a11y",
+    "react"
+  ],
+  "defaultSeverity": "Major",
+  "ruleSpecification": "RSPEC-6819",
+  "sqKey": "S6819",
+  "scope": "All",
+  "quickfix": "infeasible",
+  "code": {
+    "impacts": {
+      "MAINTAINABILITY": "LOW"
+    },
+    "attribute": "CONVENTIONAL"
+  },
+  "compatibleLanguages": [
+    "JAVASCRIPT",
+    "TYPESCRIPT"
+  ]
+}

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

@@ -294,6 +294,7 @@
     "S6793",
     "S6807",
     "S6811",
+    "S6819",
     "S6821"
   ]
 }