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 @@ +--- + +--- + + + + + + + + +75% + + +"Hello, world!" + + +70% + + + + + +