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

[ArmandPhilippot]

button element is labelable according to MDN and it can be useful to create switches for example. Due to the absence of button in labellableElements, the Audit app in Dev Toolbar reports a false positive in a11y checks when using button as child of a label.

Here is a minimal reproduction: https://stackblitz.com/edit/astro-dev-toolbar-audit-label?file=src%2Fpages%2Findex.astro

• When using id/for it works as expected
• When using button as child of label the Audit app reports an issue

Changes

Adds button in labellableElements used in the a11y-invalid-label rule.

Testing

I'm not sure if there are any tests with the current a11y rules so I didn't add any. I only tested manually: with this change, the false positive disappear.

Docs

• I added a changeset that is longer than the patch... 😅 feel free to reword!
• Nothing to update on Astro Docs.

[changeset-bot]

🦋 Changeset detected

Latest commit: 66d7c70

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[ematipico]

I'm not sure if there are any tests with the current a11y rules so I didn't add any. I only tested manually: with this change, the false positive disappear.

We have e2e tests here: https://github.com/withastro/astro/blob/main/packages/astro/e2e/dev-toolbar-audits.test.js

You could create a new test case

[ArmandPhilippot]

Thanks @ematipico for the feedback and for pointing me to the e2e directory (I forgot to check there...). And sorry for the delay, I was struggling with Playwright... it seems it does not support Archlinux based OS so I had to find an alternative to execute the tests. I hadn't thought about Codespaces until now.

I completed the changeset and added a test for all labelable elements (not only buttons).