fix: Handle dynamic values in a11y-autocomplete-valid

Fixes sveltejs#8562 Fixes sveltejs#8565
dummdidumm · May 8, 2023 · e3a776a · e3a776a
1 parent 4537eb7
commit e3a776a
Show file tree

Hide file tree

Showing 6 changed files with 18 additions and 10 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Svelte changelog
 
+## 3.59.1 (Unreleased)
+
+* Handle dynamic values in `a11y-autocomplete-valid` ([#])
+
 ## 3.59.0
 
 * Add `ResizeObserver` bindings `contentRect`/`contentBoxSize`/`borderBoxSize`/`devicePixelContentBoxSize` ([#8022](https://github.com/sveltejs/svelte/pull/8022))

diff --git a/src/compiler/compile/compiler_warnings.ts b/src/compiler/compile/compiler_warnings.ts
@@ -164,7 +164,7 @@ export default {
 	}),
 	a11y_autocomplete_valid: (type: null | true | string, value: null | true | string) => ({
 		code: 'a11y-autocomplete-valid',
-		message: `A11y: The value '${value}' is not supported by the attribute 'autocomplete' on element <input type="${type}">`
+		message: `A11y: The value '${value}' is not supported by the attribute 'autocomplete' on element <input type="${type || '...'}">`
 	}),
 	a11y_img_redundant_alt: {
 		code: 'a11y-img-redundant-alt',

diff --git a/src/compiler/compile/nodes/Element.ts b/src/compiler/compile/nodes/Element.ts
@@ -857,7 +857,7 @@ export default class Element extends Node {
 				const type_value = type.get_static_value();
 				const autocomplete_value = autocomplete.get_static_value();
 
-				if (!is_valid_autocomplete(type_value, autocomplete_value)) {
+				if (!is_valid_autocomplete(autocomplete_value)) {
 					component.warn(autocomplete, compiler_warnings.a11y_autocomplete_valid(type_value, autocomplete_value));
 				}
 			}

diff --git a/src/compiler/compile/utils/a11y.ts b/src/compiler/compile/utils/a11y.ts
@@ -290,9 +290,11 @@ const autofill_contact_field_name_tokens = new Set([
 	'impp'
 ]);
 
-export function is_valid_autocomplete(type: null | true | string, autocomplete: null | true | string) {
-	if (typeof autocomplete !== 'string' || typeof type !== 'string') {
+export function is_valid_autocomplete(autocomplete: null | true | string) {
+	if (autocomplete === true) {
 		return false;
+	} else if (!autocomplete) {
+		return true; // dynamic value
 	}
 
 	const tokens = autocomplete.trim().toLowerCase().split(regex_whitespaces);

diff --git a/test/validator/samples/a11y-autocomplete-valid/input.svelte b/test/validator/samples/a11y-autocomplete-valid/input.svelte
@@ -14,6 +14,8 @@
 <input type="hidden" autocomplete="off" />
 <input type="hidden" autocomplete="on" />
 <input type="text" autocomplete="" />
+<input type="{dynamic}" autocomplete="" />
+<input type="text" autocomplete="{dynamic}" />
 
 <!-- INVALID -->
 <input type="text" autocomplete />

diff --git a/test/validator/samples/a11y-autocomplete-valid/warnings.json b/test/validator/samples/a11y-autocomplete-valid/warnings.json
@@ -3,36 +3,36 @@
 		"code": "a11y-autocomplete-valid",
 		"end": {
 			"column": 31,
-			"line": 19
+			"line": 20
 		},
 		"message": "A11y: The value 'true' is not supported by the attribute 'autocomplete' on element <input type=\"text\">",
 		"start": {
 			"column": 19,
-			"line": 19
+			"line": 20
 		}
 	},
 	{
 		"code": "a11y-autocomplete-valid",
 		"end": {
 			"column": 43,
-			"line": 20
+			"line": 21
 		},
 		"message": "A11y: The value 'incorrect' is not supported by the attribute 'autocomplete' on element <input type=\"text\">",
 		"start": {
 			"column": 19,
-			"line": 20
+			"line": 21
 		}
 	},
 	{
 		"code": "a11y-autocomplete-valid",
 		"end": {
 			"column": 42,
-			"line": 21
+			"line": 22
 		},
 		"message": "A11y: The value 'webauthn' is not supported by the attribute 'autocomplete' on element <input type=\"text\">",
 		"start": {
 			"column": 19,
-			"line": 21
+			"line": 22
 		}
 	}
 ]