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

@@ -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`.

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);
+	});
 });

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>

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',