Repository navigation
Conversation
User menu version and deployment ID tooltips closed as soon as the pointer left the menu item, and Recharts tooltips followed the pointer with pointer events disabled, so neither could be hovered (WCAG 1.4.13). Keep focus on the menu items on pointerleave so their tooltips stay open, and place them beside the menu. Wrap ChartTooltip so it sits above the active point at the top of the plot, accepts pointer events, and keeps its data while hovered. Escape still dismisses both.
…tent # Conflicts: # site/src/components/Chart/Chart.stories.tsx # site/src/components/Chart/Chart.tsx
chrifro
marked this pull request as ready for review
October 16, 2026 11:41
Stop mousemove propagation on the tooltip instead of freezing its data, and drop user menu stories that do not catch regressions.
This branch has not been deployed
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 subscribe to this conversation on GitHub.
Already have an account?
Sign in.
1 participant
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.
Fixes WCAG 1.4.13 (content on hover or focus) for the user menu and chart tooltips: you can now move the pointer onto them without them disappearing, and Escape dismisses them.
UserDropdownContent.tsx): the "Browse the source code" and "Copy deployment ID" tooltips useddisableHoverableContent, and Radix Menu moves focus from an item to the menu onpointerleave, which blurred the trigger and closed the tooltip. The items nowpreventDefaultonpointerleaveso they keep focus. The tooltips also move toside="left"so they sit outside the menu instead of covering the next item. Escape closes only the tooltip; the menu stays open.components/Chart/Chart.tsx): Recharts tooltips followed the pointer withpointer-events: none, so they could never be reached.ChartTooltipis now a wrapper that centers the tooltip above the active point at the top of the plot, enables pointer events on the content, and stopsmousemovefrom reaching the chart while the pointer is over it, so the active point doesn't change. Recharts already dismisses it on Escape. This applies to allChartTooltipusers: deployment overview user engagement, template insights active users, and license seat consumption.Trade-off for UX review: the chart tooltip occupies a band at the top of the plot. Hovering in that band lands on the tooltip, so you can't scrub along the chart there, and it can cover the highest part of the line.
Fixes DEQ-566, DEQ-324
Proof
Real pointer moved from the trigger onto the tooltip (red dot marks the pointer). Captured from Storybook.
Before: the menu tooltip closes, and the chart tooltip slides away from the pointer. After: both stay under the pointer.
Tests
UserDropdownContent.test.tsx: the version item keeps focus on pointerleave (fails onmain).Chart.stories.tsxTooltipHovered: activates a point by keyboard and hovers the tooltip (fails onmainwithpointer-events: none).scripts/develop.sh): tooltips stay while hovered, Escape dismisses, keyboard focus still opens the menu tooltips.Implementation notes
ChartTooltipsetsdisplayName = "Tooltip"because Recharts finds the tooltip among chart children by display name.HoverableTooltipContent) so it isn't remounted under the pointer on every render.ResizeObserverin a stable callback ref, to center and clamp the tooltip within the plot.ChartTooltip'scontentis now typed as a requiredReact.ReactElement; all existing callers already pass<ChartTooltipContent />.frontend-deep-reviewskill; allblocking/should-fixfindings were addressed.Generated by Coder Agents on behalf of @chrifro.