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 9 commits into
microsoft: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 9 commits into
microsoft: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
753.304 kB
220.052 kB
753.619 kB
220.136 kB
315 B
84 B
react-charts
GroupedVerticalBarChart
393.525 kB
122.894 kB
393.531 kB
122.897 kB
6 B
3 B
react-charts
HorizontalBarChart
292.691 kB
89.04 kB
292.787 kB
89.06 kB
96 B
20 B
react-charts
VerticalBarChart
430.006 kB
127.714 kB
430.147 kB
127.733 kB
141 B
19 B
react-charts
VerticalStackedBarChart
399.53 kB
124.283 kB
399.692 kB
124.316 kB
162 B
33 B
Unchanged fixtures
Package & Exports Size (minified/GZIP)
react-charts
AreaChart
402.548 kB
125.863 kB
react-charts
DonutChart
312.961 kB
96.495 kB
react-charts
FunnelChart
304.508 kB
93.326 kB
react-charts
GanttChart
385.649 kB
120.152 kB
react-charts
GaugeChart
312.394 kB
95.948 kB
react-charts
HeatMapChart
387.728 kB
121.263 kB
react-charts
HorizontalBarChartWithAxis
63 B
83 B
react-charts
Legends
232.228 kB
69.849 kB
react-charts
LineChart
413.882 kB
128.765 kB
react-charts
PolarChart
341.357 kB
106.417 kB
react-charts
SankeyChart
209.97 kB
67.042 kB
react-charts
ScatterChart
393.264 kB
122.86 kB
react-charts
Sparkline
80.503 kB
26.644 kB
🤖 This report was generated against b9cadd1e3d398a6d90e76017999a44fc8bc3e4ce

@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/CalendarCompat 4 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/CalendarCompat.multiDayView.default.chromium.png 496 Changed
vr-tests-react-components/CalendarCompat.multiDayView - High Contrast.default.chromium.png 1230 Changed
vr-tests-react-components/CalendarCompat.multiDayView - Dark Mode.default.chromium.png 1109 Changed
vr-tests-react-components/CalendarCompat.multiDayView.default.chromium_1.png 497 Changed
vr-tests-react-components/Charts-DonutChart 1 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/Charts-DonutChart.Dynamic - RTL.default.chromium.png 5570 Changed
vr-tests-react-components/Positioning 2 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/Positioning.Positioning end.chromium.png 744 Changed
vr-tests-react-components/Positioning.Positioning end.updated 2 times.chromium.png 136 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 33 Changed
vr-tests-react-components/ProgressBar converged.Indeterminate + thickness - High Contrast.default.chromium.png 157 Changed
vr-tests-react-components/ProgressBar converged.Indeterminate + thickness.default.chromium.png 174 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 square - Dark Mode.default.chromium.png 4 Changed

There were 1 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