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 } } ]