Added dynamic data example in line chart-v9 stories - #36791
v-baambati wants to merge 16 commits into
Conversation
📊 Bundle size report
Unchanged fixtures
|
|
Pull request demo site: URL |
![github-actions[bot]](https://cdn.statically.io/img/avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
…/v-baambati/fluentui into LineChartChangeDataFunctionality
…ineChartChangeDataFunctionality
…tionality to Vertical bar chart with dynamic and guage chart dynamic examles
| @@ -0,0 +1,6 @@ | |||
| { | |||
| "type": "patch", | |||
| "comment": "Added dynamic data example in line chart-v9 stories", | |||
There was a problem hiding this comment.
can you update the comment and PR title. This is not a example update anymore
| ref={el => { | ||
| _rootElem.current = el; | ||
| }} | ||
| onBlur={_handleChartBlur} |
There was a problem hiding this comment.
[ReviewAgent] Bug: a segment keeps its focus ring and its callout while focus sits on a legend: _renderLegends() is inside this root at :740, so relatedTarget never leaves and _hideCallout(true) never runs. scope the blur to the arc group, or clear focusedElement when the new target isnt a segment.
Technical detail & examples
Blur handling moved off each arc and the needle, where it was onBlur={_handleBlur} calling _hideCallout(true), onto the component root. _handleChartBlur at GaugeChart.tsx:382 only hides when isFocusLeavingChart(event) is true, that is when relatedTarget is outside event.currentTarget.
_renderLegends() is rendered inside that same root at GaugeChart.tsx:740, and Legends.tsx:339 renders each legend as a focusable Button. useArrowNavigationGroup is applied to the inner chartWrapper, so Tab out of the arc group lands on the first legend button, which is still inside the root. relatedTarget is therefore inside currentTarget, _hideCallout(true) is skipped, and two pieces of state stay stale.
focusedElement keeps the arc's legend, so GaugeChart.tsx:675 keeps strokeWidth={ARC_PADDING} on an arc that no longer has focus. The only writer that clears it is _hideCallout(true); _hideCallout(false), reached from _handleMouseOut and _handleCalloutDismiss, leaves it set. isPopoverOpen also stays true with refSelected still pointing at the arc, so the callout hangs off an unfocused element.
The legend Button additionally fires hoverAction, which calls setHoveredLegend, so _legendHighlighted flips underneath the still-open callout and the other arcs lose their tabIndex.
Sibling charts still dismiss on element blur: LineChart.tsx:642, :907, :985, :1073, :1150 and :1203, ScatterChart.tsx:471, AreaChart.tsx:786 and VerticalStackedBarChart.tsx:659. GaugeChart is now the only one that holds a focus indicator on an element that does not have focus.
Fix: put the blur handler on the chartWrapper or on the arc listbox group instead of the root, or keep the root handler and clear focusedElement whenever relatedTarget is not one of the arc or needle elements.
This branch has not been deployed
2 participants
No description provided.