Skip to content

fixed voice controll accessibility issue #36292

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
v-baambati wants to merge 7 commits into
base: master
Choose a base branch
from
Open

fixed voice controll accessibility issue #36292

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
89d68ae
fixed voice controll accessibility issue
v-baambati Jun 9, 2026
ca2086c
updated aria label
v-baambati Jun 10, 2026
06ed7bd
Merge branch 'master' of https://github.com/microsoft/fluentui into A…
v-baambati Jun 10, 2026
239c7c1
added change file
v-baambati Jun 10, 2026
3c6207d
fixed duplicate aria label value
v-baambati Jun 10, 2026
d3771a7
updated aria-label value as per the review comments
v-baambati Jun 17, 2026
0210c7b
Merge branch 'master' of https://github.com/microsoft/fluentui into A…
v-baambati Jun 17, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions change/@fluentui-react-charts-35c73142-960e-4539-8688-379264b9cc34.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "patch",
"comment": "Accessibility bug fixes",
"packageName": "@fluentui/react-charts",
"email": "132879294+v-baambati@users.noreply.github.com",
"dependentChangeType": "patch"
}
22 changes: 11 additions & 11 deletions ...ct-charts/library/src/components/GroupedVerticalBarChart/GroupedVerticalBarChart.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -399,7 +399,7 @@ describe('Grouped vertical bar chart - Subcomponent bar', () => {
{ data: chartPoints, barWidth: 'auto', maxBarWidth: 50 },
container => {
// Assert
const bars = container.querySelectorAll('rect[role="img"]');
const bars = container.querySelectorAll('rect[role="option"]');
expect(bars).toHaveLength(6);
expect(bars[0].getAttribute('width')).toEqual('50');
expect(bars[1].getAttribute('width')).toEqual('50');
Expand All @@ -414,7 +414,7 @@ describe('Grouped vertical bar chart - Subcomponent bar', () => {
container => {
// colors mentioned in the data points itself
// Assert
const bars = container.querySelectorAll('rect[role="img"]');
const bars = container.querySelectorAll('rect[role="option"]');
expect(bars[0].getAttribute('fill')).toEqual('#00bcf2');
expect(bars[1].getAttribute('fill')).toEqual('#0078d4');
expect(bars[2].getAttribute('fill')).toEqual('#00bcf2');
Expand All @@ -440,7 +440,7 @@ describe('Grouped vertical bar chart - Subcomponent bar', () => {
{ data: accessibilityDataPoints },
container => {
// Assert
const bars = container.querySelectorAll('rect[role="img"]');
const bars = container.querySelectorAll('rect[role="option"]');
expect(bars[0]).toHaveAttribute(
'aria-label',
'Group series 1 of 4, Bar series 1 of 2 x-Axis 2020/04/30 MetaData1 33%',
Expand Down Expand Up @@ -473,7 +473,7 @@ describe('Grouped vertical bar chart - Subcomponent Legends', () => {
//const legends = getByClass(container, /legend-/i);
const legends = screen.getAllByText((content, element) => element!.tagName.toLowerCase() === 'button');
fireEvent.mouseOver(legends[0]);
const bars = container.querySelectorAll('rect[role="img"]');
const bars = container.querySelectorAll('rect[role="option"]');
// Assert
expect(bars[0]).toHaveAttribute('opacity', '');
expect(bars[1]).toHaveAttribute('opacity', '0.1');
Expand All @@ -491,7 +491,7 @@ describe('Grouped vertical bar chart - Subcomponent Legends', () => {
container => {
const legends = screen.getAllByText((content, element) => element!.tagName.toLowerCase() === 'button');
fireEvent.mouseOver(legends[0]);
const bars = container.querySelectorAll('rect[role="img"]');
const bars = container.querySelectorAll('rect[role="option"]');
// Assert
expect(bars[0]).toHaveAttribute('opacity', '');
expect(bars[1]).toHaveAttribute('opacity', '0.1');
Expand All @@ -500,7 +500,7 @@ describe('Grouped vertical bar chart - Subcomponent Legends', () => {
expect(bars[4]).toHaveAttribute('opacity', '');
expect(bars[5]).toHaveAttribute('opacity', '0.1');
fireEvent.mouseOver(legends[1]);
const updatedBars = container.querySelectorAll('rect[role="img"]');
const updatedBars = container.querySelectorAll('rect[role="option"]');
// Assert
expect(updatedBars[0]).toHaveAttribute('opacity', '0.1');
expect(updatedBars[1]).toHaveAttribute('opacity', '');
Expand All @@ -521,7 +521,7 @@ describe('Grouped vertical bar chart - Subcomponent Legends', () => {
const legendsAfterClickEvent = screen.getAllByText(
(content, element) => element!.tagName.toLowerCase() === 'button',
);
const bars = container.querySelectorAll('rect[role="img"]');
const bars = container.querySelectorAll('rect[role="option"]');
// Assert
expect(legendsAfterClickEvent[0]).toHaveAttribute('aria-selected', 'true');
expect(legendsAfterClickEvent[1]).toHaveAttribute('aria-selected', 'false');
Expand All @@ -545,7 +545,7 @@ describe('Grouped vertical bar chart - Subcomponent Legends', () => {
const legendsAfterClickEvent = screen.getAllByText(
(content, element) => element!.tagName.toLowerCase() === 'button',
);
const bars = container.querySelectorAll('rect[role="img"]');
const bars = container.querySelectorAll('rect[role="option"]');
// Assert
expect(legendsAfterClickEvent[0]).toHaveAttribute('aria-selected', 'false');
expect(legendsAfterClickEvent[1]).toHaveAttribute('aria-selected', 'false');
Expand Down Expand Up @@ -576,7 +576,7 @@ describe('Grouped vertical bar chart - Subcomponent Legends', () => {
expect(firstLegend).toHaveAttribute('aria-selected', 'true');
expect(secondLegend).toHaveAttribute('aria-selected', 'true');

const bars = container.querySelectorAll('rect[role="img"]');
const bars = container.querySelectorAll('rect[role="option"]');
expect(bars[0]).toHaveAttribute('opacity', '0.1');
expect(bars[1]).toHaveAttribute('opacity', '');
expect(bars[2]).toHaveAttribute('opacity', '');
Expand Down Expand Up @@ -729,7 +729,7 @@ describe('GroupedVerticalBarChart - mouse events', () => {

it('Should render callout correctly on mouseover', async () => {
const { container } = render(<GroupedVerticalBarChart data={chartPoints} calloutProps={{}} />);
const bars = container.querySelectorAll('rect[role="img"]');
const bars = container.querySelectorAll('rect[role="option"]');
fireEvent.mouseOver(bars[0]);
// Wait for any async updates (if needed)
act(() => {
Expand All @@ -740,7 +740,7 @@ describe('GroupedVerticalBarChart - mouse events', () => {

it('Should render callout correctly on mousemove', () => {
const { container } = render(<GroupedVerticalBarChart data={chartPoints} />);
const bars = container.querySelectorAll('rect[role="img"]');
const bars = container.querySelectorAll('rect[role="option"]');
fireEvent.mouseMove(bars[2]);
const html1 = container.innerHTML;
fireEvent.mouseMove(bars[3]);
Expand Down
10 changes: 8 additions & 2 deletions ...s/react-charts/library/src/components/GroupedVerticalBarChart/GroupedVerticalBarChart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -594,7 +594,7 @@ export const GroupedVerticalBarChart: React.FC<GroupedVerticalBarChartProps> = R
onClick={pointData.onClick}

@github-actions github-actions Bot Jun 9, 2026 •
edited
Loading

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/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.

aria-label={getAriaLabel(pointData, singleSet.xAxisPoint)}
tabIndex={_legendHighlighted(pointData.legend) || _noLegendHighlighted() ? 0 : undefined}
role="img"
role="option"
/>,
);

Expand Down Expand Up @@ -636,8 +636,14 @@ export const GroupedVerticalBarChart: React.FC<GroupedVerticalBarChartProps> = R
}
}
});
const legendNames = presentLegends.join(', ');
const categoryGroupAriaLabel = `${singleSet.xAxisPoint}, category ${singleSet.indexNum + 1} of ${
_datasetForBars.length
}, with bar series: ${legendNames}.`;
return (
<g
role="listbox"
aria-label={categoryGroupAriaLabel}
key={singleSet.indexNum}
transform={`translate(${xScale0(singleSet.xAxisPoint) + (xScale0.bandwidth() - effectiveGroupWidth) / 2}, 0)`}
>
Expand Down Expand Up @@ -871,7 +877,7 @@ export const GroupedVerticalBarChart: React.FC<GroupedVerticalBarChartProps> = R
tabIndex={shouldHighlight ? 0 : undefined}
onFocus={e => _onLineFocus(e, series, seriesIdx, pointIdx)}
onBlur={_onBarLeave}
role="img"
role="listbox"
aria-label={getAriaLabel(
{
xAxisCalloutData: point.xAxisCalloutData,
Expand Down
Loading
Loading