docs(plugin-e2e): document accessibility testing with Axe#2600
docs(plugin-e2e): document accessibility testing with Axe#2600tolzhabayev wants to merge 2 commits intomainfrom
Conversation
Adds a "Test for accessibility violations" section to the panel plugin testing guide covering the new scanForA11yViolations fixture and toHaveNoA11yViolations matcher introduced in #2462, and adds the accessibility capability to the e2e overview feature list.
|
Hello! 👋 This repository uses Auto for releasing packages using PR labels. ✨ This PR can be merged. It will not be considered when calculating future versions of the npm packages and will not appear in the changelogs. |
There was a problem hiding this comment.
Pull request overview
Adds documentation for running accessibility (a11y) scans in @grafana/plugin-e2e tests using Axe, and surfaces this capability on the e2e docs landing page.
Changes:
- Adds a new “Test for accessibility violations” section to the panel plugin e2e testing guide, including examples for scanning, scoping, and assertion tuning.
- Updates the e2e overview page to list accessibility testing as a supported capability.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
docusaurus/docs/e2e-test-a-plugin/test-a-panel-plugin.md |
Documents the scanForA11yViolations fixture and toHaveNoA11yViolations matcher, with examples and guidance. |
docusaurus/docs/e2e-test-a-plugin/index.md |
Adds an “Accessibility testing” bullet to the overview capability list. |
|
|
||
| ```ts | ||
| const report = await scanForA11yViolations({ | ||
| include: '[data-testid="data-testid panel content"]', |
There was a problem hiding this comment.
The include example selector ([data-testid="data-testid panel content"]) looks incorrect/unlikely to match any element (it repeats data-testid and uses a space-containing value). Replace it with a realistic selector (or a placeholder like your panel root selector) so readers can copy/paste an example that works.
| include: '[data-testid="data-testid panel content"]', | |
| include: '[data-testid="panel-content"]', |
There was a problem hiding this comment.
The original [data-testid="data-testid panel content"] is actually the real Grafana selector (Grafana's e2e-selectors prefix data-testid values with the literal string data-testid — see selectors.components.Panels.Panel.content in @grafana/e2e-selectors), so the suggested [data-testid="panel-content"] would not match anything. That said, fair point that it looks confusing and doesn't tell plugin authors anything about scoping to their panel. Switched the example to a plugin-author-owned [data-testid="my-panel-root"] in 0ebf9a1, which is more useful for this guide anyway.
| `@grafana/plugin-e2e` ships with an [Axe](https://www.deque.com/axe/)-powered `scanForA11yViolations` fixture and a `toHaveNoA11yViolations` matcher so you can catch accessibility regressions in your panel as part of your end-to-end suite. By default the scan runs the WCAG 2.0 and 2.1 A and AA rule sets, which match Grafana's [WCAG 2.1 AA](https://www.w3.org/TR/WCAG21/) target. | ||
|
|
||
| :::note | ||
| The accessibility scanning APIs are currently `@alpha` — the surface may change before becoming stable. Feedback is welcome on [GitHub](https://github.com/grafana/plugin-tools/issues). |
There was a problem hiding this comment.
In the note, "are currently" uses present continuous tense. Consider rewriting in present simple to match the docs style guide (for example, "The accessibility scanning APIs are @alpha. The surface may change before it becomes stable.").
| The accessibility scanning APIs are currently `@alpha` — the surface may change before becoming stable. Feedback is welcome on [GitHub](https://github.com/grafana/plugin-tools/issues). | |
| The accessibility scanning APIs are `@alpha`. The surface may change before it becomes stable. Feedback is welcome on [GitHub](https://github.com/grafana/plugin-tools/issues). |
tolzhabayev
added
type/docs
- Note that @axe-core/playwright is an optional peer dep that must be installed - Switch the include example to a plugin-author-owned data-testid so the snippet is meaningful in a plugin dev guide and avoids exposing Grafana's internal selector convention - Tighten the @Alpha note to present simple
grafana-plugins-platform-bot
Bot
moved this from 📬 Triage
to 🔬 In review
in Grafana Catalog Team
|
Thanks for raising the PR @tolzhabayev We intentionally held off on documenting or announcing this feature so we could refine the reporter first. After it's stable in grafana/grafana, we'll move it into plugin-e2e. For more context, see the discussion |
|
@sunker nothing too interesting on the reporter side honestly, we actually opted to not invest further into the reporter because we stopped relying on a bespoke report format and just rely on the pass/fail of the e2es and the tags to tell what happened now. I can start to investigate moving that over soon. |
Summary
scanForA11yViolationsfixture andtoHaveNoA11yViolationsmatcher introduced in A11y: add fixture and matcher for a11y tests with Axe #2462.The new section covers the basic scan + assert flow, scoping with
include/exclude, passing through axe-core run options, and tuning the assertion withthresholdandignoredRules. It also notes that the API is@alpha.Test plan