Merge branch 'master' into version-4

CHANGELOG.md

@@ -25,6 +25,10 @@
 * Fix transitions so that they don't require a `style-src 'unsafe-inline'` Content Security Policy (CSP) ([#6662](https://github.com/sveltejs/svelte/issues/6662)).
 * Explicitly disallow `var` declarations extending the reactive statement scope ([#6800](https://github.com/sveltejs/svelte/pull/6800))
 
+## 3.59.1
+
+* 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))
@@ -37,6 +41,7 @@
 * Fix type of `VERSION` compiler export ([#8498](https://github.com/sveltejs/svelte/issues/8498))
 * Relax `a11y-no-redundant-roles` warning ([#8536](https://github.com/sveltejs/svelte/pull/8536))
 * Handle nested array rest destructuring ([#8552](https://github.com/sveltejs/svelte/issues/8552), [#8554](https://github.com/sveltejs/svelte/issues/8554))
+
 ## 3.58.0
 
 * Add `bind:innerText` for `contenteditable` elements ([#3311](https://github.com/sveltejs/svelte/issues/3311))

src/compiler/compile/compiler_warnings.ts

@@ -172,7 +172,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

@@ -927,7 +927,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

@@ -295,9 +295,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
 		}
 	}
 ]