diff --git a/.changeset/brown-geckos-fry.md b/.changeset/brown-geckos-fry.md new file mode 100644 index 0000000000..e3b3e086af --- /dev/null +++ b/.changeset/brown-geckos-fry.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +fix: correctly interpret empty aria- attribute diff --git a/packages/svelte/messages/compile-warnings/a11y.md b/packages/svelte/messages/compile-warnings/a11y.md index f85c17a56a..26023d28f3 100644 --- a/packages/svelte/messages/compile-warnings/a11y.md +++ b/packages/svelte/messages/compile-warnings/a11y.md @@ -44,11 +44,11 @@ ## a11y_incorrect_aria_attribute_type -> The value of '%attribute%' must be of type %type% +> The value of '%attribute%' must be a %type% ## a11y_incorrect_aria_attribute_type_boolean -> The value of '%attribute%' must be either 'true' or 'false' +> The value of '%attribute%' must be either 'true' or 'false'. It cannot be empty ## a11y_incorrect_aria_attribute_type_id diff --git a/packages/svelte/src/compiler/phases/2-analyze/a11y.js b/packages/svelte/src/compiler/phases/2-analyze/a11y.js index 91dc7cf8fb..a45c3c1f97 100644 --- a/packages/svelte/src/compiler/phases/2-analyze/a11y.js +++ b/packages/svelte/src/compiler/phases/2-analyze/a11y.js @@ -103,7 +103,7 @@ function has_disabled_attribute(attribute_map) { const aria_disabled_attr = attribute_map.get('aria-disabled'); if (aria_disabled_attr) { const aria_disabled_attr_value = get_static_value(aria_disabled_attr); - if (aria_disabled_attr_value === true) { + if (aria_disabled_attr_value === 'true') { return true; } } @@ -601,20 +601,19 @@ function is_parent(parent, elements) { */ function validate_aria_attribute_value(attribute, name, schema, value) { const type = schema.type; - const is_string = typeof value === 'string'; if (value === null) return; - if (value === true) value = 'true'; // TODO this is actually incorrect, and we should fix it + if (value === true) value = ''; if (type === 'boolean' && value !== 'true' && value !== 'false') { w.a11y_incorrect_aria_attribute_type_boolean(attribute, name); - } else if (type === 'integer' && !Number.isInteger(+value)) { + } else if (type === 'integer' && (value === '' || !Number.isInteger(+value))) { w.a11y_incorrect_aria_attribute_type_integer(attribute, name); - } else if (type === 'number' && isNaN(+value)) { + } else if (type === 'number' && (value === '' || isNaN(+value))) { w.a11y_incorrect_aria_attribute_type(attribute, name, 'number'); - } else if ((type === 'string' || type === 'id') && !is_string) { - w.a11y_incorrect_aria_attribute_type(attribute, name, 'string'); - } else if (type === 'idlist' && !is_string) { + } else if ((type === 'string' || type === 'id') && value === '') { + w.a11y_incorrect_aria_attribute_type(attribute, name, 'non-empty string'); + } else if (type === 'idlist' && value === '') { w.a11y_incorrect_aria_attribute_type_idlist(attribute, name); } else if (type === 'token') { const values = (schema.values ?? []).map((value) => value.toString()); diff --git a/packages/svelte/src/compiler/warnings.js b/packages/svelte/src/compiler/warnings.js index 6d871bf5c7..39d9d9efb0 100644 --- a/packages/svelte/src/compiler/warnings.js +++ b/packages/svelte/src/compiler/warnings.js @@ -134,22 +134,22 @@ export function a11y_img_redundant_alt(node) { } /** - * The value of '%attribute%' must be of type %type% + * The value of '%attribute%' must be a %type% * @param {null | NodeLike} node * @param {string} attribute * @param {string} type */ export function a11y_incorrect_aria_attribute_type(node, attribute, type) { - w(node, "a11y_incorrect_aria_attribute_type", `The value of '${attribute}' must be of type ${type}`); + w(node, "a11y_incorrect_aria_attribute_type", `The value of '${attribute}' must be a ${type}`); } /** - * The value of '%attribute%' must be either 'true' or 'false' + * The value of '%attribute%' must be either 'true' or 'false'. It cannot be empty * @param {null | NodeLike} node * @param {string} attribute */ export function a11y_incorrect_aria_attribute_type_boolean(node, attribute) { - w(node, "a11y_incorrect_aria_attribute_type_boolean", `The value of '${attribute}' must be either 'true' or 'false'`); + w(node, "a11y_incorrect_aria_attribute_type_boolean", `The value of '${attribute}' must be either 'true' or 'false'. It cannot be empty`); } /** diff --git a/packages/svelte/tests/validator/samples/a11y-aria-proptypes-boolean/warnings.json b/packages/svelte/tests/validator/samples/a11y-aria-proptypes-boolean/warnings.json index 10320c4308..1da0fc3fdf 100644 --- a/packages/svelte/tests/validator/samples/a11y-aria-proptypes-boolean/warnings.json +++ b/packages/svelte/tests/validator/samples/a11y-aria-proptypes-boolean/warnings.json @@ -1,7 +1,7 @@ [ { "code": "a11y_incorrect_aria_attribute_type_boolean", - "message": "The value of 'aria-disabled' must be either 'true' or 'false'", + "message": "The value of 'aria-disabled' must be either 'true' or 'false'. It cannot be empty", "start": { "line": 5, "column": 8 @@ -13,7 +13,7 @@ }, { "code": "a11y_incorrect_aria_attribute_type_boolean", - "message": "The value of 'aria-disabled' must be either 'true' or 'false'", + "message": "The value of 'aria-disabled' must be either 'true' or 'false'. It cannot be empty", "start": { "line": 6, "column": 8 diff --git a/packages/svelte/tests/validator/samples/a11y-aria-proptypes-integer/input.svelte b/packages/svelte/tests/validator/samples/a11y-aria-proptypes-integer/input.svelte index 74ea3f9dcc..af4f654038 100644 --- a/packages/svelte/tests/validator/samples/a11y-aria-proptypes-integer/input.svelte +++ b/packages/svelte/tests/validator/samples/a11y-aria-proptypes-integer/input.svelte @@ -1,7 +1,6 @@
-
diff --git a/packages/svelte/tests/validator/samples/a11y-aria-proptypes-integer/warnings.json b/packages/svelte/tests/validator/samples/a11y-aria-proptypes-integer/warnings.json index d8be2ef8cd..ba2ede1da1 100644 --- a/packages/svelte/tests/validator/samples/a11y-aria-proptypes-integer/warnings.json +++ b/packages/svelte/tests/validator/samples/a11y-aria-proptypes-integer/warnings.json @@ -27,11 +27,11 @@ "code": "a11y_incorrect_aria_attribute_type_integer", "message": "The value of 'aria-level' must be an integer", "start": { - "line": 5, + "line": 4, "column": 5 }, "end": { - "line": 5, + "line": 4, "column": 15 } } diff --git a/packages/svelte/tests/validator/samples/a11y-aria-proptypes-number/input.svelte b/packages/svelte/tests/validator/samples/a11y-aria-proptypes-number/input.svelte index a9591aa12e..d0ac15889e 100644 --- a/packages/svelte/tests/validator/samples/a11y-aria-proptypes-number/input.svelte +++ b/packages/svelte/tests/validator/samples/a11y-aria-proptypes-number/input.svelte @@ -2,6 +2,6 @@
-
+
diff --git a/packages/svelte/tests/validator/samples/a11y-aria-proptypes-number/warnings.json b/packages/svelte/tests/validator/samples/a11y-aria-proptypes-number/warnings.json index ed5283f797..fade8615b4 100644 --- a/packages/svelte/tests/validator/samples/a11y-aria-proptypes-number/warnings.json +++ b/packages/svelte/tests/validator/samples/a11y-aria-proptypes-number/warnings.json @@ -1,7 +1,7 @@ [ { "code": "a11y_incorrect_aria_attribute_type", - "message": "The value of 'aria-valuemax' must be of type number", + "message": "The value of 'aria-valuemax' must be a number", "start": { "line": 1, "column": 5 @@ -13,7 +13,7 @@ }, { "code": "a11y_incorrect_aria_attribute_type", - "message": "The value of 'aria-valuemax' must be of type number", + "message": "The value of 'aria-valuemax' must be a number", "start": { "line": 2, "column": 5 @@ -25,14 +25,14 @@ }, { "code": "a11y_incorrect_aria_attribute_type", - "message": "The value of 'aria-valuemax' must be of type number", + "message": "The value of 'aria-valuemax' must be a number", "start": { "line": 5, "column": 5 }, "end": { "line": 5, - "column": 18 + "column": 25 } } ] diff --git a/packages/svelte/tests/validator/samples/a11y-aria-proptypes-string/input.svelte b/packages/svelte/tests/validator/samples/a11y-aria-proptypes-string/input.svelte index c21efdd55b..0719e80c7e 100644 --- a/packages/svelte/tests/validator/samples/a11y-aria-proptypes-string/input.svelte +++ b/packages/svelte/tests/validator/samples/a11y-aria-proptypes-string/input.svelte @@ -1,4 +1,4 @@ -
+
diff --git a/packages/svelte/tests/validator/samples/a11y-aria-proptypes-string/warnings.json b/packages/svelte/tests/validator/samples/a11y-aria-proptypes-string/warnings.json index 3a93dbcee6..fe51488c70 100644 --- a/packages/svelte/tests/validator/samples/a11y-aria-proptypes-string/warnings.json +++ b/packages/svelte/tests/validator/samples/a11y-aria-proptypes-string/warnings.json @@ -1,14 +1 @@ -[ - { - "code": "a11y_incorrect_aria_attribute_type", - "message": "The value of 'aria-label' must be of type string", - "start": { - "line": 1, - "column": 5 - }, - "end": { - "line": 1, - "column": 15 - } - } -] +[] diff --git a/packages/svelte/tests/validator/samples/a11y-aria-proptypes-token/input.svelte b/packages/svelte/tests/validator/samples/a11y-aria-proptypes-token/input.svelte index 70dd68e30d..4b6e65d4ad 100644 --- a/packages/svelte/tests/validator/samples/a11y-aria-proptypes-token/input.svelte +++ b/packages/svelte/tests/validator/samples/a11y-aria-proptypes-token/input.svelte @@ -1,6 +1,6 @@
-
+
diff --git a/packages/svelte/tests/validator/samples/a11y-aria-proptypes-token/warnings.json b/packages/svelte/tests/validator/samples/a11y-aria-proptypes-token/warnings.json index fea249be0a..75ac994ce1 100644 --- a/packages/svelte/tests/validator/samples/a11y-aria-proptypes-token/warnings.json +++ b/packages/svelte/tests/validator/samples/a11y-aria-proptypes-token/warnings.json @@ -32,7 +32,7 @@ }, "end": { "line": 3, - "column": 14 + "column": 21 } }, { diff --git a/packages/svelte/tests/validator/samples/a11y-aria-proptypes-tokenlist/input.svelte b/packages/svelte/tests/validator/samples/a11y-aria-proptypes-tokenlist/input.svelte index 9ebf8b35c2..364afc0c0b 100644 --- a/packages/svelte/tests/validator/samples/a11y-aria-proptypes-tokenlist/input.svelte +++ b/packages/svelte/tests/validator/samples/a11y-aria-proptypes-tokenlist/input.svelte @@ -1,6 +1,6 @@
-
+
diff --git a/packages/svelte/tests/validator/samples/a11y-aria-proptypes-tokenlist/warnings.json b/packages/svelte/tests/validator/samples/a11y-aria-proptypes-tokenlist/warnings.json index 10a92d1790..c4923707ca 100644 --- a/packages/svelte/tests/validator/samples/a11y-aria-proptypes-tokenlist/warnings.json +++ b/packages/svelte/tests/validator/samples/a11y-aria-proptypes-tokenlist/warnings.json @@ -32,7 +32,7 @@ }, "end": { "line": 3, - "column": 18 + "column": 25 } }, { diff --git a/packages/svelte/tests/validator/samples/a11y-click-events-have-key-events/input.svelte b/packages/svelte/tests/validator/samples/a11y-click-events-have-key-events/input.svelte index 4ca8d30c4d..4f23811a01 100644 --- a/packages/svelte/tests/validator/samples/a11y-click-events-have-key-events/input.svelte +++ b/packages/svelte/tests/validator/samples/a11y-click-events-have-key-events/input.svelte @@ -57,7 +57,7 @@ -
+ diff --git a/packages/svelte/tests/validator/samples/a11y-heading-has-content/input.svelte b/packages/svelte/tests/validator/samples/a11y-heading-has-content/input.svelte index 1414af825d..7991bcc11b 100644 --- a/packages/svelte/tests/validator/samples/a11y-heading-has-content/input.svelte +++ b/packages/svelte/tests/validator/samples/a11y-heading-has-content/input.svelte @@ -1,2 +1,2 @@

-

invisible header

\ No newline at end of file + diff --git a/packages/svelte/tests/validator/samples/a11y-heading-has-content/warnings.json b/packages/svelte/tests/validator/samples/a11y-heading-has-content/warnings.json index 296d680777..da77e2d36d 100644 --- a/packages/svelte/tests/validator/samples/a11y-heading-has-content/warnings.json +++ b/packages/svelte/tests/validator/samples/a11y-heading-has-content/warnings.json @@ -20,7 +20,7 @@ }, "end": { "line": 2, - "column": 15 + "column": 22 } } ] diff --git a/packages/svelte/tests/validator/samples/a11y-img-redundant-alt/input.svelte b/packages/svelte/tests/validator/samples/a11y-img-redundant-alt/input.svelte index a3528a5c41..d1360b813b 100644 --- a/packages/svelte/tests/validator/samples/a11y-img-redundant-alt/input.svelte +++ b/packages/svelte/tests/validator/samples/a11y-img-redundant-alt/input.svelte @@ -1,5 +1,5 @@ Foo eating a sandwich. -Picture of me taking a photo of an image + Photo of foo being weird. Image of me at a bar! Picture of baz fixing a bug. diff --git a/packages/svelte/tests/validator/samples/a11y-interactive-supports-focus/input.svelte b/packages/svelte/tests/validator/samples/a11y-interactive-supports-focus/input.svelte index 270424ccab..673c615704 100644 --- a/packages/svelte/tests/validator/samples/a11y-interactive-supports-focus/input.svelte +++ b/packages/svelte/tests/validator/samples/a11y-interactive-supports-focus/input.svelte @@ -1,6 +1,6 @@ -
{}}>
-
{}}>
+ +
{}}>
{}}>
{}}>
diff --git a/packages/svelte/tests/validator/samples/a11y-media-has-caption/input.svelte b/packages/svelte/tests/validator/samples/a11y-media-has-caption/input.svelte index 30f9a05f91..2e479d97da 100644 --- a/packages/svelte/tests/validator/samples/a11y-media-has-caption/input.svelte +++ b/packages/svelte/tests/validator/samples/a11y-media-has-caption/input.svelte @@ -2,6 +2,5 @@ - - + diff --git a/packages/svelte/tests/validator/samples/a11y-media-has-caption/warnings.json b/packages/svelte/tests/validator/samples/a11y-media-has-caption/warnings.json index 3ef72edc78..2a7de1f730 100644 --- a/packages/svelte/tests/validator/samples/a11y-media-has-caption/warnings.json +++ b/packages/svelte/tests/validator/samples/a11y-media-has-caption/warnings.json @@ -23,18 +23,6 @@ "line": 3 } }, - { - "code": "a11y_media_has_caption", - "end": { - "column": 27, - "line": 5 - }, - "message": "`