Skip to content

chore: added a11y testing to workflow #748 - #749

Open
mart-sessman wants to merge 2 commits into
rcfrom
chore/748-automated-a11y-testing
Open

chore: added a11y testing to workflow #748#749
mart-sessman wants to merge 2 commits into
rcfrom
chore/748-automated-a11y-testing

Conversation

@mart-sessman

@mart-sessman mart-sessman commented Jul 15, 2026

Copy link
Copy Markdown
Contributor

Summary by CodeRabbit

  • New Features

    • Added automated accessibility testing for Storybook components.
    • Accessibility results are summarized in pull requests and available as downloadable reports.
    • Added commands for running Storybook tests locally and in CI.
    • Added an option to exclude community stories from Storybook builds.
  • Bug Fixes

    • Accessibility violations in changed components can now block CI, while known issues remain warnings.
    • Missing test results now fail CI to prevent undetected issues.

@coderabbitai

coderabbitai Bot commented Jul 15, 2026

Copy link
Copy Markdown

Review Change Stack

Warning

Review limit reached

@mart-sessman, you've reached your PR review limit, so we couldn't start this review.

Next review available in: 33 minutes

Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available.
You're only billed for reviews past your plan's rate limits ($0.25/file).

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews.

How do review limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please refer docs for additional details.

Review details
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 7f0c758a-7ecc-4c51-8056-4e7fa62240f3

📥 Commits

Reviewing files that changed from the base of the PR and between 4c100ee and d7a5328.

⛔ Files ignored due to path filters (1)
  • package-lock.json is excluded by !**/package-lock.json
📒 Files selected for processing (3)
  • .github/scripts/a11y-report.mjs
  • .github/workflows/react-test-and-lint.yml
  • package.json
📝 Walkthrough

Walkthrough

Storybook accessibility testing is configured with dedicated npm scripts and a test runner. A GitHub Actions job builds and tests Storybook, generates a diff-scoped Markdown report, gates changed components, updates a pull request comment, and uploads artifacts.

Changes

Accessibility CI

Layer / File(s) Summary
Storybook accessibility test setup
.storybook/main.ts, .storybook/preview.tsx, package.json
Storybook can exclude community stories for CI, accessibility checks use error status, and Storybook test-runner scripts and dependency are added.
Accessibility report parsing and classification
.github/scripts/a11y-report.mjs
JUnit and run-log output are parsed into blocking, pre-existing, and known-issue sections, with missing JUnit output treated as a failure.
CI execution and pull request reporting
.github/workflows/react-test-and-lint.yml, .gitignore
The accessibility job builds and tests Storybook, scopes results to changed files, publishes reports and comments, uploads artifacts, and ignores generated output.

Estimated code review effort: 4 (Complex) | ~45 minutes

Sequence Diagram(s)

sequenceDiagram
  participant AccessibilityJob
  participant StorybookStaticServer
  participant StorybookTestRunner
  participant A11yReport
  participant GitHubPullRequest
  AccessibilityJob->>StorybookStaticServer: build and serve Storybook
  AccessibilityJob->>StorybookTestRunner: run accessibility tests
  StorybookTestRunner-->>AccessibilityJob: write JUnit results and run log
  AccessibilityJob->>A11yReport: provide results and changed files
  A11yReport-->>AccessibilityJob: return report and gate status
  AccessibilityJob->>GitHubPullRequest: update accessibility comment
Loading
🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title clearly matches the main change: adding automated accessibility testing to the workflow.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch chore/748-automated-a11y-testing

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@github-actions

github-actions Bot commented Jul 15, 2026

Copy link
Copy Markdown

♿ Accessibility — ✅ no blocking violations

No accessibility violations in the components changed by this PR.

⚠️ Pre-existing — 160 violations in components not changed here (warn only)

Component Rules Stories
TEDI-Ready/Components/Form/ChoiceGroup/Checkbox label, aria-conditional-attr, aria-hidden-focus 3
TEDI-Ready/Components/Form/ChoiceGroup/ChoiceGroup aria-allowed-attr ×17 17
TEDI-Ready/Components/Form/ChoiceGroup/Radio label, aria-hidden-focus 2
TEDI-Ready/Components/Form/DateTimeField aria-allowed-attr ×13, button-name 14
TEDI-Ready/Components/Form/Field label 1
TEDI-Ready/Components/Form/FileDropzone label ×8, wrapped ×3, aria-hidden-focus 9
TEDI-Ready/Components/Form/FormLabel aria-hidden-focus 1
TEDI-Ready/Components/Form/InputGroup label ×3, label-title-only ×2, wrapped 5
TEDI-Ready/Components/Form/NumberField label-title-only 1
TEDI-Ready/Components/Form/Search landmark-unique ×2, aria-allowed-attr ×2 4
TEDI-Ready/Components/Form/Select aria-allowed-attr, color-contrast 2
TEDI-Ready/Components/Form/Slider label-title-only 1
TEDI-Ready/Components/Form/Toggle aria-hidden-focus 1
TEDI-Ready/Components/Helpers/Ellipsis aria-allowed-attr ×3 3
TEDI-Ready/Components/Helpers/OptionContent aria-allowed-attr 1
TEDI-Ready/Components/Navigation/Breadcrumbs landmark-unique ×2 2
TEDI-Ready/Components/Navigation/HorizontalStepper landmark-unique 1
TEDI-Ready/Components/Navigation/Pagination landmark-unique 1
TEDI-Ready/Components/Navigation/TableOfContents scrollable-region-focusable 1
TEDI-Ready/Components/Navigation/Tabs aria-valid-attr-value 1
TEDI-Ready/Components/Overlay/Popover aria-allowed-attr ×7 7
TEDI-Ready/Content/Calendar color-contrast ×8 8
TEDI-Ready/Content/Carousel landmark-unique 1
TEDI-Ready/Content/Label aria-hidden-focus 1
TEDI-Ready/Content/Table empty-table-header ×13, aria-allowed-attr ×2, scrollable-region-focusable 16
TEDI-Ready/Layout/Footer landmark-no-duplicate-contentinfo ×2, frame-title 3
TEDI-Ready/Layout/Header aria-required-children 1
TEDI-Ready/Layout/SideNav aria-required-children ×11 11
TEDI-Ready/Layout/TopNav list 1
Tedi-Ready/Components/Form/DateField aria-allowed-attr ×21 21
Tedi-Ready/Components/Form/TimeField aria-allowed-attr ×13 13
Tedi-Ready/Components/Form/TimePicker aria-allowed-attr 1
Tedi-Ready/Components/Tag/Tag aria-allowed-attr 1
Tedi-Ready/Content/TextGroup color-contrast 1
Tedi-Ready/Layout/VerticalSpacing heading-order 1
Tedi-ready/Components/Helpers/ScrollVisibility scrollable-region-focusable, landmark-unique 2
Stories

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🧹 Nitpick comments (3)
.github/workflows/react-test-and-lint.yml (1)

131-139: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value

Use single quotes in JavaScript workflow steps.

As per path instructions, scripts and workflow steps under .github should use single quotes to align with repository conventions.

♻️ Proposed fix
-            const fs = require("fs");
-            const marker = "<!-- a11y-report -->";
-            let body = marker + "\n";
+            const fs = require('fs');
+            const marker = '<!-- a11y-report -->';
+            let body = marker + '\n';
             try {
-              body += fs.readFileSync("a11y-report/summary.md", "utf8");
+              body += fs.readFileSync('a11y-report/summary.md', 'utf8');
             } catch {
-              body += "## ♿ Accessibility\n\nNo report was produced (the run may have failed before testing).";
+              body += '## ♿ Accessibility\n\nNo report was produced (the run may have failed before testing).';
             }
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In @.github/workflows/react-test-and-lint.yml around lines 131 - 139, Update the
inline JavaScript in the workflow step to use single-quoted string literals
throughout, including the marker, file path, encoding, and fallback message,
while preserving the existing report-generation behavior.

Source: Path instructions

.github/scripts/a11y-report.mjs (1)

18-188: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value

Use single quotes and enforce the 120-character print width.

As per path instructions for scripts under .github, please use single quotes instead of double quotes throughout this script (e.g., in imports, string literals, and regex replacements). Additionally, ensure that the print width does not exceed 120 characters (e.g., lines 132, 150, 152, 154).

Could you please format the file using the project's configured formatter to automatically address these violations?

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In @.github/scripts/a11y-report.mjs around lines 18 - 188, Format the entire
a11y-report script with the project-configured formatter, converting
double-quoted imports, strings, and regex replacement literals to single quotes
and wrapping any lines over 120 characters. Preserve the existing behavior of
helpers such as readFailures, readTodos, compTable, and storyDetails.

Source: Path instructions

package.json (1)

28-29: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

Pin the Storybook CI helpers in devDependencies and drop npx -y. concurrently, http-server, and wait-on aren’t declared in this package, so test-storybook:ci fetches them on every run. Adding them to devDependencies and using the local binaries would keep CI reproducible and avoid network-dependent installs.

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@package.json` around lines 28 - 29, Update the test-storybook:ci script to
remove npx -y and invoke the locally installed concurrently, http-server, and
wait-on binaries. Add pinned versions of concurrently, http-server, and wait-on
to devDependencies so the CI workflow uses reproducible declared dependencies.

Source: Path instructions

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In @.github/workflows/react-test-and-lint.yml:
- Around line 79-82: Update the actions/checkout step to disable credential
persistence by setting persist-credentials to false in its with configuration,
while preserving the existing full-fetch behavior.

---

Nitpick comments:
In @.github/scripts/a11y-report.mjs:
- Around line 18-188: Format the entire a11y-report script with the
project-configured formatter, converting double-quoted imports, strings, and
regex replacement literals to single quotes and wrapping any lines over 120
characters. Preserve the existing behavior of helpers such as readFailures,
readTodos, compTable, and storyDetails.

In @.github/workflows/react-test-and-lint.yml:
- Around line 131-139: Update the inline JavaScript in the workflow step to use
single-quoted string literals throughout, including the marker, file path,
encoding, and fallback message, while preserving the existing report-generation
behavior.

In `@package.json`:
- Around line 28-29: Update the test-storybook:ci script to remove npx -y and
invoke the locally installed concurrently, http-server, and wait-on binaries.
Add pinned versions of concurrently, http-server, and wait-on to devDependencies
so the CI workflow uses reproducible declared dependencies.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: e2987d09-3ff7-4eaf-8aed-40f2d15025d3

📥 Commits

Reviewing files that changed from the base of the PR and between d41dbde and 4c100ee.

⛔ Files ignored due to path filters (1)
  • package-lock.json is excluded by !**/package-lock.json
📒 Files selected for processing (6)
  • .github/scripts/a11y-report.mjs
  • .github/workflows/react-test-and-lint.yml
  • .gitignore
  • .storybook/main.ts
  • .storybook/preview.tsx
  • package.json

Comment thread .github/workflows/react-test-and-lint.yml
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants