From 5de08324b0112786ef065d379c0513e7483ab759 Mon Sep 17 00:00:00 2001 From: Rich Harris Date: Wed, 24 Apr 2024 16:32:31 -0400 Subject: [PATCH 1/6] fix: correctly interpret empty aria- attribute --- .../svelte/messages/compile-warnings/a11y.md | 4 + .../src/compiler/phases/2-analyze/a11y.js | 13 +- packages/svelte/src/compiler/warnings.js | 9 + .../a11y-aria-proptypes-integer/input.svelte | 1 - .../a11y-aria-proptypes-integer/warnings.json | 8 +- .../a11y-aria-proptypes-number/input.svelte | 2 +- .../a11y-aria-proptypes-number/warnings.json | 2 +- .../a11y-aria-proptypes-string/input.svelte | 2 +- .../a11y-aria-proptypes-string/warnings.json | 15 +- .../a11y-aria-proptypes-token/input.svelte | 2 +- .../a11y-aria-proptypes-token/warnings.json | 2 +- .../input.svelte | 2 +- .../warnings.json | 2 +- .../input.svelte | 2 +- .../a11y-heading-has-content/input.svelte | 2 +- .../a11y-heading-has-content/warnings.json | 2 +- .../a11y-img-redundant-alt/input.svelte | 2 +- .../input.svelte | 4 +- .../a11y-media-has-caption/input.svelte | 3 +- .../a11y-media-has-caption/warnings.json | 12 - .../input.svelte | 10 +- .../input.svelte | 2 +- .../input.svelte | 32 +-- .../warnings.json | 20 +- .../input.svelte | 272 +++++++++--------- .../warnings.json | 184 +++++++----- 26 files changed, 316 insertions(+), 295 deletions(-) diff --git a/packages/svelte/messages/compile-warnings/a11y.md b/packages/svelte/messages/compile-warnings/a11y.md index e520f01aba6e..6a2d9d32d021 100644 --- a/packages/svelte/messages/compile-warnings/a11y.md +++ b/packages/svelte/messages/compile-warnings/a11y.md @@ -12,6 +12,10 @@ > <%name%> element should not be hidden +## a11y_empty_aria_attribute + +> '%attribute%' cannot be empty — change it to `%attribute%="true"` + ## a11y_incorrect_aria_attribute_type_boolean > The value of '%attribute%' must be either 'true' or 'false' diff --git a/packages/svelte/src/compiler/phases/2-analyze/a11y.js b/packages/svelte/src/compiler/phases/2-analyze/a11y.js index 91dc7cf8fbfb..73d35b56dff4 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,10 +601,13 @@ 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) { + w.a11y_empty_aria_attribute(attribute, name); + return; + } if (type === 'boolean' && value !== 'true' && value !== 'false') { w.a11y_incorrect_aria_attribute_type_boolean(attribute, name); @@ -612,10 +615,6 @@ function validate_aria_attribute_value(attribute, name, schema, value) { w.a11y_incorrect_aria_attribute_type_integer(attribute, name); } else if (type === 'number' && 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) { - w.a11y_incorrect_aria_attribute_type_idlist(attribute, name); } else if (type === 'token') { const values = (schema.values ?? []).map((value) => value.toString()); if (!values.includes(value.toLowerCase())) { diff --git a/packages/svelte/src/compiler/warnings.js b/packages/svelte/src/compiler/warnings.js index 1dbfcf9705db..70794cd59229 100644 --- a/packages/svelte/src/compiler/warnings.js +++ b/packages/svelte/src/compiler/warnings.js @@ -68,6 +68,15 @@ export function a11y_hidden(node, name) { w(node, "a11y_hidden", `<${name}> element should not be hidden`); } +/** + * '%attribute%' cannot be empty — change it to `%attribute%="true"` + * @param {null | NodeLike} node + * @param {string} attribute + */ +export function a11y_empty_aria_attribute(node, attribute) { + w(node, "a11y_empty_aria_attribute", `'${attribute}' cannot be empty — change it to \`${attribute}="true"\``); +} + /** * The value of '%attribute%' must be either 'true' or 'false' * @param {null | NodeLike} node 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 74ea3f9dcca2..af4f6540380c 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 d8be2ef8cd76..593b75eed207 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 @@ -24,14 +24,14 @@ } }, { - "code": "a11y_incorrect_aria_attribute_type_integer", - "message": "The value of 'aria-level' must be an integer", + "code": "a11y_empty_aria_attribute", + "message": "'aria-level' cannot be empty — change it to `aria-level=\"true\"`", "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 a9591aa12e3a..d0ac15889e8f 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 ed5283f79727..32b61ddcdb6f 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 @@ -32,7 +32,7 @@ }, "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 c21efdd55ba0..0719e80c7e81 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 3a93dbcee6cb..fe51488c7066 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 70dd68e30d23..4b6e65d4ad9b 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 fea249be0a4d..75ac994ce168 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 9ebf8b35c20f..364afc0c0ba7 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 10a92d1790cf..c4923707ca00 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 4ca8d30c4d30..4f23811a012d 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 1414af825d24..7991bcc11b55 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 64604d61a3ac..2bfde853ada2 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 a3528a5c41ec..d1360b813b9e 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 270424ccabb8..673c615704b2 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 30f9a05f91ce..2e479d97da18 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 cfefede26157..96519c14a0e7 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": "