Skip to content

Sparkline hover-tooltip has no keyboard equivalent #3954

Description

@JSONbored

Context

src/components/metagraphed/charts/sparkline.tsx:111-166 attaches onPointerMove/onPointerLeave to the wrapping <div> to drive a per-point value tooltip. There is no onFocus/onKeyDown/tabIndex handling to let keyboard users step through points and see the same per-point readout — keyboard-only users get just the single static aria-label summary on the <svg> (e.g. "Stake Gini"), never the point-by-point value/date detail mouse users see on hover. This sparkline component is reused broadly: concentration-panel.tsx, subnet-history-chart.tsx, neuron-history-chart.tsx, and more.

Requirement

Keyboard users must be able to reach the same per-point value/date detail that pointer users get via hover, on every chart using this shared sparkline component.

Deliverable

  • File to change: src/components/metagraphed/charts/sparkline.tsx:111-166.
  • What "done" looks like concretely: make the sparkline wrapper focusable (tabIndex={0}), add keyboard handling (e.g. arrow-key stepping between points once focused) that drives the same tooltip-reveal logic currently triggered by onPointerMove, and ensure the currently-focused point's value/date is exposed via an aria-live region or updated aria-valuenow-style attribute so screen readers announce it as the user steps through.

Acceptance criteria

  • sparkline.tsx appears in the diff
  • A keyboard-only user can focus the sparkline and step through points (e.g. via arrow keys), with each point's value/date exposed to assistive tech as they do
  • Mouse-hover behavior is completely unchanged
  • Verified across at least two of the sparkline's real consumers (e.g. concentration-panel.tsx and subnet-history-chart.tsx), not just in isolation
  • Includes a before/after screen recording demonstrating keyboard-driven point stepping — this interaction can't be shown in a static screenshot

Non-goals

  • Don't change the sparkline's visual rendering or the chart library/approach it uses.
  • Don't add new chart types or data — this is an interaction-accessibility fix for the existing component.

Size

Size: M — keep this PR small (aim for ≤10 files / ≤1000 LOC).

Part of #2542.

Metadata

Metadata

Assignees

No one assigned

    Labels

    gittensor:bugGittensor-scored bug fix or unsolicited PR — scores a 0.05x multiplier.

    Projects

    Status
    Todo

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions