[stephaniehobson]

One-line summary

Highlight a chart line while its legend entry is hovered or focused, and hide or show the line by clicking it.

Significant changes and points to review

• Legend entries are now <button aria-pressed> elements, styled to look as before. Three specs now find them by .legend-entry instead of .legend span.
• Hovering or focusing an entry fades every other line on that chart to 15% opacity.
• Clicking an entry hides its line, dots, and hover points. The entry stays in the legend, struck through and faded, so it can be clicked back.
• The y-axis rescales to the lines that are shown. The x-axis and every line's color stay fixed.
• The last line with data can't be hidden; its entry is disabled.
• Hidden and highlighted populations live in ChartContainer.jsx state. They reset when the data changes, such as on a region change, since another region can have different populations.

Issue / Bugzilla link

#15

Testing

Run npm install and npm run build:css first, then npm start.

• On http://localhost:3000/dashboard/usage-behavior, hover each Top Languages legend entry and check that the other lines fade
• Click "en-US" and check that its line disappears, its entry is struck through, and the y-axis rescales to the smaller languages
• Click "en-US" again and check that the line comes back
• Hide every line but one and check that the last entry can't be clicked
• Tab to a legend entry and check that focus highlights its line and Enter or Space toggles it
• Hide a line, change the region, and check that every line is shown again

[Copilot]

🔵 Needs a closer look

Human assessment is needed because an unpublished finding identifies insufficient text contrast in enabled controls used to restore hidden lines.

No open issues 🎉

3 resolved since last review

• Memoize palettes to avoid regeneration on legend focus
• Cache randomized palettes for populations beyond the fixed color set
• Preserve pinned readouts across legend-triggered redraws

_{Review effort: Balanced}