Create rule S6841 (jsx-a11y/tabindex-no-positive): tabIndex value…

…s should be non-positive (#4365)

its/ruling/src/test/expected/jsts/console/typescript-S6841.json

@@ -0,0 +1,19 @@
+{
+"console:src/views/RelationsPopup/ConfirmPopup.tsx": [
+123
+],
+"console:src/views/Settings/Billing/CreditCardBack.tsx": [
+53
+],
+"console:src/views/Settings/Billing/CreditCardFront.tsx": [
+209,
+220,
+231
+],
+"console:src/views/models/DatabrowserView/DatabrowserView.tsx": [
+314
+],
+"console:src/views/models/FieldPopup/ConfirmFieldPopup.tsx": [
+214
+]
+}

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

@@ -413,6 +413,7 @@ public static List<Class<? extends JavaScriptCheck>> getAllChecks() {
       SwitchWithNotEnoughCaseCheck.class,
       SwitchWithoutDefaultCheck.class,
       TabCharacterCheck.class,
+      TabindexNoPositiveCheck.class,
       TemplateStringMisuseCheck.class,
       TestCheckExceptionCheck.class,
       ThrowLiteralCheck.class,

sonar-plugin/javascript-checks/src/main/java/org/sonar/javascript/checks/TabindexNoPositiveCheck.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 = "S6841")
+public class TabindexNoPositiveCheck implements EslintBasedCheck {
+
+  @Override
+  public String eslintKey() {
+    return "tabindex-no-positive";
+  }
+}

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

@@ -0,0 +1,43 @@
+<h2>Why is this an issue?</h2>
+<p>Positive <code>tabIndex</code> values can disrupt the natural tab order of the webpage. This can be confusing for screen reader users who rely on a
+logical tab order to navigate through the content. If the tab order doesn’t match the visual or logical order of elements, users may struggle to
+understand the page structure.</p>
+<p>Therefore, it’s recommended to avoid using positive <code>tabIndex</code> values.</p>
+<h2>How to fix it</h2>
+<p>If you need to make an element focusable that isn’t by default (like a &lt;div&gt; or &lt;span&gt;), you can use <code>tabIndex="0"</code>. This
+will add the element to the natural tab order based on its position in the HTML. Otherwise, either remove the <code>tabIndex</code> value or use a
+negative value to remove the element from the tab order.</p>
+<h3>Code examples</h3>
+<h4>Noncompliant code example</h4>
+<pre data-diff-id="1" data-diff-type="noncompliant">
+function MyDiv() {
+    return (
+        &lt;div&gt;
+            &lt;span tabIndex="5"&gt;foo&lt;/span&gt; // Noncompliant
+            &lt;span tabIndex="3"&gt;bar&lt;/span&gt; // Noncompliant
+            &lt;span tabIndex="1"&gt;baz&lt;/span&gt; // Noncompliant
+            &lt;span tabIndex="2"&gt;qux&lt;/span&gt; // Noncompliant
+        &lt;/div&gt;
+    );
+}
+</pre>
+<h4>Compliant solution</h4>
+<pre data-diff-id="1" data-diff-type="compliant">
+function MyDiv() {
+    return (
+        &lt;div&gt;
+            &lt;span tabIndex="0"&gt;foo&lt;/span&gt;
+            &lt;span tabIndex="-1"&gt;bar&lt;/span&gt;
+            &lt;span tabIndex={0}&gt;baz&lt;/span&gt;
+            &lt;span&gt;qux&lt;/span&gt;
+        &lt;/div&gt;
+    );
+}
+</pre>
+<h2>Resources</h2>
+<h3>Documentation</h3>
+<ul>
+  <li> MDN web docs - <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex">tabindex</a> </li>
+  <li> WCAG - <a href="https://www.w3.org/WAI/WCAG21/Understanding/focus-order">Focus Order</a> </li>
+</ul>
+

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

@@ -0,0 +1,28 @@
+{
+  "title": "\"tabIndex\" values should be non-positive",
+  "type": "CODE_SMELL",
+  "status": "ready",
+  "remediation": {
+    "func": "Constant\/Issue",
+    "constantCost": "5min"
+  },
+  "tags": [
+    "accessibility"
+  ],
+  "defaultSeverity": "Major",
+  "ruleSpecification": "RSPEC-6841",
+  "sqKey": "S6841",
+  "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

@@ -306,6 +306,7 @@
     "S6824",
     "S6825",
     "S6827",
-    "S6836"
+    "S6836",
+    "S6841"
   ]
 }