Skip to content

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

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 8 commits into
base: master
Choose a base branch
from
Open

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
374a473
Updated bar role from image to button based on the props to fix voice…
v-baambati May 5, 2026
e9e7c8f
Added change file
v-baambati May 5, 2026
b94c045
Updated bar role from image to button based on the props to fix voice…
v-baambati May 6, 2026
9639b2e
Updated bar role from image to button based on the props to fix voice…
v-baambati May 6, 2026
64d2e56
Merge branch 'master' of https://github.com/microsoft/fluentui into M…
v-baambati May 6, 2026
453a8c2
Updated snashots
v-baambati May 6, 2026
d757798
Updated snashots
v-baambati May 6, 2026
3d21570
Updated failed test cases
v-baambati May 6, 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-50b75273-008f-4416-bf72-db392da9bdc5.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 fix",
"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="button"]');
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="button"]');
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="button"]');
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="button"]');
// 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="button"]');
// 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="button"]');
// 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="button"]');
// 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="button"]');
// 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="button"]');
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="button"]');
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="button"]');
fireEvent.mouseMove(bars[2]);
const html1 = container.innerHTML;
fireEvent.mouseMove(bars[3]);
Expand Down
4 changes: 2 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}
aria-label={getAriaLabel(pointData, singleSet.xAxisPoint)}
tabIndex={_legendHighlighted(pointData.legend) || _noLegendHighlighted() ? 0 : undefined}
role="img"
role="button"
/>,
);

Expand Down Expand Up @@ -871,7 +871,7 @@ export const GroupedVerticalBarChart: React.FC<GroupedVerticalBarChartProps> = R
tabIndex={shouldHighlight ? 0 : undefined}
onFocus={e => _onLineFocus(e, series, seriesIdx, pointIdx)}
onBlur={_onBarLeave}
role="img"
role="button"
aria-label={getAriaLabel(
{
xAxisCalloutData: point.xAxisCalloutData,
Expand Down
Loading
Loading