Skip to content

a11y: add role/title/desc + aria-label plumbing to chart SVGs #119

@benzsevern

Description

Why

Surface already wires role=\"img\" + <title> + <desc> + aria-label + an SR-only data table (src/components/Surface.tsx), and markAriaLabel exists per datum. The actual gap is narrower:

  1. Coverage: several chart components don't accept/forward the a11y props at all. Confirmed missing today: Flowchart.tsx (none of title/description/ariaLabel/dataTable referenced). Likely also: OrgChart, MindMap, ArchitectureDiagram, Badge, AutoChart. Audit and fix.
  2. Fallback descriptions: when description is omitted, charts could auto-emit a sensible <desc> from data (e.g. "Bar chart, 4 categories, values 7 to 24"). Today nothing emits a fallback.
  3. No a11y test coverage: no *.a11y.test.ts or assertions on role/<title>/<desc> presence in the existing snapshot suite.

Spec

  • Add title?, description?, ariaLabel?, dataTable? to every chart component that doesn't have them yet; forward to Surface. Diagrams included.
  • New src/core/a11yDescribe.ts: per-chart-type fallback description generators (describeBarChart(data, opts), describeLineChart, etc.) emitted as <desc> when no explicit description is passed.
  • New src/components/a11y.test.ts: asserts every exported chart renders role=\"img\", has a non-empty <title> when title prop is passed, has a non-empty <desc> when description is passed OR (post-fallback) when only data is passed.
  • Tests cover at least: BarChart, LineChart, AreaChart, PieChart, ScatterPlot, Flowchart, ERDiagram, OrgChart, Sankey.

Acceptance

  • npm test passes; new a11y suite ≥ 12 assertions across charts.
  • docs/API.md gains an Accessibility section listing supported props + the fallback-description behavior.
  • Bundle stays under the 75 KB gzipped budget.

Out of scope

  • Keyboard navigation between data points (interactive layer; file separately if needed).

Metadata

Metadata

Assignees

No one assigned

    Labels

    a11yAccessibilityenhancementNew feature or request

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions