adjust messages, disallow empty strings

Rich-Harris · Rich-Harris · commit 1aa773ca9123 · 2024-04-25T10:13:00.000-04:00
diff --git a/packages/svelte/messages/compile-warnings/a11y.md b/packages/svelte/messages/compile-warnings/a11y.md
@@ -26,12 +26,6 @@
 
 > Avoid `<%name%>` elements
 
-## a11y_empty_aria_attribute
-
-> '%attribute%' cannot be empty
-
-> '%attribute%' cannot be empty — change it to `%attribute%="%value%"`
-
 ## a11y_figcaption_index
 
 > `<figcaption>` must be first or last child of `<figure>`
@@ -50,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
@@ -603,19 +603,18 @@ function validate_aria_attribute_value(attribute, name, schema, value) {
 	const type = schema.type;
 
 	if (value === null) return;
-
-	if (value === true) {
-		const v = type === 'boolean' || type === 'tristate' ? 'true' : undefined;
-		w.a11y_empty_aria_attribute(attribute, name, v);
-		return;
-	}
+	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') && 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());
 		if (!values.includes(value.toLowerCase())) {
diff --git a/packages/svelte/src/compiler/warnings.js b/packages/svelte/src/compiler/warnings.js
@@ -100,16 +100,6 @@ export function a11y_distracting_elements(node, name) {
 	w(node, "a11y_distracting_elements", `Avoid \`<${name}>\` elements`);
 }
 
-/**
- * '%attribute%' cannot be empty — change it to `%attribute%="%value%"`
- * @param {null | NodeLike} node
- * @param {string} attribute
- * @param {string | undefined | null} [value]
- */
-export function a11y_empty_aria_attribute(node, attribute, value) {
-	w(node, "a11y_empty_aria_attribute", value ? `'${attribute}' cannot be empty — change it to \`${attribute}="${value}"\`` : `'${attribute}' cannot be empty`);
-}
-
 /**
  * `<figcaption>` must be first or last child of `<figure>`
  * @param {null | NodeLike} node
@@ -144,22 +134,12 @@ export function a11y_img_redundant_alt(node) {
 }
 
 /**
- * The value of '%attribute%' must be of type %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}`);
-}
-
-/**
- * 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`);
 }
 
 /**
@@ -189,6 +169,16 @@ export function a11y_incorrect_aria_attribute_type_integer(node, attribute) {
 	w(node, "a11y_incorrect_aria_attribute_type_integer", `The value of '${attribute}' must be an integer`);
 }
 
+/**
+ * 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 a ${type}`);
+}
+
 /**
  * The value of '%attribute%' must be exactly one of %values%
  * @param {null | NodeLike} node
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
@@ -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/warnings.json b/packages/svelte/tests/validator/samples/a11y-aria-proptypes-integer/warnings.json
@@ -24,8 +24,8 @@
 		}
 	},
 	{
-		"code": "a11y_empty_aria_attribute",
-		"message": "'aria-level' cannot be empty",
+		"code": "a11y_incorrect_aria_attribute_type_integer",
+		"message": "The value of 'aria-level' must be an integer",
 		"start": {
 			"line": 4,
 			"column": 5
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
@@ -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,7 +25,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": 5,
 			"column": 5
diff --git a/packages/svelte/tests/validator/samples/a11y-role-supports-aria-props/input.svelte b/packages/svelte/tests/validator/samples/a11y-role-supports-aria-props/input.svelte
@@ -25,7 +25,7 @@
 <link aria-rowcount="0" />
 <menu aria-valuemin="0"></menu>
 <meter aria-colspan="0"></meter>
-<nav aria-valuetext=""></nav>
+<nav aria-valuetext="x"></nav>
 <ol aria-sort="none"></ol>
 <option aria-invalid="true"></option>
 <optgroup aria-sort="none"></optgroup>
@@ -45,7 +45,7 @@
 <div role="application" aria-required="true"></div>
 <div role="article" aria-multiline="true"></div>
 <div role="banner" aria-autocomplete="inline"></div>
-<div role="blockquote" aria-valuetext=""></div>
+<div role="blockquote" aria-valuetext="x"></div>
 <div role="button" aria-colspan="0"></div>
 <div role="caption" aria-setsize="0"></div>
 <div role="cell" aria-multiline="true"></div>
@@ -54,7 +54,7 @@
 <div role="columnheader" aria-colcount="0"></div>
 <div role="combobox" aria-multiselectable="true" aria-controls={[]} aria-expanded="true"></div>
 <div role="complementary" aria-readonly="true"></div>
-<div role="contentinfo" aria-valuetext=""></div>
+<div role="contentinfo" aria-valuetext="x"></div>
 <div role="definition" aria-multiline="true"></div>
 <div role="deletion" aria-expanded="true"></div>
 <div role="dialog" aria-multiline="true"></div>
@@ -85,7 +85,7 @@
 <div role="menuitemradio" aria-rowspan="0" aria-checked="false"></div>
 <div role="meter" aria-valuenow="0" aria-haspopup="true"></div>
 <div role="navigation" aria-expanded="true"></div>
-<div role="none" aria-placeholder=""></div>
+<div role="none" aria-placeholder="x"></div>
 <div role="note" aria-modal="true"></div>
 <div role="option" aria-selected="true" aria-valuemax="0"></div>
 <div role="paragraph" aria-level="0"></div>
@@ -101,7 +101,7 @@
 <div role="search" aria-autocomplete="inline"></div>
 <div role="searchbox" aria-colindex="0"></div>
 <div role="separator" aria-sort="none"></div>
-<div role="slider" aria-valuenow="0" aria-placeholder=""></div>
+<div role="slider" aria-valuenow="0" aria-placeholder="x"></div>
 <div role="spinbutton" aria-posinset="0"></div>
 <div role="status" aria-valuemin="0"></div>
 <div role="strong" aria-valuemin="0"></div>
@@ -116,7 +116,7 @@
 <div role="textbox" aria-colspan="0"></div>
 <div role="time" aria-selected="true"></div>
 <div role="timer" aria-sort="none"></div>
-<div role="toolbar" aria-valuetext=""></div>
+<div role="toolbar" aria-valuetext="x"></div>
 <div role="tooltip" aria-multiline="true"></div>
 <div role="tree" aria-expanded="true"></div>
 <div role="treegrid" aria-level="0"></div>
@@ -144,8 +144,8 @@
 <div role="doc-example" aria-multiselectable="true"></div>
 <div role="doc-footnote" aria-rowcount="0"></div>
 <div role="doc-foreword" aria-valuenow="0"></div>
-<div role="doc-glossary" aria-valuetext=""></div>
-<div role="doc-glossref" aria-placeholder=""></div>
+<div role="doc-glossary" aria-valuetext="x"></div>
+<div role="doc-glossref" aria-placeholder="x"></div>
 <div role="doc-index" aria-rowcount="0"></div>
 <div role="doc-introduction" aria-pressed="true"></div>
 <div role="doc-noteref" aria-valuenow="0"></div>
@@ -184,31 +184,31 @@
 <menuitem type="radio" aria-placeholder="placeholder"></menuitem> <!-- implicit role: menuitemradio -->
 
 <!-- VALID -->
-<a aria-keyshortcuts="" href="/">Link</a>
+<a aria-keyshortcuts="x" href="/">Link</a>
 <area aria-expanded="true" alt="" />
 <article aria-dropeffect="none"></article>
-<aside aria-keyshortcuts=""></aside>
+<aside aria-keyshortcuts="x"></aside>
 <body aria-labelledby="id"></body>
 <button aria-hidden="true"></button>
 <datalist aria-activedescendant="id" tabindex="0"></datalist>
 <dd aria-labelledby="id"></dd>
 <dfn aria-details="id"></dfn>
-<dialog aria-keyshortcuts=""></dialog>
-<details aria-keyshortcuts=""></details>
+<dialog aria-keyshortcuts="x"></dialog>
+<details aria-keyshortcuts="x"></details>
 <dt aria-hidden="true"></dt>
 <fieldset aria-owns="id"></fieldset>
-<form aria-keyshortcuts=""></form>
-<h1 aria-keyshortcuts="">H1</h1>
+<form aria-keyshortcuts="x"></form>
+<h1 aria-keyshortcuts="x">H1</h1>
 <h2 aria-controls={[]}>H2</h2>
 <h3 aria-controls={[]}>H3</h3>
 <h4 aria-details="id">H4</h4>
 <h5 aria-grabbed="true">H5</h5>
 <h6 aria-grabbed="true">H6</h6>
 <hr aria-relevant="all" />
 <img aria-flowto="id" alt="Valid aria role" />
-<li aria-label=""></li>
+<li aria-label="x"></li>
 <link aria-hidden="true" />
-<menu aria-roledescription=""></menu>
+<menu aria-roledescription="x"></menu>
 <meter aria-valuemin="0"></meter>
 <nav aria-labelledby="id"></nav>
 <ol aria-grabbed="true"></ol>
@@ -235,10 +235,10 @@
 <div role="caption" aria-grabbed="true"></div>
 <div role="cell" aria-rowindex="0"></div>
 <div role="checkbox" aria-checked="true" aria-details="id"></div>
-<div role="code" aria-keyshortcuts=""></div>
+<div role="code" aria-keyshortcuts="x"></div>
 <div role="columnheader" aria-rowspan="0"></div>
 <div role="combobox" aria-invalid="true" aria-controls={[]} aria-expanded="true"></div>
-<div role="complementary" aria-label=""></div>
+<div role="complementary" aria-label="x"></div>
 <div role="contentinfo" aria-dropeffect="none"></div>
 <div role="definition" aria-grabbed="true"></div>
 <div role="deletion" aria-busy="true"></div>
@@ -248,71 +248,71 @@
 <div role="emphasis" aria-atomic="true"></div>
 <div role="feed" aria-atomic="true"></div>
 <div role="figure" aria-busy="true"></div>
-<div role="form" aria-roledescription=""></div>
+<div role="form" aria-roledescription="x"></div>
 <div role="generic" aria-current="true"></div>
 <div role="grid" aria-busy="true"></div>
 <div role="gridcell" aria-relevant="all"></div>
 <div role="group" aria-busy="true"></div>
 <div role="heading" aria-level="" aria-flowto="id"></div>
 <div role="img" aria-grabbed="true"></div>
-<div role="insertion" aria-roledescription=""></div>
+<div role="insertion" aria-roledescription="x"></div>
 <div role="link" aria-owns="id"></div>
 <div role="list" aria-labelledby="id"></div>
 <div role="listbox" aria-current="true"></div>
 <div role="listitem" aria-controls={[]}></div>
 <div role="log" aria-controls={[]}></div>
-<div role="main" aria-keyshortcuts=""></div>
+<div role="main" aria-keyshortcuts="x"></div>
 <div role="marquee" aria-labelledby="id"></div>
 <div role="math" aria-labelledby="id"></div>
 <div role="menu" aria-atomic="true"></div>
 <div role="menubar" aria-grabbed="true"></div>
 <div role="menuitem" aria-grabbed="true"></div>
 <div role="menuitemcheckbox" aria-checked="true" aria-controls={[]}></div>
 <div role="menuitemradio" aria-checked="true" aria-grabbed="true"></div>
-<div role="meter" aria-valuenow="0" aria-valuetext=""></div>
+<div role="meter" aria-valuenow="0" aria-valuetext="x"></div>
 <div role="navigation" aria-controls={[]}></div>
 <div role="none" undefined></div>
 <div role="note" aria-hidden="true"></div>
 <div role="option" aria-selected="true" aria-describedby="id"></div>
 <div role="paragraph" aria-grabbed="true"></div>
 <div role="presentation" aria-relevant="all"></div>
 <div role="progressbar" aria-valuemin="0"></div>
-<div role="radio" aria-checked="true" aria-roledescription=""></div>
+<div role="radio" aria-checked="true" aria-roledescription="x"></div>
 <div role="radiogroup" aria-required="true"></div>
-<div role="region" aria-roledescription=""></div>
+<div role="region" aria-roledescription="x"></div>
 <div role="row" aria-posinset="0"></div>
 <div role="rowgroup" aria-busy="true"></div>
-<div role="rowheader" aria-label=""></div>
+<div role="rowheader" aria-label="x"></div>
 <div role="scrollbar" aria-controls={[]} aria-valuenow="0" aria-relevant="all"></div>
 <div role="search" aria-grabbed="true"></div>
 <div role="searchbox" aria-dropeffect="none"></div>
-<div role="separator" aria-roledescription=""></div>
+<div role="separator" aria-roledescription="x"></div>
 <div role="slider" aria-valuenow="0" aria-relevant="all"></div>
 <div role="spinbutton" aria-required="true"></div>
-<div role="status" aria-label=""></div>
-<div role="strong" aria-keyshortcuts=""></div>
-<div role="subscript" aria-keyshortcuts=""></div>
+<div role="status" aria-label="x"></div>
+<div role="strong" aria-keyshortcuts="x"></div>
+<div role="subscript" aria-keyshortcuts="x"></div>
 <div role="superscript" aria-live="off"></div>
-<div role="switch" aria-checked="true" aria-roledescription=""></div>
+<div role="switch" aria-checked="true" aria-roledescription="x"></div>
 <div role="tab" aria-flowto="id"></div>
 <div role="table" aria-rowcount="0"></div>
 <div role="tablist" aria-atomic="true"></div>
 <div role="tabpanel" aria-labelledby="id"></div>
 <div role="term" aria-details="id"></div>
 <div role="textbox" aria-hidden="true"></div>
-<div role="time" aria-label=""></div>
+<div role="time" aria-label="x"></div>
 <div role="timer" aria-hidden="true"></div>
-<div role="toolbar" aria-roledescription=""></div>
+<div role="toolbar" aria-roledescription="x"></div>
 <div role="tooltip" aria-owns="id"></div>
 <div role="tree" aria-errormessage="error"></div>
 <div role="treegrid" aria-details="id"></div>
 <div role="treeitem" aria-selected="true" aria-dropeffect="none"></div>
-<div role="doc-abstract" aria-label=""></div>
+<div role="doc-abstract" aria-label="x"></div>
 <div role="doc-acknowledgments" aria-controls={[]}></div>
 <div role="doc-afterword" aria-flowto="id"></div>
 <div role="doc-appendix" aria-describedby="id"></div>
 <div role="doc-backlink" aria-dropeffect="none"></div>
-<div role="doc-biblioentry" aria-roledescription=""></div>
+<div role="doc-biblioentry" aria-roledescription="x"></div>
 <div role="doc-bibliography" aria-labelledby="id"></div>
 <div role="doc-biblioref" aria-haspopup="true"></div>
 <div role="doc-chapter" aria-controls={[]}></div>
@@ -321,12 +321,12 @@
 <div role="doc-cover" aria-controls={[]}></div>
 <div role="doc-credit" aria-haspopup="true"></div>
 <div role="doc-credits" aria-describedby="id"></div>
-<div role="doc-dedication" aria-roledescription=""></div>
+<div role="doc-dedication" aria-roledescription="x"></div>
 <div role="doc-endnote" aria-errormessage="error"></div>
 <div role="doc-endnotes" aria-owns="id"></div>
 <div role="doc-epigraph" aria-controls={[]}></div>
 <div role="doc-epilogue" aria-relevant="all"></div>
-<div role="doc-errata" aria-keyshortcuts=""></div>
+<div role="doc-errata" aria-keyshortcuts="x"></div>
 <div role="doc-example" aria-invalid="true"></div>
 <div role="doc-footnote" aria-labelledby="id"></div>
 <div role="doc-foreword" aria-expanded="true"></div>
@@ -339,7 +339,7 @@
 <div role="doc-pagebreak" aria-owns="id"></div>
 <div role="doc-pagelist" aria-disabled="true"></div>
 <div role="doc-part" aria-relevant="all"></div>
-<div role="doc-preface" aria-label=""></div>
+<div role="doc-preface" aria-label="x"></div>
 <div role="doc-prologue" aria-invalid="true"></div>
 <div role="doc-pullquote" undefined></div>
 <div role="doc-qna" aria-errormessage="error"></div>
diff --git a/packages/svelte/tests/validator/samples/a11y-role-supports-aria-props/warnings.json b/packages/svelte/tests/validator/samples/a11y-role-supports-aria-props/warnings.json

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`[`
`2`	`2`	`{`
`3`	`3`	`"code": "a11y_incorrect_aria_attribute_type_boolean",`
`4`		`- "message": "The value of 'aria-disabled' must be either 'true' or 'false'",`
	`4`	`+ "message": "The value of 'aria-disabled' must be either 'true' or 'false'. It cannot be empty",`
`5`	`5`	`"start": {`
`6`	`6`	`"line": 5,`
`7`	`7`	`"column": 8`
`@@ -13,7 +13,7 @@`
`13`	`13`	`},`
`14`	`14`	`{`
`15`	`15`	`"code": "a11y_incorrect_aria_attribute_type_boolean",`
`16`		`- "message": "The value of 'aria-disabled' must be either 'true' or 'false'",`
	`16`	`+ "message": "The value of 'aria-disabled' must be either 'true' or 'false'. It cannot be empty",`
`17`	`17`	`"start": {`
`18`	`18`	`"line": 6,`
`19`	`19`	`"column": 8`
Original file line number	Diff line number	Diff line change
`@@ -24,8 +24,8 @@`
`24`	`24`	`}`
`25`	`25`	`},`
`26`	`26`	`{`
`27`		`- "code": "a11y_empty_aria_attribute",`
`28`		`- "message": "'aria-level' cannot be empty",`
	`27`	`+ "code": "a11y_incorrect_aria_attribute_type_integer",`
	`28`	`+ "message": "The value of 'aria-level' must be an integer",`
`29`	`29`	`"start": {`
`30`	`30`	`"line": 4,`
`31`	`31`	`"column": 5`