From 79ffa5d9f75c16465134aa4ed4a3d1d59908ba8b Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armand.philippot.eu>
Date: Mon, 14 Oct 2024 18:14:23 +0200
Subject: [PATCH] fix(dev-toolbar): false positive in Audit with a11y check on
 labels (#12223)

* fix(dev-toolbar): false positive in Audit with a11y check on labels

* test: add e2e test for a11y audit on labelable elements

* docs: complete changeset to explain why this is a problem
---
 .changeset/selfish-toes-carry.md              |  7 +++
 packages/astro/e2e/dev-toolbar-audits.test.js | 14 +++++
 .../src/pages/a11y-labelable.astro            | 54 +++++++++++++++++++
 .../dev-toolbar/apps/audit/rules/a11y.ts      |  2 +-
 4 files changed, 76 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/selfish-toes-carry.md
 create mode 100644 packages/astro/e2e/fixtures/dev-toolbar/src/pages/a11y-labelable.astro

diff --git a/.changeset/selfish-toes-carry.md b/.changeset/selfish-toes-carry.md
new file mode 100644
index 0000000000..2933b214bb
--- /dev/null
+++ b/.changeset/selfish-toes-carry.md
@@ -0,0 +1,7 @@
+---
+'astro': patch
+---
+
+Fixes a false positive reported by the dev toolbar Audit app where a label was considered missing when associated with a button
+
+The `button` element can be [used with a label](https://www.w3.org/TR/2011/WD-html5-author-20110809/forms.html#category-label) (e.g. to create a switch) and should not be reported as an accessibility issue when used as a child of a `label`.
diff --git a/packages/astro/e2e/dev-toolbar-audits.test.js b/packages/astro/e2e/dev-toolbar-audits.test.js
index d0c5da847f..ca74763142 100644
--- a/packages/astro/e2e/dev-toolbar-audits.test.js
+++ b/packages/astro/e2e/dev-toolbar-audits.test.js
@@ -170,4 +170,18 @@ test.describe('Dev Toolbar - Audits', () => {
 		const count = await auditHighlights.count();
 		expect(count).toEqual(0);
 	});
+
+	test('does not warn about label with valid labelable elements', async ({ page, astro }) => {
+		await page.goto(astro.resolveUrl('/a11y-labelable'));
+
+		const toolbar = page.locator('astro-dev-toolbar');
+		const appButton = toolbar.locator('button[data-app-id="astro:audit"]');
+		await appButton.click();
+
+		const auditCanvas = toolbar.locator('astro-dev-toolbar-app-canvas[data-app-id="astro:audit"]');
+		const auditHighlights = auditCanvas.locator('astro-dev-toolbar-highlight');
+
+		const count = await auditHighlights.count();
+		expect(count).toEqual(0);
+	});
 });
diff --git a/packages/astro/e2e/fixtures/dev-toolbar/src/pages/a11y-labelable.astro b/packages/astro/e2e/fixtures/dev-toolbar/src/pages/a11y-labelable.astro
new file mode 100644
index 0000000000..ecdeeb683e
--- /dev/null
+++ b/packages/astro/e2e/fixtures/dev-toolbar/src/pages/a11y-labelable.astro
@@ -0,0 +1,54 @@
+---
+
+---
+
+<label for="button1">Button label</label>
+<button id="button1" />
+<label>
+	Button label as child
+	<button>Activate?</button>
+</label>
+<label for="input1">Input label</label>
+<input id="input1" />
+<label>
+	Input label as child
+	<input type="text" />
+</label>
+<label for="meter1">Meter label</label>
+<meter id="meter1" min="0" max="100" value="75">75%</meter>
+<label>
+	Meter label as child
+	<meter min="0" max="100" value="75">75%</meter>
+</label>
+<label for="output1">Output label</label>
+<output id="output1">"Hello, world!"</output>
+<label>
+	Output label as child
+	<output>"Hello, world!"</output>
+</label>
+<label for="progress1">Progress label</label>
+<progress id="progress1" max="100" value="70">70%</progress>
+<label>
+	Progress label as child
+	<progress max="100" value="70">70%</progress>
+</label>
+<label for="select1">Select label</label>
+<select id="select1">
+	<option>Option 1</option>
+	<option>Option 2</option>
+	<option>Option 3</option>
+</select>
+<label>
+	Select label as child
+	<select>
+		<option>Option 1</option>
+		<option>Option 2</option>
+		<option>Option 3</option>
+	</select>
+</label>
+<label for="textarea1">Textarea label</label>
+<textarea cols="33" id="textarea1" rows="5" />
+<label>
+	Textarea label as child
+	<textarea cols="33" rows="5" />
+</label>
diff --git a/packages/astro/src/runtime/client/dev-toolbar/apps/audit/rules/a11y.ts b/packages/astro/src/runtime/client/dev-toolbar/apps/audit/rules/a11y.ts
index a20e140389..04de65818e 100644
--- a/packages/astro/src/runtime/client/dev-toolbar/apps/audit/rules/a11y.ts
+++ b/packages/astro/src/runtime/client/dev-toolbar/apps/audit/rules/a11y.ts
@@ -62,7 +62,7 @@ const interactiveElements = [
 	...MAYBE_INTERACTIVE.keys(),
 ];
 
-const labellableElements = ['input', 'meter', 'output', 'progress', 'select', 'textarea'];
+const labellableElements = ['button', 'input', 'meter', 'output', 'progress', 'select', 'textarea'];
 
 const aria_non_interactive_roles = [
 	'alert',