fix(rules): allow aria-label on <dialog>

ext · ext · commit bd07810dd2cd · 2025-06-28T17:53:32.000+02:00
fixes #304
diff --git a/docs/rules/aria-label-misuse.md b/docs/rules/aria-label-misuse.md
@@ -19,6 +19,7 @@ The attribute can only be used on the following elements:
 - Landmark elements
 - Elements with roles inheriting from widget
 - `<area>`
+- `<dialog>`
 - `<form>` and `<fieldset>`
 - `<iframe>`
 - `<img>` and `<figure>`
diff --git a/src/rules/__snapshots__/aria-label-misuse.spec.ts.snap b/src/rules/__snapshots__/aria-label-misuse.spec.ts.snap
@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`rule aria-label-misuse should contain documentation 1`] = `
 {
@@ -9,6 +9,7 @@ exports[`rule aria-label-misuse should contain documentation 1`] = `
 - Landmark elements
 - Elements with roles inheriting from widget
 - \`<area>\`
+- \`<dialog>\`
 - \`<form>\` and \`<fieldset>\`
 - \`<iframe>\`
 - \`<img>\` and \`<figure>\`
diff --git a/src/rules/aria-label-misuse.spec.ts b/src/rules/aria-label-misuse.spec.ts
@@ -68,6 +68,7 @@ describe("rule aria-label-misuse", () => {
 			${'<p role="widget" aria-label="foobar">'}     | ${'[role=".."]'}
 			${'<p tabindex="0" aria-label="foobar"></p>'}  | ${"[tabindex]"}
 			${'<area aria-label="foobar"></area>'}         | ${"<area>"}
+			${'<dialog aria-label="foobar"></dialog>'}     | ${"<dialog>"}
 			${'<form aria-label="foobar"></form>'}         | ${"<form>"}
 			${'<fieldset aria-label="foobar"></fieldset>'} | ${"<fieldset>"}
 			${'<iframe aria-label="foobar"></iframe>'}     | ${"<iframe>"}
@@ -198,11 +199,11 @@ describe("rule aria-label-misuse", () => {
 			const report = await htmlvalidate.validateString(markup);
 			expect(report).toBeInvalid();
 			expect(report).toMatchInlineCodeframe(`
-			"error: "aria-label" cannot be used on this element (aria-label-misuse) at inline:1:6:
-			> 1 |  <h1 aria-label="lorem ipsum">spam</h1>
-			    |      ^^^^^^^^^^
-			Selector: h1"
-		`);
+				"error: "aria-label" cannot be used on this element (aria-label-misuse) at inline:1:6:
+				> 1 |  <h1 aria-label="lorem ipsum">spam</h1>
+				    |      ^^^^^^^^^^
+				Selector: h1"
+			`);
 		});
 	});
 
diff --git a/src/rules/aria-label-misuse.ts b/src/rules/aria-label-misuse.ts
@@ -23,6 +23,7 @@ const whitelisted = [
 	"footer",
 	"section",
 	"article",
+	"dialog",
 	"form",
 	"img",
 	"area",
@@ -73,6 +74,7 @@ export default class AriaLabelMisuse extends Rule<void, RuleOptions> {
 			"Landmark elements",
 			"Elements with roles inheriting from widget",
 			"`<area>`",
+			"`<dialog>`",
 			"`<form>` and `<fieldset>`",
 			"`<iframe>`",
 			"`<img>` and `<figure>`",
