fix: Handle dynamic values in `a11y-autocomplete-valid` (#8567)

Fixes #8562
Fixes #8565

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Svelte changelog
 
+## 3.59.1 (Unreleased)
+
+* Handle dynamic values in `a11y-autocomplete-valid` ([#8567](https://github.com/sveltejs/svelte/pull/8567))
+
 ## 3.59.0
 
 * Add `ResizeObserver` bindings `contentRect`/`contentBoxSize`/`borderBoxSize`/`devicePixelContentBoxSize` ([#8022](https://github.com/sveltejs/svelte/pull/8022))

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',

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));
 				}
 			}

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);

test/validator/samples/a11y-autocomplete-valid/input.svelte

@@ -1,3 +1,7 @@
+<script>
+    let dynamic = '';
+</script>
+
 <!-- VALID -->
 <input type="text" />
 <input type="text" autocomplete="name" />
@@ -14,6 +18,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 />

test/validator/samples/a11y-autocomplete-valid/warnings.json

@@ -3,36 +3,36 @@
 		"code": "a11y-autocomplete-valid",
 		"end": {
 			"column": 31,
-			"line": 19
+			"line": 25
 		},
 		"message": "A11y: The value 'true' is not supported by the attribute 'autocomplete' on element <input type=\"text\">",
 		"start": {
 			"column": 19,
-			"line": 19
+			"line": 25
 		}
 	},
 	{
 		"code": "a11y-autocomplete-valid",
 		"end": {
 			"column": 43,
-			"line": 20
+			"line": 26
 		},
 		"message": "A11y: The value 'incorrect' is not supported by the attribute 'autocomplete' on element <input type=\"text\">",
 		"start": {
 			"column": 19,
-			"line": 20
+			"line": 26
 		}
 	},
 	{
 		"code": "a11y-autocomplete-valid",
 		"end": {
 			"column": 42,
-			"line": 21
+			"line": 27
 		},
 		"message": "A11y: The value 'webauthn' is not supported by the attribute 'autocomplete' on element <input type=\"text\">",
 		"start": {
 			"column": 19,
-			"line": 21
+			"line": 27
 		}
 	}
 ]