Skip to content

fix(charts): improve legends accessibility and update snapshots#36426

Open
v-baambati wants to merge 5 commits into
microsoft:masterfrom
v-baambati:BugFixes_JulyEND2026
Open

fix(charts): improve legends accessibility and update snapshots#36426
v-baambati wants to merge 5 commits into
microsoft:masterfrom
v-baambati:BugFixes_JulyEND2026

Conversation

@v-baambati

Copy link
Copy Markdown
Contributor

Summary

  • improve accessibility behavior in chart legends
  • update Legends and OverflowMenu implementation details for accessibility fixes
  • refresh chart snapshot baselines impacted by the legends changes

Changes

  • packages/charts/react-charts/library/src/components/Legends/Legends.tsx
  • packages/charts/react-charts/library/src/components/Legends/OverflowMenu.tsx
  • updated snapshots across chart components under packages/charts/react-charts/library/src/components/**/__snapshots__/

Notes

  • Branch is up to date with upstream/master and contains 3 commits on top, including the legends fix and snapshot refresh.

@v-baambati
v-baambati requested a review from a team as a code owner July 22, 2026 08:14
@github-actions

github-actions Bot commented Jul 22, 2026

Copy link
Copy Markdown

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react-charts
AreaChart
404.329 kB
126.469 kB
404.527 kB
126.525 kB
198 B
56 B
react-charts
DeclarativeChart
754.978 kB
221.556 kB
755.176 kB
221.616 kB
198 B
60 B
react-charts
DonutChart
315.1 kB
97.161 kB
315.298 kB
97.216 kB
198 B
55 B
react-charts
FunnelChart
306.341 kB
93.907 kB
306.539 kB
93.965 kB
198 B
58 B
react-charts
GanttChart
387.386 kB
120.871 kB
387.584 kB
120.927 kB
198 B
56 B
react-charts
GaugeChart
314.433 kB
96.548 kB
314.631 kB
96.616 kB
198 B
68 B
react-charts
GroupedVerticalBarChart
395.54 kB
123.695 kB
395.738 kB
123.751 kB
198 B
56 B
react-charts
HeatMapChart
389.494 kB
121.928 kB
389.692 kB
121.985 kB
198 B
57 B
react-charts
HorizontalBarChart
294.866 kB
89.744 kB
295.064 kB
89.8 kB
198 B
56 B
react-charts
Legends
234.402 kB
70.454 kB
234.6 kB
70.502 kB
198 B
48 B
react-charts
LineChart
415.68 kB
129.602 kB
415.878 kB
129.658 kB
198 B
56 B
react-charts
PolarChart
343.353 kB
107.405 kB
343.551 kB
107.465 kB
198 B
60 B
react-charts
ScatterChart
395.006 kB
123.651 kB
395.204 kB
123.706 kB
198 B
55 B
react-charts
VerticalBarChart
431.938 kB
128.619 kB
432.136 kB
128.681 kB
198 B
62 B
react-charts
VerticalStackedBarChart
401.558 kB
125.102 kB
401.756 kB
125.162 kB
198 B
60 B
Unchanged fixtures
Package & Exports Size (minified/GZIP)
react-charts
HorizontalBarChartWithAxis
63 B
83 B
react-charts
SankeyChart
212.023 kB
68.066 kB
react-charts
Sparkline
80.888 kB
26.864 kB
🤖 This report was generated against e85170a2cc9139a7adfbbb524090541389cbeafe

@github-actions

Copy link
Copy Markdown

Pull request demo site: URL

@@ -0,0 +1,7 @@
{

@github-actions github-actions Bot Jul 22, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🕵🏾‍♀️ visual changes to review in the Visual Change Report

vr-tests-react-components/Avatar Converged 2 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/Avatar Converged.badgeMask - RTL.normal.chromium.png 3 Changed
vr-tests-react-components/Avatar Converged.badgeMask.normal.chromium.png 4 Changed
vr-tests-react-components/CalendarCompat 4 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/CalendarCompat.multiDayView - High Contrast.default.chromium.png 1203 Changed
vr-tests-react-components/CalendarCompat.multiDayView.default.chromium_1.png 478 Changed
vr-tests-react-components/CalendarCompat.multiDayView - RTL.default.chromium.png 480 Changed
vr-tests-react-components/CalendarCompat.multiDayView - Dark Mode.default.chromium.png 1098 Changed
vr-tests-react-components/Charts-DonutChart 1 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/Charts-DonutChart.Dynamic.default.chromium.png 526 Changed
vr-tests-react-components/Charts-Legend 3 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/Charts-Legend.Overflow.expanded.chromium.png 4956 Changed
vr-tests-react-components/Charts-Legend.Overflow - Dark Mode.expanded.chromium.png 4253 Changed
vr-tests-react-components/Charts-Legend.Overflow - RTL.expanded.chromium.png 4996 Changed
vr-tests-react-components/Positioning 2 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/Positioning.Positioning end.updated 2 times.chromium.png 18 Changed
vr-tests-react-components/Positioning.Positioning end.chromium.png 512 Changed
vr-tests-react-components/ProgressBar converged 2 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/ProgressBar converged.Indeterminate + thickness - Dark Mode.default.chromium.png 72 Changed
vr-tests-react-components/ProgressBar converged.Indeterminate + thickness - High Contrast.default.chromium.png 78 Changed
vr-tests-react-components/Skeleton converged 1 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/Skeleton converged.Opaque Skeleton with rectangle - Dark Mode.default.chromium.png 6 Changed
vr-tests-react-components/TagPicker 1 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/TagPicker.disabled - High Contrast.chromium.png 1319 Changed

There were 4 duplicate changes discarded. Check the build logs for more information.

return (
<Menu>
<MenuTrigger disableButtonEnhancement>
<MenuButton ref={ref}>{displayLabel}</MenuButton>

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why are all these changes necessary? Did you try assigning the option role to the MenuButton instead?

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

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants