docs: add playwright a11y tests for the composition app#698
Open
fateeand wants to merge 12 commits into
Open
Conversation
fateeand
requested review from
TerranceKhumalo-absa,
korel-san and
lukasmatta
as code owners
Contributor
Coverage report for library
Test suite run success2188 tests passing in 63 suites. Report generated by 🧪jest coverage report action from 862459e |
Contributor
There was a problem hiding this comment.
Pull request overview
Adds end-to-end accessibility coverage for the composition app (in addition to existing component-level scans) by introducing a dedicated Playwright “accessibility” project powered by axe-core, reorganizing the Playwright test suite, and wiring an independent pa11y-ci check into CI. The PR also includes several UI-kit and composition UI updates to resolve newly surfaced accessibility violations.
Changes:
- Introduce Playwright + axe-core accessibility scanning for both
cps-ui-kitcomponent pages and the fullcompositionapp routes (desktop + mobile viewport), with shared helpers and grouped test organization. - Add/adjust pa11y-ci scripts/config and a new CI job to run pa11y checks independently of Playwright.
- Apply targeted a11y fixes across components and composition pages (ARIA semantics, conditional
aria-controls, reduced motion behavior, heading structure, and non-color-only status indicators).
Reviewed changes
Copilot reviewed 33 out of 35 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| README.md | Updates repo documentation for the new accessibility testing surfaces and scripts. |
| projects/cps-ui-kit/src/lib/components/cps-tree-table/cps-tree-table.component.ts | Adds workaround to remove PrimeNG’s empty <tfoot> that violates ARIA requirements. |
| projects/cps-ui-kit/src/lib/components/cps-tree-select/cps-tree-select.component.html | Makes aria-controls conditional on open state to avoid referencing missing IDs. |
| projects/cps-ui-kit/src/lib/components/cps-tree-autocomplete/cps-tree-autocomplete.component.html | Makes aria-controls conditional on open state to avoid referencing missing IDs. |
| projects/cps-ui-kit/src/lib/components/cps-sidebar-menu/cps-sidebar-menu.component.html | Adds explicit link role to improve nav semantics for router-link items. |
| projects/cps-ui-kit/src/lib/components/cps-select/cps-select.component.html | Makes aria-controls conditional on open state to avoid referencing missing IDs. |
| projects/cps-ui-kit/src/lib/components/cps-loader/cps-loader.component.scss | Adjusts reduced-motion behavior to remove text animation while keeping progress indication. |
| projects/cps-ui-kit/src/lib/components/cps-datepicker/cps-datepicker.component.html | Makes ariaControls conditional on open state to avoid referencing missing IDs. |
| projects/cps-ui-kit/src/lib/components/cps-chip/cps-chip.component.html | Adds role="group" for improved accessibility semantics. |
| projects/cps-ui-kit/src/lib/components/cps-autocomplete/cps-autocomplete.component.html | Makes aria-controls conditional on open state to avoid referencing missing IDs. |
| projects/composition/src/styles.scss | Sets an opaque body background to reduce contrast false-positives through transparency. |
| projects/composition/src/app/pages/tree-table-page/tree-table-page.component.ts | Imports CpsIconComponent for icon-based boolean indicators. |
| projects/composition/src/app/pages/tree-table-page/tree-table-page.component.html | Replaces color-only + glyph indicators with cps-icon + ariaLabel. |
| projects/composition/src/app/pages/table-page/table-page.component.ts | Imports CpsIconComponent for icon-based boolean indicators. |
| projects/composition/src/app/pages/table-page/table-page.component.html | Replaces color-only + glyph indicators with cps-icon + ariaLabel. |
| projects/composition/src/app/pages/sidebar-menu-page/sidebar-menu-page.component.html | Adds an accessible label to the sidebar menu example. |
| projects/composition/src/app/pages/button-toggle-page/button-toggle-page.component.html | Marks disabled preview as non-interactive to avoid intentional-disabled control violations. |
| projects/composition/src/app/components/code-example/code-example.component.scss | Updates typography and adjusts focus styling to avoid scroll/focus-ring visual issues. |
| projects/composition/src/app/components/code-example/code-example.component.html | Promotes example label heading level for improved document structure. |
| projects/composition/src/app/app.component.scss | Ensures heading styling inherits existing toolbar typography. |
| projects/composition/src/app/app.component.html | Promotes page title to an h1 to satisfy top-level heading requirements. |
| playwright/README.md | Documents new Playwright structure, scripts, and the accessibility project routing. |
| playwright/fixtures/composition-components.ts | Refactors component/page registry to support grouped entries and exports page route list. |
| playwright/fixtures/axe-test.ts | Removes the old axe fixture in favor of shared helpers. |
| playwright/fixtures/axe-helpers.ts | Adds shared axe-core Playwright fixture + helper utilities (formatting, waits). |
| playwright/cps-ui-kit/components/cps-table.spec.ts | Fixes fixture file path after Playwright folder reorganization. |
| playwright/cps-ui-kit/components/cps-scheduler.spec.ts | Adds functional Playwright coverage for scheduler flows and cron generation. |
| playwright/cps-ui-kit/components/cps-autocomplete.spec.ts | Adds functional Playwright coverage for autocomplete interactions. |
| playwright/cps-ui-kit/accessibility-cps-ui-kit.spec.ts | Adds grouped, per-component axe scans (desktop + mobile viewport). |
| playwright/composition/accessibility-composition.spec.ts | Adds full-page axe scans per route + shell interactive state and focus-flow coverage. |
| playwright/a11y-matrix-generator.js | Removes the old matrix generator tooling. |
| playwright.config.ts | Routes “accessibility” specs into a dedicated Playwright project and excludes them from functional runs. |
| package.json | Adds granular Playwright scripts and replaces legacy a11y scripts with pa11y equivalents. |
| .pa11yci | Tightens pa11y config (remove ineffective threshold, enable target-size rule, adjust hidden elements). |
| .github/workflows/cps-shared-ui-checkers.yml | Adds a dedicated pa11y CI job to run pa11y-ci against the composition pages. |
Comment on lines
+30
to
+33
| /** | ||
| * Groups consecutive entries sharing the same `group` so their tests can be | ||
| * nested under a shared test.describe block. | ||
| */ |
Comment on lines
+899
to
+901
|
|
||
| this._removeEmptyFooter(); | ||
| } |
Comment on lines
+915
to
+917
| if (tfoot && tfoot.childElementCount === 0) { | ||
| this.renderer.removeChild(tfoot.parentNode, tfoot); | ||
| } |
Contributor
Playwright test results
Details
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
cps-ui-kitcomponents were scanned, not the composition app's pages/shell/flows), scanning against WCAG 2.0/2.1/2.2 A/AA + best-practice rulesplaywright/intocps-ui-kit/(with acomponents/subfolder) andcomposition/, each with a dedicatedaccessibility-*.spec.tsfile routed to a newaccessibilityPlaywright project (Desktop Chrome only); added matching granularnpm run test:playwright:*scripts for running any slice (composition/cps-ui-kit × all/accessibility/components)test.describe(componentName)block via agroupfield on eachComponentEntry, instead of appearing as flat, hard-to-scan individual test rowsstates/ComponentStatepattern entirely with thegroupfield - every state a component can be in is now its own explicit, independently pass/fail-able test entry rather than being bundled and iterated internally, since all states are meaningfully distinct examples worth seeing pass/fail on their ownnpm run test:playwrightandnpm run test:pa11yare both fully greenpa11yjob to CI runningpa11y-ciagainst all 33 composition demo pages, independent of the Playwright checks, and fixed its config so it actually fails the build on a real error (previously--threshold 1000meant it never would) and enabled axe'starget-sizerule so its WCAG 2.2 coverage (2.5.8) matches what Playwright already checksREADME.mdandplaywright/README.mdto reflect the new structure, scripts, and the two independent accessibility-testing surfaces (Playwright/axe-core vs. pa11y-ci)Accessibility fixes found via pa11y
cps-chip: added ARIArole="group"on the root elementcps-sidebar-menu: gave nav itemsrole="link"cps-select/cps-tree-select/cps-tree-autocomplete/cps-autocomplete/cps-datepicker: madearia-controlsconditional on open state, so it never references an ID that doesn't exist in the DOM (the popup isn't rendered until opened)cps-tree-table: removed the empty<tfoot>which PrimeNG renders unconditionally in the non-scrollable view, which otherwise violatesaria-required-childrencps-loader: removed "Loading..." text animation in reduced motion mode<span>to an<h1>, fixing the missing-top-level-heading violation on every routetable-page/tree-table-page: replaced raw color-only pass/fail indicators ([style.color]+ Unicode checkmark/cross glyphs) withcps-icon+ explicitariaLabel, fixing color-contrast and non-text-content violations.composition-page(root page container): gave it a real background color instead of transparent - this was the root cause of the majority ofelmPartiallyObscuredcolor-contrast false positives site-wide, since axe couldn't resolve an opaque background through the transparent scroll containerbutton-toggle-page: marked the "disabled" example preview as non-interactive so axe doesn't flag intentionally-disabled controlscode-examplepanel: fixed a scroll-following focus-ring bug where the ring appeared to detach from its element when the preview panel was scrolledTODO on merge: add
feat: resolve remaining accessibility issuesto squash commit footer to generate a release PRRelease notes: