diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6b30f45740..6d19148a3f 100644
--- a/CHANGELOG.md
+++ b/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))
diff --git a/src/compiler/compile/compiler_warnings.ts b/src/compiler/compile/compiler_warnings.ts
index c0d595f20d..39e6bcae30 100644
--- 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 `
+ message: `A11y: The value '${value}' is not supported by the attribute 'autocomplete' on element `
}),
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
index 9d45c84fae..5dcd15eeaa 100644
--- 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
index 0d24f5dbda..052430f2cb 100644
--- 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
index 1f47878e37..17dee6adf1 100644
--- a/test/validator/samples/a11y-autocomplete-valid/input.svelte
+++ b/test/validator/samples/a11y-autocomplete-valid/input.svelte
@@ -1,3 +1,7 @@
+
+
@@ -14,6 +18,8 @@
+
+
diff --git a/test/validator/samples/a11y-autocomplete-valid/warnings.json b/test/validator/samples/a11y-autocomplete-valid/warnings.json
index dfde14a51f..470cfff1fb 100644
--- 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": 25
},
"message": "A11y: The value 'true' is not supported by the attribute 'autocomplete' on element ",
"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 ",
"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 ",
"start": {
"column": 19,
- "line": 21
+ "line": 27
}
}
]