fix: correctly interpret empty aria- attribute

.changeset/brown-geckos-fry.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: correctly interpret empty aria- attribute

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
 

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());

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`);
 }
 
 /**

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

packages/svelte/tests/validator/samples/a11y-aria-proptypes-integer/input.svelte

@@ -1,7 +1,6 @@
 <div aria-level="yes"></div>
 <div aria-level="no"></div>
 <div aria-level={`abc`}></div>
-<div aria-level={true}></div>
 <div aria-level></div>
 <div aria-level={"false"}></div>
 <div aria-level={!"false"}></div>

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

packages/svelte/tests/validator/samples/a11y-aria-proptypes-number/input.svelte

@@ -2,6 +2,6 @@
 <div aria-valuemax="no"></div>
 <div aria-valuemax={`abc`}></div>
 <div aria-valuemax={true}></div>
-<div aria-valuemax></div>
+<div aria-valuemax="true"></div>
 <div aria-valuemax={'false'}></div>
 <div aria-valuemax={!'false'}></div>

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

packages/svelte/tests/validator/samples/a11y-aria-proptypes-string/input.svelte

@@ -1,4 +1,4 @@
-<div aria-label></div>
+<div aria-label="true"></div>
 <div aria-label={true}></div>
 <div aria-label={false}></div>
 <div aria-label={1234}></div>

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

packages/svelte/tests/validator/samples/a11y-aria-proptypes-token/input.svelte

@@ -1,6 +1,6 @@
 <div aria-sort=""></div>
 <div aria-sort="incorrect"></div>
-<div aria-sort></div>
+<div aria-sort="true"></div>
 <div aria-sort={true}></div>
 <div aria-sort={"false"}></div>
 <div aria-sort="ascending descending"></div>

packages/svelte/tests/validator/samples/a11y-aria-proptypes-token/warnings.json

@@ -32,7 +32,7 @@
 		},
 		"end": {
 			"line": 3,
-			"column": 14
+			"column": 21
 		}
 	},
 	{

packages/svelte/tests/validator/samples/a11y-aria-proptypes-tokenlist/input.svelte

@@ -1,6 +1,6 @@
 <div aria-relevant=""></div>
 <div aria-relevant="foobar"></div>
-<div aria-relevant></div>
+<div aria-relevant="true"></div>
 <div aria-relevant={true}></div>
 <div aria-relevant={"false"}></div>
 <div aria-relevant="additions removals_"></div>

packages/svelte/tests/validator/samples/a11y-aria-proptypes-tokenlist/warnings.json

@@ -32,7 +32,7 @@
 		},
 		"end": {
 			"line": 3,
-			"column": 18
+			"column": 25
 		}
 	},
 	{

packages/svelte/tests/validator/samples/a11y-click-events-have-key-events/input.svelte

@@ -57,7 +57,7 @@
 <input on:click={noop} type="hidden" />
 
 <!-- svelte-ignore a11y_no_static_element_interactions -->
-<div on:click={noop} aria-hidden></div>
+<div on:click={noop} aria-hidden="true"></div>
 <!-- svelte-ignore a11y_no_static_element_interactions -->
 <div on:click={noop} aria-hidden="true"></div>
 <!-- svelte-ignore a11y_no_static_element_interactions -->

packages/svelte/tests/validator/samples/a11y-heading-has-content/input.svelte

@@ -1,2 +1,2 @@
 <h1></h1>
-<h2 aria-hidden>invisible header</h2>
+<h2 aria-hidden="true">invisible header</h2>

packages/svelte/tests/validator/samples/a11y-heading-has-content/warnings.json

@@ -20,7 +20,7 @@
 		},
 		"end": {
 			"line": 2,
-			"column": 15
+			"column": 22
 		}
 	}
 ]

packages/svelte/tests/validator/samples/a11y-img-redundant-alt/input.svelte

@@ -1,5 +1,5 @@
 <img src="foo" alt="Foo eating a sandwich." />
-<img src="bar" aria-hidden alt="Picture of me taking a photo of an image" />
+<img src="bar" aria-hidden="true" alt="Picture of me taking a photo of an image" />
 <img src="foo" alt="Photo of foo being weird." />
 <img src="bar" alt="Image of me at a bar!" />
 <img src="foo" alt="Picture of baz fixing a bug." />

packages/svelte/tests/validator/samples/a11y-interactive-supports-focus/input.svelte

@@ -1,6 +1,6 @@
 <!-- VALID -->
-<div aria-hidden role="button" on:keypress={() => {}}></div>
-<div aria-disabled role="button" on:keypress={() => {}}></div>
+<div aria-hidden="true" role="button" on:keypress={() => {}}></div>
+<div aria-disabled="true" role="button" on:keypress={() => {}}></div>
 <div disabled role="button" on:keypress={() => {}}></div>
 <div role="presentation" on:keypress={() => {}}></div>
 <button on:click={() => {}}></button>

packages/svelte/tests/validator/samples/a11y-media-has-caption/input.svelte

@@ -2,6 +2,5 @@
 <video></video>
 <video><track /></video>
 <audio></audio>
-<video aria-hidden></video>
-<video aria-hidden="false"></video>
 <video aria-hidden="true"></video>
+<video aria-hidden="false"></video>

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": "`<video>` elements must have a `<track kind=\"captions\">`",
-		"start": {
-			"column": 0,
-			"line": 5
-		}
-	},
 	{
 		"code": "a11y_media_has_caption",
 		"end": {

packages/svelte/tests/validator/samples/a11y-no-interactive-element-to-noninteractive-role/input.svelte

@@ -83,19 +83,19 @@
 <div role="menu"></div>
 <div role="menubar"></div>
 <div role="menuitem"></div>
-<div role="menuitemcheckbox" aria-checked></div>
-<div role="menuitemradio" aria-checked></div>
-<div role="option" aria-selected></div>
+<div role="menuitemcheckbox" aria-checked="true"></div>
+<div role="menuitemradio" aria-checked="true"></div>
+<div role="option" aria-selected="true"></div>
 <div role="progressbar"></div>
-<div role="radio" aria-checked></div>
+<div role="radio" aria-checked="true"></div>
 <div role="radiogroup"></div>
 <div role="row"></div>
 <div role="rowheader"></div>
 <div role="scrollbar" aria-controls={[]} aria-valuenow={0}></div>
 <div role="searchbox"></div>
 <div role="slider" aria-valuenow={0}></div>
 <div role="spinbutton"></div>
-<div role="switch" aria-checked></div>
+<div role="switch" aria-checked="true"></div>
 <div role="tab"></div>
 <div role="textbox"></div>
 <div role="treeitem" aria-selected={true}></div>

packages/svelte/tests/validator/samples/a11y-no-noninteractive-element-interactions/input.svelte

@@ -1,7 +1,7 @@
 <!-- VALID -->
 <div role="presentation" on:mouseup={() => {}}></div>
 <div role="button" tabindex="-1" on:click={() => {}} on:keypress={() => {}}></div>
-<div role="listitem" aria-hidden on:click={() => {}} on:keypress={() => {}}></div>
+<div role="listitem" aria-hidden="true" on:click={() => {}} on:keypress={() => {}}></div>
 <button on:click={() => {}}></button>
 <h1 contenteditable="true" on:keydown={() => {}}>Heading</h1>
 <h1>Heading</h1>