fixed voice controll accessibility issue by v-baambati · Pull Request #36292 · microsoft/fluentui

v-baambati · 2026-06-09T04:57:15Z

No description provided.

github-actions · 2026-06-09T05:02:34Z

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
`react-charts` DeclarativeChart	`754.98 kB` `220.248 kB`	`755.768 kB` `220.538 kB`	`788 B` `290 B`
`react-charts` GroupedVerticalBarChart	`394.95 kB` `122.987 kB`	`395.093 kB` `123.053 kB`	`143 B` `66 B`
`react-charts` HorizontalBarChart	`294.114 kB` `89.141 kB`	`294.21 kB` `89.181 kB`	`96 B` `40 B`
`react-charts` VerticalBarChart	`431.43 kB` `127.922 kB`	`431.662 kB` `127.992 kB`	`232 B` `70 B`
`react-charts` VerticalStackedBarChart	`401.154 kB` `124.425 kB`	`401.299 kB` `124.484 kB`	`145 B` `59 B`

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
`react-charts` AreaChart	`403.979 kB` `125.912 kB`
`react-charts` DonutChart	`314.442 kB` `96.656 kB`
`react-charts` FunnelChart	`305.941 kB` `93.468 kB`
`react-charts` GanttChart	`387.079 kB` `120.263 kB`
`react-charts` GaugeChart	`313.82 kB` `96.023 kB`
`react-charts` HeatMapChart	`389.155 kB` `121.302 kB`
`react-charts` HorizontalBarChartWithAxis	`63 B` `83 B`
`react-charts` Legends	`233.794 kB` `69.977 kB`
`react-charts` LineChart	`415.309 kB` `128.873 kB`
`react-charts` PolarChart	`342.793 kB` `106.526 kB`
`react-charts` SankeyChart	`211.914 kB` `67.836 kB`
`react-charts` ScatterChart	`394.692 kB` `122.992 kB`
`react-charts` Sparkline	`80.503 kB` `26.644 kB`

_{🤖 This report was generated against 672afec62c04eada141116387483d47c13c3da68}

github-actions · 2026-06-09T05:06:41Z

Pull request demo site: URL

github-actions · 2026-06-09T05:49:20Z

@@ -594,7 +594,7 @@ export const GroupedVerticalBarChart: React.FC<GroupedVerticalBarChartProps> = R
              onClick={pointData.onClick}


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

vr-tests-react-components/CalendarCompat 4 screenshots

Image Name Diff(in Pixels) Image Type

vr-tests-react-components/CalendarCompat.multiDayView - Dark Mode.default.chromium.png 1093 Changed

vr-tests-react-components/CalendarCompat.multiDayView - High Contrast.default.chromium.png 1206 Changed

vr-tests-react-components/CalendarCompat.multiDayView.default.chromium_1.png 489 Changed

vr-tests-react-components/CalendarCompat.multiDayView.default.chromium.png 486 Changed

vr-tests-react-components/Menu Converged - submenuIndicator slotted content 2 screenshots

Image Name Diff(in Pixels) Image Type

vr-tests-react-components/Menu Converged - submenuIndicator slotted content.default - RTL.submenus open.chromium.png 599 Changed

vr-tests-react-components/Menu Converged - submenuIndicator slotted content.default.submenus open.chromium.png 413 Changed

vr-tests-react-components/Positioning 2 screenshots

Image Name Diff(in Pixels) Image Type

vr-tests-react-components/Positioning.Positioning end.chromium.png 133 Changed

vr-tests-react-components/Positioning.Positioning end.updated 2 times.chromium.png 946 Changed

vr-tests-react-components/ProgressBar converged 3 screenshots

Image Name Diff(in Pixels) Image Type

vr-tests-react-components/ProgressBar converged.Indeterminate + thickness - Dark Mode.default.chromium.png 25 Changed

vr-tests-react-components/ProgressBar converged.Indeterminate + thickness - High Contrast.default.chromium.png 35 Changed

vr-tests-react-components/ProgressBar converged.Indeterminate + thickness.default.chromium.png 75 Changed

vr-tests-react-components/TagPicker 2 screenshots

Image Name Diff(in Pixels) Image Type

vr-tests-react-components/TagPicker.disabled - Dark Mode.disabled input hover.chromium.png 658 Changed

vr-tests-react-components/TagPicker.disabled - RTL.disabled input hover.chromium.png 635 Changed

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

…ccessibilityIssueFix_June2026

AtishayMsft · 2026-06-11T05:46:37Z

        const keyVal = _uniqLineText + '_' + index;
+        const rawLegendVal = points!.chartData?.[0]?.legend || 'Series';
+        const legendVal =
+          rawLegendVal


what is this doing

Aria-label will be something like below

EX: one, bar 1 of 3 with 2 data points

krkshitij · 2026-06-12T11:15:16Z

    return (
      <g
+        role="listbox"
+        aria-label={chartGroupAriaLabel}


Here, <g> represents an x-axis category group and not a series/legend

updated as Jan - Mar, category 1 of 4, with bar series: 2021, 2022.

krkshitij · 2026-06-12T11:22:11Z

        {lineBorders.length > 0 ? <g>{lineBorders}</g> : null}
        {lines.length > 0 ? <g>{lines}</g> : null}
-        <g>{dots}</g>
+        <g role="listbox" aria-label={chartGroupAriaLabel}>


Assign listbox role to the dotGroups instead. Each dotGroup contains data points of only 1 line series.

Moved to dotGroup

krkshitij · 2026-06-12T13:34:51Z

                <g
+                  role="listbox"
                  id={keyVal}
+                  aria-label={chartGroupAriaLabel}


Here, <g> represents a single horizontal bar (a primary bar + an optional placeholder bar) so no need to mention the number of data points in aria-label.

updated as bar 1 of 8.

krkshitij · 2026-06-12T13:45:13Z

          return (
            <>
-              <g>{_bars}</g>
+              <g role="listbox" aria-label={chartGroupAriaLabel}>


Here, <g> contains all the bars. It would be better to create a <g> for all bars in each y-group.

Created separate g tag which represents y-group and aria label updated as 30000, bar group 3 of 4.

krkshitij · 2026-06-12T14:32:14Z

            <>
-              <g {..._arrowNavigationAttributes}>{_bars}</g>
-              <g>
+              <g role="listbox" aria-label={chartGroupAriaLabel} {..._arrowNavigationAttributes}>


Here, <g> contains all the bars. Assign listbox role to the <g> representing each stack instead.

Updated. Arial label 0. Metadata1, 40%. Metadata2, 5%. Metadata3, 20%. Metadata4, 10%. Metadata5, 23%. Metadata6, 0.4%. Metadata7, 0.5%. Metadata8, 0.3%. Metadata9, 0.7%. Metadata10, 0.1%. Supported Builds, 42. Recommended Builds, 10.

krkshitij · 2026-06-12T14:36:24Z

+              <g role="listbox" aria-label={chartGroupAriaLabel} {..._arrowNavigationAttributes}>
+                {_bars}
+              </g>
+              <g role="listbox" aria-label={lineGroupAriaLabel}>


Here, <g> contains data points from all line series. It would be better to create a <g> for each line series.

Updated, Aria Label: Supported Builds, line chart with 5 data points.

krkshitij · 2026-06-12T14:50:26Z

  _yMin = Math.min(d3Min(_points, (point: VerticalBarChartDataPoint) => point.y)!, props.yMinValue || 0);
  const legendBars: JSXElement = _getLegendData(_points);
+  const legendVal = _points[0]?.legend || 'Series';
+  const chartGroupAriaLabel = `${legendVal}, bar chart with ${_points.length} bars and ${_points.length} data points.`;


No need to include chart related details here. Some of these details are already included in the chart title. Ensure that the aria label only contains info about what the <g> represents. Try not to repeat them. Do the same for other charts as well.

Updated as we discussed.

…ccessibilityIssueFix_June2026

fixed voice controll accessibility issue

89d68ae

v-baambati requested a review from a team as a code owner June 9, 2026 04:57

github-actions Bot reviewed Jun 9, 2026

View reviewed changes

krkshitij reviewed Jun 9, 2026

View reviewed changes

Comment thread ...arts/react-charts/library/src/components/GroupedVerticalBarChart/GroupedVerticalBarChart.tsx Outdated

v-baambati added 4 commits June 10, 2026 20:21

updated aria label

ca2086c

Merge branch 'master' of https://github.com/microsoft/fluentui into A…

06ed7bd

…ccessibilityIssueFix_June2026

added change file

239c7c1

fixed duplicate aria label value

3c6207d

AtishayMsft reviewed Jun 11, 2026

View reviewed changes

Comment thread packages/charts/react-charts/library/src/components/HorizontalBarChart/HorizontalBarChart.tsx

AtishayMsft reviewed Jun 11, 2026

View reviewed changes

krkshitij reviewed Jun 12, 2026

View reviewed changes

v-baambati added 2 commits June 17, 2026 10:43

updated aria-label value as per the review comments

d3771a7

Merge branch 'master' of https://github.com/microsoft/fluentui into A…

0210c7b

…ccessibilityIssueFix_June2026

		@@ -594,7 +594,7 @@ export const GroupedVerticalBarChart: React.FC<GroupedVerticalBarChartProps> = R
		onClick={pointData.onClick}

Image Name	Diff(in Pixels)	Image Type
vr-tests-react-components/CalendarCompat.multiDayView - Dark Mode.default.chromium.png	1093	Changed
vr-tests-react-components/CalendarCompat.multiDayView - High Contrast.default.chromium.png	1206	Changed
vr-tests-react-components/CalendarCompat.multiDayView.default.chromium_1.png	489	Changed
vr-tests-react-components/CalendarCompat.multiDayView.default.chromium.png	486	Changed

Image Name	Diff(in Pixels)	Image Type
vr-tests-react-components/Menu Converged - submenuIndicator slotted content.default - RTL.submenus open.chromium.png	599	Changed
vr-tests-react-components/Menu Converged - submenuIndicator slotted content.default.submenus open.chromium.png	413	Changed

Image Name	Diff(in Pixels)	Image Type
vr-tests-react-components/Positioning.Positioning end.chromium.png	133	Changed
vr-tests-react-components/Positioning.Positioning end.updated 2 times.chromium.png	946	Changed

Image Name	Diff(in Pixels)	Image Type
vr-tests-react-components/ProgressBar converged.Indeterminate + thickness - Dark Mode.default.chromium.png	25	Changed
vr-tests-react-components/ProgressBar converged.Indeterminate + thickness - High Contrast.default.chromium.png	35	Changed
vr-tests-react-components/ProgressBar converged.Indeterminate + thickness.default.chromium.png	75	Changed

Image Name	Diff(in Pixels)	Image Type
vr-tests-react-components/TagPicker.disabled - Dark Mode.disabled input hover.chromium.png	658	Changed
vr-tests-react-components/TagPicker.disabled - RTL.disabled input hover.chromium.png	635	Changed

Conversation

v-baambati commented Jun 9, 2026

Uh oh!

github-actions Bot commented Jun 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📊 Bundle size report

Uh oh!

github-actions Bot commented Jun 9, 2026

Uh oh!

github-actions Bot Jun 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

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

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

krkshitij Jun 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

v-baambati Jun 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

krkshitij Jun 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

krkshitij Jun 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

v-baambati Jun 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

krkshitij Jun 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

github-actions Bot commented Jun 9, 2026 •

edited

Loading

github-actions Bot Jun 9, 2026 •

edited

Loading

krkshitij Jun 12, 2026 •

edited

Loading

v-baambati Jun 16, 2026 •

edited

Loading

krkshitij Jun 12, 2026 •

edited

Loading

krkshitij Jun 12, 2026 •

edited

Loading

v-baambati Jun 16, 2026 •

edited

Loading

krkshitij Jun 12, 2026 •

edited

Loading