chore: added a11y testing to workflow #748 - #749
Conversation
|
Warning Review limit reached
Next review available in: 33 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?After more reviews become available, a review can be triggered using the 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 configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Run ID: ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (3)
📝 WalkthroughWalkthroughStorybook 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. ChangesAccessibility CI
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
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
♿ Accessibility — ✅ no blocking violationsNo accessibility violations in the components changed by this PR.
|
| 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
- TEDI-Ready/Components/Form/ChoiceGroup/Checkbox — Sizes, States, With Tooltip
- TEDI-Ready/Components/Form/ChoiceGroup/ChoiceGroup — Checkbox, Checkbox Card, Checkbox Card With Icon, Checkbox Row, Custom Item HTML Labels, Custom Item Labels, Custom Label, Radio, Radio Card Segmented, Radio Card Separated, Radio Card With Icon, Radio Row, Responsive, With Default Value, With Error, With Extra Content, With Indeterminate
- TEDI-Ready/Components/Form/ChoiceGroup/Radio — Sizes, With Tooltip
- TEDI-Ready/Components/Form/DateTimeField — Controlled, Date Constraints, Default, Field Options, Multi Steps, Native, No Times Available, Per Day Time Slots, Predefined Time Slots, Range, Range Predefined Time Slots, Size, States, Year Grid
- TEDI-Ready/Components/Form/Field — Default
- TEDI-Ready/Components/Form/FileDropzone — Default, Disabled, Has Tooltip, Multiple, Multiple With Individual Validation, Multiple With Individual Validation And Attachment Props, Validation Failed, With Attachment Props, With Hint
- TEDI-Ready/Components/Form/FormLabel — Structure
- TEDI-Ready/Components/Form/InputGroup — End Dynamic, End Static, Start Dynamic, Start Static, States
- TEDI-Ready/Components/Form/NumberField — States
- TEDI-Ready/Components/Form/Search — Sizes, States, With result and actions, With suggestions
- TEDI-Ready/Components/Form/Select — Ellipsis Tags, Examples
- TEDI-Ready/Components/Form/Slider — States
- TEDI-Ready/Components/Form/Toggle — Type
- TEDI-Ready/Components/Helpers/Ellipsis — Default, Leading Start, Responsive With Custom Popover
- TEDI-Ready/Components/Helpers/OptionContent — Inside search (in a dropdown)
- TEDI-Ready/Components/Navigation/Breadcrumbs — Custom Separator, Long
- TEDI-Ready/Components/Navigation/HorizontalStepper — With Descriptions
- TEDI-Ready/Components/Navigation/Pagination — Borders
- TEDI-Ready/Components/Navigation/TableOfContents — Sticky In Layout
- TEDI-Ready/Components/Navigation/Tabs — States
- TEDI-Ready/Components/Overlay/Popover — Arrow Position, Closing Button, Not Dismissible, Scroll Locked, Size, Trigger, With Prominent Border
- TEDI-Ready/Content/Calendar — Availability, Default, Multiple Selected Dates, No Controls, Range, With Footer, With Legend, With Weeks Count
- TEDI-Ready/Content/Carousel — Examples
- TEDI-Ready/Content/Label — Info Button Story
- TEDI-Ready/Content/Table — Actions, Clickable Rows, Collapsible Rows, Collapsible Rows Row Trigger, Custom, Default, Editable Values, Long Texts, Merged Cells, Reorderable Rows, Simple, Single Select Rows, Sizes, Sticky First Column, Sticky Header, Sticky Header And First Column
- TEDI-Ready/Layout/Footer — Custom Content, Device Size, With Bottom Section
- TEDI-Ready/Layout/Header — Logged In With Sidenav
- TEDI-Ready/Layout/SideNav — Collapsible Toggle, Default, Default Open, Medium Side Nav Items, Second Level Menu Items, Second Level Menu Items Parents Are Links, Sidenav Item States, Small Side Nav Items, Sub Titles, Third Level Menu Items, Third Level Menu Items Parents Are Links
- TEDI-Ready/Layout/TopNav — With Separator
- Tedi-Ready/Components/Form/DateField — Available Days, Default, Disabled Weekends, Field Options, Grid Picker First, Modal Picker, Modal Pickers, Month Year Only, Multiple Months, Multiple Values, Native Picker, On Click Type, Range, Responsive Modal Picker, Show Week Count, Size, States, Value Type, With Footer, Year Grid, Year Only
- Tedi-Ready/Components/Form/TimeField — Custom Step, Default, Dropdown, Field Options, Manual Typing, Modal Picker, Native Picker, On Click Type, Predefined Time Slots, Responsive Modal Picker, Sizes, States, Value Type
- Tedi-Ready/Components/Form/TimePicker — Predefined Slots
- Tedi-Ready/Components/Tag/Tag — Ellipsis
- Tedi-Ready/Content/TextGroup — Types
- Tedi-Ready/Layout/VerticalSpacing — Mixed Content
- Tedi-ready/Components/Helpers/ScrollVisibility — Animation Direction, Toggle Visibility
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (3)
.github/workflows/react-test-and-lint.yml (1)
131-139: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueUse single quotes in JavaScript workflow steps.
As per path instructions, scripts and workflow steps under
.githubshould 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 valueUse 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 winPin the Storybook CI helpers in
devDependenciesand dropnpx -y.concurrently,http-server, andwait-onaren’t declared in this package, sotest-storybook:cifetches them on every run. Adding them todevDependenciesand 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
⛔ Files ignored due to path filters (1)
package-lock.jsonis 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.tsxpackage.json
Summary by CodeRabbit
New Features
Bug Fixes