fix(a11y): avoid missing-content false positives in closed details#16163
fix(a11y): avoid missing-content false positives in closed details#16163Misrilal-Sah wants to merge 6 commits into
Conversation
|
There was a problem hiding this comment.
Pull request overview
This PR updates the Dev Toolbar accessibility audit to avoid false-positive “missing content” findings for anchors/headings that start out hidden inside a closed <details> element, and adds an e2e regression to cover that scenario.
Changes:
- Add a shared
hasAccessibleTextContent()helper that prefersinnerTextbut falls back totextContent. - Use the helper for both direct element checks and
aria-labelledbyreferenced elements in thea11y-missing-contentrule. - Add an e2e fixture page and a new audit test to ensure no highlights are produced for closed-
<details>content with valid text.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| packages/astro/src/runtime/client/dev-toolbar/apps/audit/rules/a11y.ts | Adjusts missing-content detection logic to avoid closed-<details> false positives. |
| packages/astro/e2e/fixtures/dev-toolbar/src/pages/a11y-missing-content-details.astro | Adds a minimal reproduction page with closed <details> containing valid link/heading text. |
| packages/astro/e2e/dev-toolbar-audits.test.js | Adds a regression test asserting no audit highlights for the new fixture page. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| 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); |
There was a problem hiding this comment.
The test uses await auditHighlights.count() which doesn’t wait for the audit UI to finish rendering/running; it can read 0 immediately after clicking the app button even if highlights appear a moment later. To make this regression test reliable, prefer a locator assertion that auto-waits (e.g. await expect(auditHighlights).toHaveCount(0)), optionally after waiting for the audit canvas/window to be visible.
|
Test failures are unrelated, but need to fix in main first. |
ematipico
left a comment
There was a problem hiding this comment.
- changeset missing
- restore PR template
- use magic comments to auto close the issue
Issue ID : #16009
Description: Uses a safer text-content check for accessibility missing-content detection and adds regression coverage so hidden-initial-state