Skip to content

Updated bar role from image to button based on the props to fix voice control issue in accessibility mode#36096

Open
v-baambati wants to merge 8 commits intomicrosoft:masterfrom
v-baambati:May_2026BugFixes
Open

Updated bar role from image to button based on the props to fix voice control issue in accessibility mode#36096
v-baambati wants to merge 8 commits intomicrosoft:masterfrom
v-baambati:May_2026BugFixes

Conversation

@v-baambati
Copy link
Copy Markdown
Contributor

@v-baambati v-baambati requested a review from a team as a code owner May 5, 2026 08:21
@github-actions
Copy link
Copy Markdown

github-actions Bot commented May 5, 2026

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react-charts
DeclarativeChart
752.513 kB
219.844 kB
752.828 kB
219.926 kB
315 B
82 B
react-charts
GroupedVerticalBarChart
392.734 kB
122.697 kB
392.74 kB
122.7 kB
6 B
3 B
react-charts
HorizontalBarChart
291.9 kB
88.873 kB
291.996 kB
88.893 kB
96 B
20 B
react-charts
VerticalBarChart
429.215 kB
127.535 kB
429.356 kB
127.554 kB
141 B
19 B
react-charts
VerticalStackedBarChart
398.739 kB
124.078 kB
398.901 kB
124.111 kB
162 B
33 B
Unchanged fixtures
Package & Exports Size (minified/GZIP)
react-charts
AreaChart
401.757 kB
125.687 kB
react-charts
DonutChart
312.17 kB
96.288 kB
react-charts
FunnelChart
303.717 kB
93.118 kB
react-charts
GanttChart
384.858 kB
119.954 kB
react-charts
GaugeChart
311.603 kB
95.74 kB
react-charts
HeatMapChart
386.937 kB
121.084 kB
react-charts
HorizontalBarChartWithAxis
63 B
83 B
react-charts
Legends
231.437 kB
69.656 kB
react-charts
LineChart
413.091 kB
128.576 kB
react-charts
PolarChart
340.566 kB
106.213 kB
react-charts
SankeyChart
209.97 kB
67.042 kB
react-charts
ScatterChart
392.473 kB
122.669 kB
react-charts
Sparkline
80.503 kB
26.644 kB
🤖 This report was generated against b5cc67b18ed07766b1dc133252cda7896d5699c0

@github-actions
Copy link
Copy Markdown

github-actions Bot commented May 5, 2026

Pull request demo site: URL

@@ -320,13 +320,18 @@ export const HorizontalBarChart: React.FunctionComponent<HorizontalBarChartProps
_showToolTipOnSegment && point.legend !== '' ? event => _hoverOn(event, xValue, point) : undefined
Copy link
Copy Markdown

@github-actions github-actions Bot May 5, 2026

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/Charts-DonutChart 2 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/Charts-DonutChart.Dynamic.default.chromium.png 5581 Changed
vr-tests-react-components/Charts-DonutChart.Dynamic - Dark Mode.default.chromium.png 7530 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.submenus open.chromium.png 605 Changed
vr-tests-react-components/Menu Converged - submenuIndicator slotted content.default - RTL.submenus open.chromium.png 599 Changed
vr-tests-react-components/Positioning 2 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/Positioning.Positioning end.chromium.png 620 Changed
vr-tests-react-components/Positioning.Positioning end.updated 2 times.chromium.png 735 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 79 Changed
vr-tests-react-components/ProgressBar converged.Indeterminate + thickness - High Contrast.default.chromium.png 122 Changed
vr-tests-react-components/ProgressBar converged.Indeterminate + thickness.default.chromium.png 85 Changed
vr-tests-react-components/TagPicker 3 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 - High Contrast.disabled input hover.chromium.png 1319 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.

}
onFocus={_showToolTipOnSegment && point.legend !== '' ? event => _hoverOn(event, xValue, point) : undefined}
role="img"
role={point.onClick || (!props.hideTooltip && point.legend !== '') ? 'button' : 'img'}
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.

Isn't setting the role as button sufficient for interactive elements? Why update tabIndex?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

Yes @krkshitij these changes are sufficient but there is one more issue even non interactive element is focusable with customer for that we need to have tab index related changes.

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