Skip to content

fix(monitoring): label KPI charts for screen readers#4907

Merged
pedrofrxncx merged 1 commit into
mainfrom
fix/monitoring-kpi-chart-aria-label-w2
Jul 21, 2026
Merged

fix(monitoring): label KPI charts for screen readers#4907
pedrofrxncx merged 1 commit into
mainfrom
fix/monitoring-kpi-chart-aria-label-w2

Conversation

@pedrofrxncx

@pedrofrxncx pedrofrxncx commented Jul 21, 2026

Copy link
Copy Markdown
Collaborator

The KPI charts in the org monitoring dashboard (Tool Calls, Latency, Errors, and the AI Usage row) render as bare recharts SVGs with no accessible name — a screen reader user landing on one gets either silence or a jumble of raw SVG element announcements, with no indication of what metric the chart shows.

Adds a required ariaLabel prop to KPIChart and forwards it to the underlying ChartContainer div as role="img" + aria-label, then supplies a concrete label at each of the 8 call sites in the monitoring overview tab (e.g. "Tool calls over time", "Average latency over time", "AI errors over time").

This directly improves accessibility of the monitoring widgets, the stated focus for this area, with no behavior change to the rendered chart itself — only an added ARIA label.

To verify: open a browser's accessibility tree / VoiceOver on the org monitoring page and confirm each chart card now announces a descriptive label instead of nothing.

Locally ran: bun run fmt (clean) and cd apps/mesh && bunx tsc --noEmit (clean, confirms the now-required ariaLabel prop is supplied everywhere KPIChart is used). Full CI validates lint and the rest of the suite.


Summary by cubic

Adds accessible names to monitoring KPI charts so screen readers announce what each chart shows. No visual changes.

  • Bug Fixes
    • Made ariaLabel required on KPIChart and forwarded as role="img" + aria-label on the container.
    • Labeled all 8 charts in the org monitoring overview (Tool calls, Latency avg/P95, Errors, AI usage: calls, tokens, cost, latency, errors).

Written for commit b2862b7. Summary will update on new commits.

Review in cubic

The monitoring dashboard's KPI charts (Tool Calls, Latency, Errors, AI
Usage) render as bare SVGs with no accessible name, so screen reader
users get nothing meaningful when landing on them. Add a required
ariaLabel to KPIChart and wire role="img" + aria-label through to the
underlying ChartContainer div.
@pedrofrxncx
pedrofrxncx merged commit da58a04 into main Jul 21, 2026
14 checks passed
@pedrofrxncx
pedrofrxncx deleted the fix/monitoring-kpi-chart-aria-label-w2 branch July 21, 2026 01:08
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.

1 participant