Skip to content

Mobile UI: Phase 2 - Unify chart tooltips and add tap-toggle for touch #449

Description

@JeffreyBLewis

Part of the mobile UI plan (see Phase 1 issue for overview).

Goal

Chart point/legend details currently only show on mouseover via d3.tip, duplicated across five files. On touch devices there's no hover, so this detail is invisible on mobile.

Affected: static/js/voteCharts.js (~line 528), static/js/party.js (~lines 428, 494), static/js/committee.js (~line 347), static/js/personIdeology.js (~line 253), static/js/district.js (~line 375).

Scope

  • Extract the repeated d3.tip mouseover pattern into one shared helper.
  • Gate on matchMedia('(pointer: coarse)'): mouse/pointer-fine keeps hover behavior; touch gets tap-to-toggle (tap opens, tap elsewhere or a close affordance dismisses).
  • Ensure toggled tooltips are keyboard/focus accessible too (consistent with the existing WCAG pass).

Test plan

  • On desktop (mouse), hover behavior is unchanged
  • On a touch device/emulator, tapping a point/legend entry shows its tooltip; tapping elsewhere dismisses it
  • No regression in the scatter, party glance, committee, person ideology, or district pages

🤖 Generated with Claude Code

https://claude.ai/code/session_013KJMYfgTNsxrmjHZpZKAHT

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions