(Line keyboard nav) Enhance S2 line features, reference lines, and documentation updates - #870
Open
majornista wants to merge 222 commits into
Open
(Line keyboard nav) Enhance S2 line features, reference lines, and documentation updates#870majornista wants to merge 222 commits into
majornista wants to merge 222 commits into
Conversation
… series to be in an other bucket
…e to take a number or an array of series names
This reverts commit e0a7dbf.
feat: s2 line width thickness on hover
feat: s2 line series limit
feat: Reference Line size for S2
Update package version to 1.49.0
feat: line draw animation utils
Fix: highlight area fixes
Adds /bug-summary command to scan planning/specs/*/issues/*.json (excluding implemented/) and report brief grouped summaries of open bug specs.
Assigns each open spec a sequential id (sorted by file path) so a follow-up command can target a specific spec by number instead of its full slug.
Fix: S2 line forecast point label position
fix: add proper opacity highlighting to line point annotation text
…ow flickering when metric range points are out of view
…s into feat/design-feature-tokens-and-skills
…imension-interaction bug: fix overflow flickering of metric range points that are out of view
…d-skills feat: design and feature tokens
Implements accessible data-navigator support for S2 line charts, including line/point structure building, focus node IDs, keyboard semantics, and chart/line/point focus rings in Vega marks. It also wires click-to-focus from Vega items back into navigator state, adds focus-aware opacity/deemphasis behavior for lines and legends, makes bars interactive when accessible navigation is enabled, and adds Storybook and test coverage for the new behavior.
Contributor
|
This is great! I'll perform a full review by the end of the week so we can get it in. Thanks for taking the time to put it together! |
Author
Note that the huge number of commits and files changed comes from merging |
Author
|
I need to work on the behavior with chart tooltips, so that they display and position relative to the focused node, and chart popovers, so that they can be toggled from the data navigator node. |
Contributor
|
I'm still reviewing. I'd like to see what the feedback from Frank is on #822 as well before we bring this in. |
Arrow-key navigation left the hover-look (point emphasis, opacity/ strokeWidth boost, hover label) stuck on whatever node the mouse last hovered, since keyboard focus never fired the mouseover/mouseout events those signals depend on. Add an interactionModality signal that tracks whether pointer or keyboard was used most recently, and gate every hover-vs-focus check in the Line encodings on it so the hover-look follows the modality that's actually active — including restoring focus's hover-look when the pointer leaves the chart, and fixing the mirror-image bug in the animated hover-ramp path where focus permanently overrode hover once touched. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
c-lamoureux
changed the title
added 3 commits
August 20, 2026 18:32
Wires up the data-navigator keyboard navigation (accessibleNavigation) to open ChartPopover on Enter/Space and drive ChartInspect tooltips via keyboard focus for both Line and Bar marks. Key changes: - Extract `selectAndOpenPopover` from `handleMarkClick` so it can be called from the keyboard path too - Add `focusedItemGeometry.ts` to compute scale-projected bounds/position for a keyboard-focused datum (no real Vega Item available) - Refactor `attachDataNavigator` to return a handle (`destroy`, `refocusCurrent`, `attachViewListeners`) instead of a bare cleanup function - Fix nav-structure teardown on re-render by using stable callback refs for `onActivate`, `onLeafFocus`, `getPopoverInfo`, and `getHoverClearInfo` - Suppress a fast double-Escape right after a popover closes (grace window) - First Escape dismisses a visible ChartInspect tooltip; second Escape drills out - Restore keyboard focus to the navigator node after the popover closes (double-rAF) - Add `mouseleave`/`mouseover` handlers so moving to a legend item restores the focused line's opacity - Track blur/focus to clear visual signals when tabbing out but preserve the node for shift+Tab back - Extract `getChartFocusRing` into a shared `chartFocusRingUtils.ts` (was duplicated in bar and line) - Replace the per-row Vega `window` transform for nav indices with a JS-precomputed signal (`navIndexByMarkId`) to avoid silently reordering the table - Update docs for bar.md, line.md, and overview.md with accessible navigation sections and key bindings
When accessibleNavigation is enabled on a Bar with no other interactive features, the interactionModality signal was never added to the spec. applyFocusSignals in dataNavigatorAdapter.ts writes to this signal unconditionally on keyboard focus, causing a Vega runtime error and breaking keyboard navigation entirely. Fix adds the signal whenever accessibleNavigation is true, with regression tests and an integration test covering full keyboard drill-down behavior.
Centralized chart-wide accessible-navigation primitives in S2 (`addFocusSignals`, `addChartFocusRing`) and reused them across chart, bar, and line builders so multi-mark charts no longer emit duplicate focus signals or duplicate `chartFocusRing` marks. Also fixed keyboard nav integration by resolving default mark names in `RscChart` (so Enter opens popovers even without explicit mark names), gated Escape tooltip dismissal to `accessibleNavigation`, extracted shared node label semantics utilities with tests, and updated Line accessible-navigation docs/stories to match the revised arrow-key behavior.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
6 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Adds accessible keyboard navigation ("data-navigator") support for S2 line charts, bringing lines to parity with the existing bar navigation support. Specifically:
buildLineStructure.ts— builds the navigator's line/point node structure (series → points), including focus node IDs so keyboard navigation can address individual points and whole lines.segmentId.ts— shared helper for constructing unique navigation node IDs.lineFocusRingUtils.ts— generates the chart-level, line-level, and point-level focus ring marks rendered in the Vega spec when a node is focused via keyboard.focusMatchUtils.ts— shared expression helper (getFocusedGroupOrItemMatchExpr) used to test whether a given datum matches the currently focused dimension/item, reused across the line marks and legend opacity logic.FADE_FACTOR) when a node is focused through keyboard navigation, mirroring the existing hover-deemphasis behavior.Navigator.tsx,dataNavigatorAdapter.ts).NAVIGATION_INDEX_FIELDand related) for keying a point's position within its line for keyboard-navigation focus.LineAccessibleNavigation.story.tsx, plus unit tests for all new/modified logic (buildLineStructure,lineFocusRingUtils,focusMatchUtils,lineDataUtils,lineMarkUtils,lineSpecBuilder,legendUtils,dataNavigatorAdapter,buildBarStructure,buildChartStructure).Related Issue
Motivation and Context
S2 line charts had no keyboard-accessible way to navigate between series and data points — only bars supported the data-navigator. This closes that gap so line charts meet the same accessibility bar, and keeps focus/hover deemphasis visually consistent between mouse and keyboard interaction.
How Has This Been Tested?
yarn testscoped to the touched packages (vega-spec-builder-s2/src/{line,legend,marks,bar}and thedataNavigatorsuite inreact-spectrum-charts-s2) — all suites passing.LineAccessibleNavigationstory (keyboard navigation between lines/points, focus rings rendering, legend/line deemphasis).Screenshots (if appropriate):
Types of changes
Checklist: