Create rule S6840 (jsx-a11y/autocomplete-valid): DOM elements shoul…

…d use the `autocomplete` attribute correctly (#4364)

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

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

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

@@ -65,6 +65,9 @@
 "file-for-rules:S6824.js": [
 2
 ],
+"file-for-rules:S6840.js": [
+1
+],
 "file-for-rules:boundOrAssignedEvalOrArguments.js": [
 2,
 8

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

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

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

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

its/sources/jsts/custom/S6840.js

@@ -0,0 +1,3 @@
+function MyInput() {
+    return <input type="text" autocomplete="foo" />; // Noncompliant
+}

sonar-plugin/javascript-checks/src/main/java/org/sonar/javascript/checks/AutocompleteValidCheck.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 = "S6840")
+public class AutocompleteValidCheck implements EslintBasedCheck {
+
+  @Override
+  public String eslintKey() {
+    return "autocomplete-valid";
+  }
+}

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

@@ -76,6 +76,7 @@ public static List<Class<? extends JavaScriptCheck>> getAllChecks() {
       ArrowFunctionConventionCheck.class,
       AssertionsInTestsCheck.class,
       AssociativeArraysCheck.class,
+      AutocompleteValidCheck.class,
       AwsApigatewayPublicApiCheck.class,
       AwsEc2RdsDmsPublicCheck.class,
       AwsEc2UnencryptedEbsVolumeCheck.class,

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

@@ -0,0 +1,32 @@
+<h2>Why is this an issue?</h2>
+<p>Not providing autocomplete values in form fields can lead to content inaccessibility. The function of each standard input field, which gathers a
+person’s personal data, is systematically determined according to the list of <a href="https://www.w3.org/TR/WCAG21/#input-purposes">53 Input Purposes
+for User Interface Components</a>. If the necessary autocomplete attribute values are absent, screen readers will not be able to identify and read
+these fields. This lack of information can hinder users, particularly those using screen readers, from properly navigating and interacting with
+forms.</p>
+<p>For screen readers to operate effectively, it is imperative that the autocomplete attribute values are not only valid but also correctly
+applied.</p>
+<h2>How to fix it</h2>
+<p>Ensure the autocomplete attribute is correct and suitable for the form field it is used with.</p>
+<h3>Code examples</h3>
+<h4>Noncompliant code example</h4>
+<pre data-diff-id="1" data-diff-type="noncompliant">
+function MyInput() {
+    return &lt;input type="text" autocomplete="foo" /&gt;; // Noncompliant
+}
+</pre>
+<h4>Compliant solution</h4>
+<pre data-diff-id="1" data-diff-type="compliant">
+function MyInput() {
+    return &lt;input type="text" autocomplete="name" /&gt;;
+}
+</pre>
+<h2>Resources</h2>
+<h3>Documentation</h3>
+<ul>
+  <li> WCAG - <a href="https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose">Identify Input Purpose</a> </li>
+  <li> WCAG - <a href="https://www.w3.org/TR/WCAG21/#input-purposes">Input Purposes for User Interface Components</a> </li>
+  <li> HTML Standard - <a href="https://html.spec.whatwg.org/multipage/forms.html#enabling-client-side-automatic-filling-of-form-controls">Enabling
+  client-side automatic filling of form controls</a> </li>
+</ul>
+

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

@@ -0,0 +1,28 @@
+{
+  "title": "DOM elements should use the \"autocomplete\" attribute correctly",
+  "type": "CODE_SMELL",
+  "status": "ready",
+  "remediation": {
+    "func": "Constant\/Issue",
+    "constantCost": "5min"
+  },
+  "tags": [
+    "accessibility"
+  ],
+  "defaultSeverity": "Major",
+  "ruleSpecification": "RSPEC-6840",
+  "sqKey": "S6840",
+  "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

@@ -307,6 +307,7 @@
     "S6825",
     "S6827",
     "S6836",
+    "S6840",
     "S6841",
     "S6842"
   ]