[IAmJSD]

The Home and Purchases savings charts are <canvas role="img"> elements with fixed aria-labels, so a screen-reader user heard a generic description and could not get a single value out of them, and the stacked layers of the per-service chart differed only by shade. This PR gives each chart a data-driven summary label and a "View as table" disclosure with every value, and separates the stacked layers with a 2px gap.

Refs #744
Partial: the layers still share one hue per service. Distinct per-layer colors are in the branch for #189, which edits the same datasets; doing both here would conflict.

What changed

• New frontend/src/lib/chart-a11y.ts: setChartSummary (data-driven aria-label) and renderChartTable/removeChartTable, a collapsed "View as table" <details> with a caption, column headers and row headers. Cells are built with textContent only, the disclosure is inserted after an anchor outside Chart.js's sizing box, and it keeps its open state on refresh.
• frontend/src/dashboard.ts: the "Potential savings range per service" label states the service count, total and largest service, and its table lists Current / Committed, Lowest option, Upside and Total for every service (including any beyond the 10 bars drawn). The "Savings over time" label states the range, latest cumulative value and point count, with a Date / Cumulative savings table. Both tables are removed in empty and error states. The per-service datasets get a 2px top border in the card color, so adjacent layers are separated by a gap.
• frontend/src/modules/savings-history.ts: the same summary and table (Date / Period savings / Cumulative savings) for the Purchases chart, placed after its .chart-container.
• frontend/src/styles/charts.css: disclosure and table styles (scrolls inside a 320px box).
• Tests: new chart-a11y.test.ts (6), new cases in dashboard.test.ts (7) and savings-history.test.ts (2), and a new tests-e2e/chart-text-alternative.spec.ts.

Commits: edf1c487 (helper), 44678ef8 (charts).

Why this approach

A native <details> disclosure works with the keyboard and screen readers without custom JS, stays out of the way when collapsed, and also helps sighted users who can't separate the colors (the issue's "View as table" option). The ladder timeline already uses the same pattern (dynamic aria-label plus a table), so this follows an existing convention in the repo. Putting the table after the canvas's own box avoids Chart.js resize loops.

Screenshots

Before is main (a14dc8f2), after is this branch. Both are headless Chromium at 1440x900 against the repo's mocked e2e API. The yellow dashed box is injected by the screenshot script to print the canvas's aria-label (what a screen reader announces); it is not part of the app.

Before	After
A fixed description with no values, no table, and layers in shades of one hue with no separation.	The label states service count, total and largest service; the expanded "View as table" lists every layer value per service; 2px gaps separate the stacked layers.

Verification

Run on this branch's head 44678ef8 on top of main a14dc8f2, from frontend/:

• npm run lint: 0 errors (existing warnings only). Typecheck and build pass.
• Jest: 110 suites, 3501 passed, 1 skipped. The new tests also pass with --randomize.
• Playwright (e2e-local.sh): 159 passed, including the new chart-text-alternative.spec.ts (the per-service label names the service count; the table opens with the keyboard and lists every service by row header; the trend chart has a label and table).
• Secrets scan clean (planted key flagged); scripts/test-git-secrets-allowlist.sh: 137 PASS, 0 FAIL.

Notes for review

• Copy to check: "View as table", and the label sentences, e.g. "Stacked bar chart of monthly savings for 4 services, $575 in total. Largest: compute at $210. Layers: ... Values are in the table below the chart."
• Tables can be long (the 7-day trend and the Purchases 7-day chart are hourly, up to about 168 rows). They are collapsed by default and scroll inside a 320px box.
• The "layers differ only by shade" part is only partly addressed here (2px gaps). The distinct per-layer colors depend on fix(frontend): "Potential savings range per service" legend and bar-color encoding mismatch #189's branch; if that color change is rejected, a pattern or hatching follow-up is needed.
• The static aria-label in index.html is still the initial value before data loads; it is replaced on every render.

Overlaps

• fix(frontend): "Potential savings range per service" legend and bar-color encoding mismatch #189 edits the same renderSavingsByService datasets (colors) and the same index.html aria-label line: textual conflicts, best merged before this one.
• fix(frontend): charts rebuilt on every change; dashboard trend has no stale guard #747 changes the same chart create/destroy lines in dashboard.ts and savings-history.ts (new Chart -> upsertChart) and adds a generation guard to loadSavingsTrendChart: conflicts near the code added here, easy to resolve.
• fix(frontend): Potential Monthly Savings differs between Home and Opportunities for the same recommendations #180 touches loadDashboard only.

Note for the UI owner

This changes UI code that @cristim owns. IAmJSD reviewed the before/after screenshots and asked for it to be merged; any design point you disagree with can be a follow-up.

🤖 Generated with Claude Code

[coderabbitai]

Warning

Review limit reached

• Run on-demand review

_{This review includes 8 billable files and costs up to $2.00.}

Or wait 59 minutes for your next included review.

Check out review usage here.

View limit details

Limit details: You’ve used the included review currently available.

Learn how review limits work.

Review configuration:

Run configuration

• Source mode: Auto
• Repository: LeanerCloud/cloud-commitments-platform
• Branch: main
• File: .coderabbit.yaml
• Commit: 19534fc
• Layers: Repository YAML
• Review profile: CHILL
• Plan: Advanced
• Run ID: 4a318f17-946b-4619-8885-6f4f7ba24def

Commits

Reviewing files that changed from the base of the PR and between 19534fc and 21ea7a8.

Files selected for processing: 8

• frontend/src/__tests__/chart-a11y.test.ts
• frontend/src/__tests__/dashboard.test.ts
• frontend/src/__tests__/savings-history.test.ts
• frontend/src/dashboard.ts
• frontend/src/lib/chart-a11y.ts
• frontend/src/modules/savings-history.ts
• frontend/src/styles/charts.css
• frontend/tests-e2e/chart-text-alternative.spec.ts

• Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

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

[IAmJSD]

Independent review (IAmJSD's agent, fresh context, given only the diff, the issue and the PR text): APPROVE 21ea7a89e86665959d11ad30d768aff9f0dadd2e

Blocking:

• none
  Non-blocking:
• frontend/src/modules/savings-history.ts:421-422: the Purchases "View as table" cells go through the module-local compact formatCurrency (still on main), so $1,234.56 shows as "$1.23K" and a missing value as "--". The Home tables use the shared utils formatter ("$1,234.56", NO_VALUE "—", main fix(frontend): one money formatter and placeholder, right-align money #1376). A table meant to give exact values rounds them away, and the two charts' tables disagree on format. fix(frontend): purchases savings chart uses two y-axes and shadows formatCurrency #749's branch removes the local formatter. Either note that dependency, or use the shared formatter for the table cells.
• frontend/src/tests/dashboard.test.ts:1889: the test is named "separated by a 2px gap, not only by shade". Since main fix(frontend): color the per-service savings chart by layer #1335 the layers differ by hue, so the name is stale.
• frontend/src/dashboard.ts:38: SEGMENT_GAP hardcodes '#ffffff' to match .card { background: white }. It is correct today, but it is a second source for the card colour (--cudly-surface).
• frontend/src/trends.ts (main feat(frontend): add a Trends sub-tab for the analytics trends endpoint #1317) builds its own chart-alternative table (buildTable). There are now two helpers for the same pattern, which is fine to leave as a follow-up.
  Attacked: Read origin/main...HEAD in full. git diff origin/main HEAD is identical to the three-dot diff, so the tree is exactly main plus the PR. Checked each of the 3 merges against ^2 (dashboard.ts, charts.css): main's SAVINGS_LAYER_COLORS (fix(frontend): color the per-service savings chart by layer #1335), the attachSparkline removal and loadYtdSparkline (fix(frontend): storage-clear sign-out, safe lookups, real YTD sparkline #1344), and the sparse path (feat(frontend): show a sparse-data state on the savings trend chart #1334) are all intact. The branch only adds removeChartTable, including in the new sparse branch, which is correct. Checked follow-up 21ea7a8: the 1-point to 2-point fixture change is needed by MIN_TREND_POINTS=2, and the new sparse-state case covers the removeChartTable call the merge commit added (I did not run it against a tree without that call). The chart-a11y helper is textContent only, with no innerHTML or inline styles. The table sits outside the max-height-capped canvas and savings-history's .chart-container, so there is no Chart.js resize loop. Jest chart-a11y, dashboard, savings-history and css*: 454 passed, 1 skipped.

[IAmJSD]

Local verification at 21ea7a89 merged onto current main (030c5d44; merge-tree df2f1058; Linux, Node, headless Chromium):

• This branch's own checks passed at this head: lint, typecheck, build, the full jest suite, the full Playwright e2e suite, and the git-secrets checks (see Verification in the PR body).
• The combined tree of every UI PR in this merge wave (tree ab77aa6e, main plus 5 PRs) passes npm ci, lint, typecheck, build, jest (1 skipped, 4248 passed, 4249 total), and the full Playwright suite (247 passed).
• CI is green on 21ea7a89 (CI Success, Run pre-commit hooks).
• The independent review above approves this exact head.
• Nothing was applied to any cloud.

[IAmJSD]

Marked ready and merged by IAmJSD's agent, at IAmJSD's request (IAmJSD reviewed the before/after screenshots; cristim is traveling), after the independent review and local verification above, all at 21ea7a89.