fix(charts): descriptive aria labels for all chart types (a11y) - #1108
Conversation
General-quality review finding (not branding): pie, radar, gauge, sankey, treemap, sunburst, circle-packing, gantt and choropleth never computed an ariaDescription, so BaseChart fell back to the generic "Chart visualization" for screen readers (bar/line/graph already do this). Each now derives a description from its data shape (e.g. "Pie chart with 5 segments", "Sankey diagram with 8 nodes and 12 links"), with the caller still able to override. New parametrized chart-aria test covers every chart + the override path. tsc + 561 chart tests + lint clean. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
alfredo1996
added
area:a11y
|
Warning Review limit reached
More reviews will be available in 47 minutes and 10 seconds. Learn how PR review limits work. Your organization has used up its prepaid credits, and credit purchases are no longer available. Enable the review add-on in the billing tab to keep reviews running — you're only billed for reviews past your plan's rate limits ($0.25/file). ⌛ How to resolve this issue?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 credits. 🚦 How do rate limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan refill rate. 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, the refill rate gradually slows as usage increases. The highest same-day bursts are limited more strictly. Please see our Fair Usage Limits Policy for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
WalkthroughNine chart components (pie, radar, gauge, sankey, treemap, sunburst, circle-packing, gantt, choropleth) now accept an ChangesChart ariaDescription wiring and tests
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Possibly related PRs
Suggested labels
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ 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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 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 `@component/src/charts/circle-packing-chart.tsx`:
- Around line 272-275: The ariaDescription fallback at the Circle-packing chart
component is using data.length to count top-level groups, but this is incorrect
for hierarchical input where a single root node contains multiple child groups.
Instead of using data.length directly in the aria description, check if the
first element in data has children (indicating a hierarchical structure), and if
so, count the children of that root node; otherwise, use data.length as the
fallback. This ensures the aria label accurately reflects the actual number of
top-level groups visible in the chart regardless of whether the input is flat or
hierarchical.
In `@component/src/charts/pie-chart.tsx`:
- Around line 193-195: The ariaDescription fallback template in the pie chart
component is using data.length to report the segment count, but when topN
grouping is applied, the actual rendered number of segments may be different
from the raw data length. Replace data.length in the ariaDescription with the
length of the actual rendered/processed data that accounts for the topN
parameter to ensure screen readers announce the correct number of segments that
are actually displayed in the pie chart.
🪄 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: 6f0493a8-e915-4512-84d0-5b546019f494
📒 Files selected for processing (10)
component/src/charts/__tests__/chart-aria.test.tsxcomponent/src/charts/choropleth-chart.tsxcomponent/src/charts/circle-packing-chart.tsxcomponent/src/charts/gantt-chart.tsxcomponent/src/charts/gauge-chart.tsxcomponent/src/charts/pie-chart.tsxcomponent/src/charts/radar-chart.tsxcomponent/src/charts/sankey-chart.tsxcomponent/src/charts/sunburst-chart.tsxcomponent/src/charts/treemap-chart.tsx
| ariaDescription={ | ||
| ariaDescription ?? | ||
| `Circle-packing chart with ${data.length} top-level groups` | ||
| } |
There was a problem hiding this comment.
Fallback group count can be wrong for single-root hierarchical input.
At Line 272, data.length reports 1 when input is a single root node with many children, so the aria label undercounts top-level groups.
Proposed fix
+ const topLevelGroupCount =
+ data.length === 1 && data[0]?.children?.length
+ ? data[0].children.length
+ : data.length;
+
return (
<div ref={containerRef} className="h-full w-full">
<BaseChart
options={options}
ariaDescription={
ariaDescription ??
- `Circle-packing chart with ${data.length} top-level groups`
+ `Circle-packing chart with ${topLevelGroupCount} top-level groups`
}
{...rest}
/>
</div>
);📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| ariaDescription={ | |
| ariaDescription ?? | |
| `Circle-packing chart with ${data.length} top-level groups` | |
| } | |
| const topLevelGroupCount = | |
| data.length === 1 && data[0]?.children?.length | |
| ? data[0].children.length | |
| : data.length; | |
| return ( | |
| <div ref={containerRef} className="h-full w-full"> | |
| <BaseChart | |
| options={options} | |
| ariaDescription={ | |
| ariaDescription ?? | |
| `Circle-packing chart with ${topLevelGroupCount} top-level groups` | |
| } | |
| {...rest} | |
| /> | |
| </div> | |
| ); |
🤖 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 `@component/src/charts/circle-packing-chart.tsx` around lines 272 - 275, The
ariaDescription fallback at the Circle-packing chart component is using
data.length to count top-level groups, but this is incorrect for hierarchical
input where a single root node contains multiple child groups. Instead of using
data.length directly in the aria description, check if the first element in data
has children (indicating a hierarchical structure), and if so, count the
children of that root node; otherwise, use data.length as the fallback. This
ensures the aria label accurately reflects the actual number of top-level groups
visible in the chart regardless of whether the input is flat or hierarchical.
| ariaDescription={ | ||
| ariaDescription ?? `Pie chart with ${data.length} segments` | ||
| } |
There was a problem hiding this comment.
Use rendered segment count in the fallback aria description.
Line 194 uses data.length, but the rendered pie can be grouped by topN, so screen readers may get an incorrect segment count.
Suggested fix
- ariaDescription={
- ariaDescription ?? `Pie chart with ${data.length} segments`
- }
+ ariaDescription={
+ ariaDescription ??
+ `Pie chart with ${topN > 0 && data.length > topN ? topN + 1 : data.length} segments`
+ }📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| ariaDescription={ | |
| ariaDescription ?? `Pie chart with ${data.length} segments` | |
| } | |
| ariaDescription={ | |
| ariaDescription ?? | |
| `Pie chart with ${topN > 0 && data.length > topN ? topN + 1 : data.length} segments` | |
| } |
🤖 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 `@component/src/charts/pie-chart.tsx` around lines 193 - 195, The
ariaDescription fallback template in the pie chart component is using
data.length to report the segment count, but when topN grouping is applied, the
actual rendered number of segments may be different from the raw data length.
Replace data.length in the ariaDescription with the length of the actual
rendered/processed data that accounts for the topN parameter to ensure screen
readers announce the correct number of segments that are actually displayed in
the pie chart.
GanttDataItem is { task: string; start: number; end: number } — the aria test
used name/string dates. CI's full tsc (includes tests) caught it.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
|
2 participants
Summary
General-quality (not branding) finding from the per-chart review: 9 charts had no screen-reader description. They never set
ariaDescription, soBaseChartfell back to the genericaria-label="Chart visualization". (bar/line/graph already derived one.)Each now derives a description from its data shape, with callers still able to override:
Chart visualization→Pie chart with 5 segmentsChart visualization→Radar chart comparing 2 series across 5 axesChart visualization→Gauge showing 75 of 0 to 100Chart visualization→Sankey diagram with 8 nodes and 12 linksChart visualization→Treemap with 6 top-level itemsChart visualization→Sunburst chart with 4 top-level segmentsChart visualization→Circle-packing chart with 4 top-level groupsChart visualization→Gantt chart with 8 tasksChart visualization→Choropleth map with 50 regions(No visual change — this is an accessibility-tree improvement, so before/after is the
aria-labeltext above.)Tests
chart-aria.test.tsxasserts each chart's descriptive label + the caller-override path.tsc· 561 chart tests · lint clean.Summary by CodeRabbit
Release Notes
New Features
Tests