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 11 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
11 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
e044cd0
Merge branch 'master' of https://github.com/microsoft/fluentui into A…
v-baambati Jun 24, 2026
7675200
updated as per the review comments
v-baambati Jun 24, 2026
fe568a5
Fixed PR comments
v-baambati Jun 24, 2026
56885b3
Merge branch 'master' of https://github.com/microsoft/fluentui into A…
v-baambati Jun 24, 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
14 changes: 10 additions & 4 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}
Comment thread
v-baambati marked this conversation as resolved.
aria-label={getAriaLabel(pointData, singleSet.xAxisPoint)}
tabIndex={_legendHighlighted(pointData.legend) || _noLegendHighlighted() ? 0 : undefined}
role="img"
role="option"
/>,
);

Expand Down Expand Up @@ -854,7 +854,6 @@ export const GroupedVerticalBarChart: React.FC<GroupedVerticalBarChartProps> = R

const dotId = _getDotId(seriesIdx, pointIdx);
const isLinePointActive = activeLinePoint === point.x || activeLinePoint === dotId;

dotGroup.push(
<circle
key={dotId}
Expand All @@ -871,7 +870,7 @@ export const GroupedVerticalBarChart: React.FC<GroupedVerticalBarChartProps> = R
tabIndex={shouldHighlight ? 0 : undefined}
onFocus={e => _onLineFocus(e, series, seriesIdx, pointIdx)}
onBlur={_onBarLeave}
role="img"
role="option"
aria-label={getAriaLabel(
{
xAxisCalloutData: point.xAxisCalloutData,
Expand All @@ -885,10 +884,17 @@ export const GroupedVerticalBarChart: React.FC<GroupedVerticalBarChartProps> = R
/>,
);
});
const dotGroupAriaLabel = `${series.legend || `Line ${seriesIdx + 1}`}, line with ${
series.data.length
} data points`;

lineBorders.push(<g key={`lineBorderGroup-${seriesIdx}`}>{lineBorderGroup}</g>);
lines.push(<g key={`lineGroup-${seriesIdx}`}>{lineGroup}</g>);
dots.push(<g key={`dotGroup-${seriesIdx}`}>{dotGroup}</g>);
dots.push(
<g role="listbox" key={`dotGroup-${seriesIdx}`} aria-label={dotGroupAriaLabel}>
{dotGroup}
</g>,
);
});

return dots.length > 0 ? (
Expand Down
Loading
Loading