diff --git a/CHANGELOG.md b/CHANGELOG.md index 3eefd51b2d..7492e1d035 100644 --- a/CHANGELOG.md +++ b/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)) diff --git a/src/compiler/compile/compiler_warnings.ts b/src/compiler/compile/compiler_warnings.ts index b84ccf6d55..13ac337bc5 100644 --- a/src/compiler/compile/compiler_warnings.ts +++ b/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 ` + 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 1f20e349d8..9fa4fea296 100644 --- a/src/compiler/compile/nodes/Element.ts +++ b/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)); } } diff --git a/src/compiler/compile/utils/a11y.ts b/src/compiler/compile/utils/a11y.ts index e556ae2f01..9bb99c8e9f 100644 --- a/src/compiler/compile/utils/a11y.ts +++ b/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); 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 } } ]