Infrastructure/astro
0
Fork 0
mirror of https://github.com/withastro/astro.git synced 2024-12-30 22:03:56 -05:00
Code Issues Activity

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

Browse source 
* 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
This commit is contained in:
Armand Philippot 2024-10-14 18:14:23 +02:00 committed by GitHub
parent fb5569583b
commit 79ffa5d9f7
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 76 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
.changeset/selfish-toes-carry.md Normal file
View file

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

14
packages/astro/e2e/dev-toolbar-audits.test.js
View file

@ -170,4 +170,18 @@ test.describe('Dev Toolbar - Audits', () => {
const count = await auditHighlights.count(); const count = await auditHighlights.count();
expect(count).toEqual(0); 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);
});
}); });

54
packages/astro/e2e/fixtures/dev-toolbar/src/pages/a11y-labelable.astro Normal file
View file

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

2
packages/astro/src/runtime/client/dev-toolbar/apps/audit/rules/a11y.ts
View file

@ -62,7 +62,7 @@ const interactiveElements = [
...MAYBE_INTERACTIVE.keys(), ...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 = [ const aria_non_interactive_roles = [
'alert', 'alert',