Add rule S6845 (jsx-a11y/no-noninteractive-tabindex): Non-interactive DOM elements should not have the tabIndex property

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

@@ -0,0 +1,8 @@
+{
+"console:src/views/models/DatabrowserView/DatabrowserView.tsx": [
+314
+],
+"console:src/views/models/FieldPopup/FieldHorizontalSelect.tsx": [
+127
+]
+}

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

@@ -0,0 +1,8 @@
+{
+"desktop:app/src/ui/check-runs/ci-check-run-list-item.tsx": [
+217
+],
+"desktop:app/src/ui/check-runs/ci-check-run-popover.tsx": [
+343
+]
+}

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

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

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

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

@@ -0,0 +1,41 @@
+<h2>Why is this an issue?</h2>
+<p>ARIA (Accessible Rich Internet Applications) attributes are used to enhance the accessibility of web content and web applications. These attributes
+provide additional information about an element’s role, state, properties, and values to assistive technologies like screen readers.</p>
+<p>The <code>aria-activedescendant</code> attribute is used to enhance the accessibility of composite widgets by managing focus within them. It allows
+a parent element to retain active document focus while indicating which of its child elements has secondary focus. This attribute is particularly
+useful in interactive components like search typeahead select lists, where the user can navigate through a list of options while continuing to type in
+the input field.</p>
+<p>This rule checks that DOM elements with the <code>aria-activedescendant</code> property either have an inherent tabIndex or declare one.</p>
+<h2>How to fix it in JSX</h2>
+<p>Make sure that DOM elements with the <code>aria-activedescendant</code> property have a <code>tabIndex</code> property, or use an element with an
+inherent one.</p>
+<h3>Code examples</h3>
+<h4>Noncompliant code example</h4>
+<pre data-diff-id="1" data-diff-type="noncompliant">
+&lt;div aria-activedescendant={descendantId}&gt;
+  {content}
+&lt;/div&gt;
+</pre>
+<h4>Compliant solution</h4>
+<pre data-diff-id="1" data-diff-type="compliant">
+&lt;div aria-activedescendant={descendantId} tabIndex={0}&gt;
+  {content}
+&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/Accessibility/ARIA/ARIA_Techniques">Using ARIA: Roles, states, and
+  properties</a> </li>
+  <li> MDN web docs - <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles">ARIA roles (Reference)</a> </li>
+  <li> MDN web docs - <a
+  href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-activedescendant"><code>aria-activedescendant</code>
+  attribute</a> </li>
+  <li> MDN web docs - <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex"><code>tabIndex</code> attribute</a> </li>
+</ul>
+<h3>Standards</h3>
+<ul>
+  <li> W3C - <a href="https://www.w3.org/TR/wai-aria-1.2/">Accessible Rich Internet Applications (WAI-ARIA) 1.2</a> </li>
+  <li> W3C - <a href="https://www.w3.org/TR/wai-aria/#composite">Composite role</a> </li>
+</ul>
+

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

@@ -0,0 +1,29 @@
+{
+  "title": "Non interactive DOM elements should not have the `tabIndex` property",
+  "type": "CODE_SMELL",
+  "status": "ready",
+  "remediation": {
+    "func": "Constant\/Issue",
+    "constantCost": "5min"
+  },
+  "tags": [
+    "accessibility",
+    "react"
+  ],
+  "defaultSeverity": "Minor",
+  "ruleSpecification": "RSPEC-6845",
+  "sqKey": "S6845",
+  "scope": "All",
+  "quickfix": "targeted",
+  "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

@@ -311,6 +311,7 @@
     "S6841",
     "S6842",
     "S6843",
-    "S6844"
+    "S6844",
+    "S6845"
   ]
 }