fix(autocomplete-valid): incomplete for invalid but safe values (#4500)

gaiety-deque · WilcoFiers · straker · web-flow · commit e31a974de395 · 2024-06-20T13:19:07.000+02:00
Resolves #4492 `incomplete`'s some invalid, but safe to use, values for `autocomplete`. The common mistake in the original issue was `autocomplete="text"` and I've added a few more I'd expect to see. Open to suggestions for more, or removing some of the ones below. --- - text https://github.com/search?q=autocomplete%3D%22text%22&type=code - pronouns https://github.com/search?q=autocomplete%3D%22pronouns%22&type=code - gender https://github.com/search?q=autocomplete%3D%22gender%22&type=code - message https://github.com/search?q=autocomplete%3D%22message%22&type=code - content https://github.com/search?q=autocomplete%3D%22content%22&type=code --- There are other ways to determine usage, GitHub is only one platform code is hosted for example. But it's a way to get a quick view into what's out there in production. --------- Co-authored-by: Wilco Fiers <WilcoFiers@users.noreply.github.com> Co-authored-by: Steven Lambert <2433219+straker@users.noreply.github.com>
diff --git a/doc/check-options.md b/doc/check-options.md
@@ -10,6 +10,7 @@
   - [aria-required-children](#aria-required-children)
   - [aria-required-parent](#aria-required-parent)
   - [aria-roledescription](#aria-roledescription)
+  - [autocomplete-valid](#autocomplete-valid)
   - [color-contrast](#color-contrast)
   - [page-has-heading-one](#page-has-heading-one)
   - [page-has-main](#page-has-main)
@@ -237,6 +238,52 @@ Previously supported properties `validTreeRowAttrs` is no longer available. `inv
   </tbody>
 </table>
 
+### autocomplete-valid
+
+<table>
+  <thead>
+    <tr>
+      <th>Option</th>
+      <th align="left">Default</th>
+      <th align="left">Description</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>
+        <code>stateTerms</code>
+      </td>
+      <td align="left">
+        <pre lang=js><code>[
+  'none',
+  'false',
+  'true',
+  'disabled',
+  'enabled',
+  'undefined',
+  'null',
+]</code></pre>
+        </td>
+      <td align="left">List of allowed autocomplete state terms other than "on" and "off."</td>
+    </tr>
+    <tr>
+      <td>
+        <code>ignoredValues</code>
+      </td>
+      <td align="left">
+        <pre lang=js><code>[
+  'text',
+  'pronouns',
+  'gender',
+  'message',
+  'content'
+]</code></pre>
+        </td>
+      <td align="left">List of autocomplete values that are technically invalid but will be ignored as they may not necessarily cause accessibility problems</td>
+    </tr>
+  </tbody>
+</table>
+
 ### color-contrast
 
 | Option                                                      | Default | Description                                                                                                                                                                                  |
diff --git a/doc/rule-descriptions.md b/doc/rule-descriptions.md
@@ -77,10 +77,10 @@
 
 ## WCAG 2.1 Level A & AA Rules
 
-| Rule ID                                                                                                            | Description                                                                                   | Impact  | Tags                                                            | Issue Type | ACT Rules                                                                                                                                                  |
-| :----------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------- | :------ | :-------------------------------------------------------------- | :--------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| [autocomplete-valid](https://dequeuniversity.com/rules/axe/4.9/autocomplete-valid?application=RuleDescription)     | Ensure the autocomplete attribute is correct and suitable for the form field                  | Serious | cat.forms, wcag21aa, wcag135, EN-301-549, EN-9.1.3.5, ACT       | failure    | [73f2c2](https://act-rules.github.io/rules/73f2c2)                                                                                                         |
-| [avoid-inline-spacing](https://dequeuniversity.com/rules/axe/4.9/avoid-inline-spacing?application=RuleDescription) | Ensure that text spacing set through style attributes can be adjusted with custom stylesheets | Serious | cat.structure, wcag21aa, wcag1412, EN-301-549, EN-9.1.4.12, ACT | failure    | [24afc2](https://act-rules.github.io/rules/24afc2), [9e45ec](https://act-rules.github.io/rules/9e45ec), [78fd32](https://act-rules.github.io/rules/78fd32) |
+| Rule ID                                                                                                            | Description                                                                                   | Impact  | Tags                                                            | Issue Type                 | ACT Rules                                                                                                                                                  |
+| :----------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------- | :------ | :-------------------------------------------------------------- | :------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [autocomplete-valid](https://dequeuniversity.com/rules/axe/4.9/autocomplete-valid?application=RuleDescription)     | Ensure the autocomplete attribute is correct and suitable for the form field                  | Serious | cat.forms, wcag21aa, wcag135, EN-301-549, EN-9.1.3.5, ACT       | failure, needs&nbsp;review | [73f2c2](https://act-rules.github.io/rules/73f2c2)                                                                                                         |
+| [avoid-inline-spacing](https://dequeuniversity.com/rules/axe/4.9/avoid-inline-spacing?application=RuleDescription) | Ensure that text spacing set through style attributes can be adjusted with custom stylesheets | Serious | cat.structure, wcag21aa, wcag1412, EN-301-549, EN-9.1.4.12, ACT | failure                    | [24afc2](https://act-rules.github.io/rules/24afc2), [9e45ec](https://act-rules.github.io/rules/9e45ec), [78fd32](https://act-rules.github.io/rules/78fd32) |
 
 ## WCAG 2.2 Level A & AA Rules
 
diff --git a/lib/checks/forms/autocomplete-valid-evaluate.js b/lib/checks/forms/autocomplete-valid-evaluate.js
@@ -1,6 +1,6 @@
 import { isValidAutocomplete } from '../../commons/text';
 
-function autocompleteValidEvaluate(node, options, virtualNode) {
+function autocompleteValidEvaluate(_node, options, virtualNode) {
   const autocomplete = virtualNode.attr('autocomplete') || '';
   return isValidAutocomplete(autocomplete, options);
 }
diff --git a/lib/checks/forms/autocomplete-valid.json b/lib/checks/forms/autocomplete-valid.json
@@ -4,8 +4,9 @@
   "metadata": {
     "impact": "serious",
     "messages": {
-      "pass": "The autocomplete attribute is correctly formatted",
-      "fail": "The autocomplete attribute is incorrectly formatted"
+      "pass": "the autocomplete attribute is correctly formatted",
+      "fail": "the autocomplete attribute is incorrectly formatted",
+      "incomplete": "the autocomplete attribute has a non-standard value. Check whether any standard value could be used instead."
     }
   },
   "options": {
@@ -17,6 +18,7 @@
       "enabled",
       "undefined",
       "null"
-    ]
+    ],
+    "ignoredValues": ["text", "pronouns", "gender", "message", "content"]
   }
 }
diff --git a/lib/commons/text/is-valid-autocomplete.js b/lib/commons/text/is-valid-autocomplete.js
@@ -70,7 +70,8 @@ function isValidAutocomplete(
     locations = [],
     qualifiers = [],
     standaloneTerms = [],
-    qualifiedTerms = []
+    qualifiedTerms = [],
+    ignoredValues = []
   } = {}
 ) {
   autocompleteValue = autocompleteValue.toLowerCase().trim();
@@ -117,6 +118,11 @@ function isValidAutocomplete(
   }
 
   const purposeTerm = autocompleteTerms[autocompleteTerms.length - 1];
+
+  if (ignoredValues.includes(purposeTerm)) {
+    return undefined;
+  }
+
   return (
     standaloneTerms.includes(purposeTerm) ||
     qualifiedTerms.includes(purposeTerm)
diff --git a/locales/_template.json b/locales/_template.json
@@ -682,8 +682,9 @@
       "fail": "The autocomplete value is inappropriate for this type of input"
     },
     "autocomplete-valid": {
-      "pass": "The autocomplete attribute is correctly formatted",
-      "fail": "The autocomplete attribute is incorrectly formatted"
+      "pass": "the autocomplete attribute is correctly formatted",
+      "fail": "the autocomplete attribute is incorrectly formatted",
+      "incomplete": "the autocomplete attribute has a non-standard value. Check whether any standard value could be used instead."
     },
     "accesskeys": {
       "pass": "Accesskey attribute value is unique",
diff --git a/test/checks/forms/autocomplete-valid.js b/test/checks/forms/autocomplete-valid.js
@@ -21,6 +21,11 @@ describe('autocomplete-valid', function () {
     assert.isFalse(evaluate.apply(checkContext, params));
   });
 
+  it('returns undefined (incomplete) if autocomplete is ignored', function () {
+    var params = checkSetup('<input autocomplete="text" id="target" />');
+    assert.isUndefined(evaluate.apply(checkContext, params));
+  });
+
   it('uses options to change what is valid autocomplete', function () {
     var options = { stateTerms: ['foo'] };
     var params = checkSetup(
diff --git a/test/commons/text/is-valid-autocomplete.js b/test/commons/text/is-valid-autocomplete.js
@@ -206,4 +206,14 @@ describe('text.isValidAutocomplete', () => {
       );
     });
   });
+
+  describe('options.ignoredValues', () => {
+    it('returns undefined if value is invalid and ignored', () => {
+      assert.isUndefined(
+        isValidAutocomplete('bad-term', {
+          ignoredValues: ['bad-term']
+        })
+      );
+    });
+  });
 });
diff --git a/test/integration/rules/autocomplete-valid/autocomplete-valid.html b/test/integration/rules/autocomplete-valid/autocomplete-valid.html
@@ -170,3 +170,10 @@
 <input autocomplete="section-foo email webauthn" id="pass92" />
 <input autocomplete="section-foo work email webauthn" id="pass93" />
 <input autocomplete="section-foo billing work email webauthn" id="pass94" />
+
+<!-- Incomplete, ignored values -->
+<input autocomplete="text" id="incomplete1" />
+<input autocomplete="pronouns" id="incomplete2" />
+<input autocomplete="gender" id="incomplete3" />
+<input autocomplete="message" id="incomplete4" />
+<input autocomplete="content" id="incomplete5" />
diff --git a/test/integration/rules/autocomplete-valid/autocomplete-valid.json b/test/integration/rules/autocomplete-valid/autocomplete-valid.json
@@ -2,6 +2,13 @@
   "description": "autocomplete-valid tests",
   "rule": "autocomplete-valid",
   "violations": [["#fail1"], ["#fail2"], ["#fail3"], ["#fail4"], ["#fail5"]],
+  "incomplete": [
+    ["#incomplete1"],
+    ["#incomplete2"],
+    ["#incomplete3"],
+    ["#incomplete4"],
+    ["#incomplete5"]
+  ],
   "passes": [
     ["#pass1"],
     ["#pass2"],

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`import { isValidAutocomplete } from '../../commons/text';`
`2`	`2`
`3`		`-function autocompleteValidEvaluate(node, options, virtualNode) {`
	`3`	`+function autocompleteValidEvaluate(_node, options, virtualNode) {`
`4`	`4`	`const autocomplete = virtualNode.attr('autocomplete') \|\| '';`
`5`	`5`	`return isValidAutocomplete(autocomplete, options);`
`6`	`6`	`}`