diff --git a/change/@fluentui-react-charts-50b75273-008f-4416-bf72-db392da9bdc5.json b/change/@fluentui-react-charts-50b75273-008f-4416-bf72-db392da9bdc5.json
new file mode 100644
index 0000000000000..2fc41d4ffead1
--- /dev/null
+++ b/change/@fluentui-react-charts-50b75273-008f-4416-bf72-db392da9bdc5.json
@@ -0,0 +1,7 @@
+{
+ "type": "patch",
+ "comment": "Accessibility bug fix",
+ "packageName": "@fluentui/react-charts",
+ "email": "132879294+v-baambati@users.noreply.github.com",
+ "dependentChangeType": "patch"
+}
diff --git a/packages/charts/react-charts/library/src/components/GroupedVerticalBarChart/GroupedVerticalBarChart.test.tsx b/packages/charts/react-charts/library/src/components/GroupedVerticalBarChart/GroupedVerticalBarChart.test.tsx
index ad4edf6491515..732927dcef60f 100644
--- a/packages/charts/react-charts/library/src/components/GroupedVerticalBarChart/GroupedVerticalBarChart.test.tsx
+++ b/packages/charts/react-charts/library/src/components/GroupedVerticalBarChart/GroupedVerticalBarChart.test.tsx
@@ -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');
@@ -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');
@@ -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%',
@@ -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');
@@ -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');
@@ -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', '');
@@ -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');
@@ -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');
@@ -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', '');
@@ -729,7 +729,7 @@ describe('GroupedVerticalBarChart - mouse events', () => {
it('Should render callout correctly on mouseover', async () => {
const { container } = render();
- 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(() => {
@@ -740,7 +740,7 @@ describe('GroupedVerticalBarChart - mouse events', () => {
it('Should render callout correctly on mousemove', () => {
const { container } = render();
- 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]);
diff --git a/packages/charts/react-charts/library/src/components/GroupedVerticalBarChart/GroupedVerticalBarChart.tsx b/packages/charts/react-charts/library/src/components/GroupedVerticalBarChart/GroupedVerticalBarChart.tsx
index 4a620d58b0665..5455419d78de0 100644
--- a/packages/charts/react-charts/library/src/components/GroupedVerticalBarChart/GroupedVerticalBarChart.tsx
+++ b/packages/charts/react-charts/library/src/components/GroupedVerticalBarChart/GroupedVerticalBarChart.tsx
@@ -594,7 +594,7 @@ export const GroupedVerticalBarChart: React.FC = R
onClick={pointData.onClick}
aria-label={getAriaLabel(pointData, singleSet.xAxisPoint)}
tabIndex={_legendHighlighted(pointData.legend) || _noLegendHighlighted() ? 0 : undefined}
- role="img"
+ role="button"
/>,
);
@@ -871,7 +871,7 @@ export const GroupedVerticalBarChart: React.FC = R
tabIndex={shouldHighlight ? 0 : undefined}
onFocus={e => _onLineFocus(e, series, seriesIdx, pointIdx)}
onBlur={_onBarLeave}
- role="img"
+ role="button"
aria-label={getAriaLabel(
{
xAxisCalloutData: point.xAxisCalloutData,
diff --git a/packages/charts/react-charts/library/src/components/GroupedVerticalBarChart/__snapshots__/GroupedVerticalBarChart.test.tsx.snap b/packages/charts/react-charts/library/src/components/GroupedVerticalBarChart/__snapshots__/GroupedVerticalBarChart.test.tsx.snap
index 21b439b03667c..6489809d32fac 100644
--- a/packages/charts/react-charts/library/src/components/GroupedVerticalBarChart/__snapshots__/GroupedVerticalBarChart.test.tsx.snap
+++ b/packages/charts/react-charts/library/src/components/GroupedVerticalBarChart/__snapshots__/GroupedVerticalBarChart.test.tsx.snap
@@ -217,7 +217,7 @@ exports[`Grouped Vertical bar chart rendering Should render the grouped vertical
fill="#00bcf2"
height="161.7"
opacity=""
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -230,7 +230,7 @@ exports[`Grouped Vertical bar chart rendering Should render the grouped vertical
fill="#0078d4"
height="215.6"
opacity=""
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -267,7 +267,7 @@ exports[`Grouped Vertical bar chart rendering Should render the grouped vertical
fill="#00bcf2"
height="161.7"
opacity=""
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -280,7 +280,7 @@ exports[`Grouped Vertical bar chart rendering Should render the grouped vertical
fill="#0078d4"
height="14.700000000000017"
opacity=""
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -317,7 +317,7 @@ exports[`Grouped Vertical bar chart rendering Should render the grouped vertical
fill="#00bcf2"
height="68.60000000000002"
opacity=""
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -330,7 +330,7 @@ exports[`Grouped Vertical bar chart rendering Should render the grouped vertical
fill="#0078d4"
height="245"
opacity=""
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -637,7 +637,7 @@ exports[`Grouped Vertical bar chart rendering Should render the grouped vertical
fill="#00bcf2"
height="161.7"
opacity=""
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -650,7 +650,7 @@ exports[`Grouped Vertical bar chart rendering Should render the grouped vertical
fill="#0078d4"
height="215.6"
opacity=""
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -687,7 +687,7 @@ exports[`Grouped Vertical bar chart rendering Should render the grouped vertical
fill="#00bcf2"
height="161.7"
opacity=""
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -700,7 +700,7 @@ exports[`Grouped Vertical bar chart rendering Should render the grouped vertical
fill="#0078d4"
height="14.700000000000017"
opacity=""
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -737,7 +737,7 @@ exports[`Grouped Vertical bar chart rendering Should render the grouped vertical
fill="#00bcf2"
height="68.60000000000002"
opacity=""
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -750,7 +750,7 @@ exports[`Grouped Vertical bar chart rendering Should render the grouped vertical
fill="#0078d4"
height="245"
opacity=""
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -1064,7 +1064,7 @@ exports[`GroupedVerticalBarChart - mouse events Should render callout correctly
fill="#00bcf2"
height="161.7"
opacity=""
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -1077,7 +1077,7 @@ exports[`GroupedVerticalBarChart - mouse events Should render callout correctly
fill="#0078d4"
height="215.6"
opacity=""
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -1114,7 +1114,7 @@ exports[`GroupedVerticalBarChart - mouse events Should render callout correctly
fill="#00bcf2"
height="161.7"
opacity=""
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -1127,7 +1127,7 @@ exports[`GroupedVerticalBarChart - mouse events Should render callout correctly
fill="#0078d4"
height="14.700000000000017"
opacity=""
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -1164,7 +1164,7 @@ exports[`GroupedVerticalBarChart - mouse events Should render callout correctly
fill="#00bcf2"
height="68.60000000000002"
opacity=""
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -1177,7 +1177,7 @@ exports[`GroupedVerticalBarChart - mouse events Should render callout correctly
fill="#0078d4"
height="245"
opacity=""
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -1556,7 +1556,7 @@ Object {
fill="#00bcf2"
height="161.7"
opacity=""
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -1569,7 +1569,7 @@ Object {
fill="#0078d4"
height="215.6"
opacity=""
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -1606,7 +1606,7 @@ Object {
fill="#00bcf2"
height="161.7"
opacity=""
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -1619,7 +1619,7 @@ Object {
fill="#0078d4"
height="14.700000000000017"
opacity=""
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -1656,7 +1656,7 @@ Object {
fill="#00bcf2"
height="68.60000000000002"
opacity=""
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -1669,7 +1669,7 @@ Object {
fill="#0078d4"
height="245"
opacity=""
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -1974,7 +1974,7 @@ Object {
fill="#00bcf2"
height="161.7"
opacity=""
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -1987,7 +1987,7 @@ Object {
fill="#0078d4"
height="215.6"
opacity=""
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -2024,7 +2024,7 @@ Object {
fill="#00bcf2"
height="161.7"
opacity=""
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -2037,7 +2037,7 @@ Object {
fill="#0078d4"
height="14.700000000000017"
opacity=""
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -2074,7 +2074,7 @@ Object {
fill="#00bcf2"
height="68.60000000000002"
opacity=""
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -2087,7 +2087,7 @@ Object {
fill="#0078d4"
height="245"
opacity=""
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -2451,7 +2451,7 @@ Object {
fill="#00bcf2"
height="161.7"
opacity=""
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -2464,7 +2464,7 @@ Object {
fill="#0078d4"
height="215.6"
opacity=""
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -2501,7 +2501,7 @@ Object {
fill="#00bcf2"
height="161.7"
opacity=""
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -2514,7 +2514,7 @@ Object {
fill="#0078d4"
height="14.700000000000017"
opacity=""
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -2551,7 +2551,7 @@ Object {
fill="#00bcf2"
height="68.60000000000002"
opacity=""
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -2564,7 +2564,7 @@ Object {
fill="#0078d4"
height="245"
opacity=""
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -2876,7 +2876,7 @@ Object {
fill="#00bcf2"
height="161.7"
opacity=""
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -2889,7 +2889,7 @@ Object {
fill="#0078d4"
height="215.6"
opacity=""
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -2926,7 +2926,7 @@ Object {
fill="#00bcf2"
height="161.7"
opacity=""
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -2939,7 +2939,7 @@ Object {
fill="#0078d4"
height="14.700000000000017"
opacity=""
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -2976,7 +2976,7 @@ Object {
fill="#00bcf2"
height="68.60000000000002"
opacity=""
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -2989,7 +2989,7 @@ Object {
fill="#0078d4"
height="245"
opacity=""
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -3360,7 +3360,7 @@ Object {
fill="#00bcf2"
height="1"
opacity=""
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -3373,7 +3373,7 @@ Object {
fill="#0078d4"
height="1"
opacity=""
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -3410,7 +3410,7 @@ Object {
fill="#00bcf2"
height="1"
opacity=""
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -3423,7 +3423,7 @@ Object {
fill="#0078d4"
height="1"
opacity=""
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -3460,7 +3460,7 @@ Object {
fill="#00bcf2"
height="1"
opacity=""
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -3473,7 +3473,7 @@ Object {
fill="#0078d4"
height="1"
opacity=""
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -3723,7 +3723,7 @@ Object {
fill="#00bcf2"
height="1"
opacity=""
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -3736,7 +3736,7 @@ Object {
fill="#0078d4"
height="1"
opacity=""
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -3773,7 +3773,7 @@ Object {
fill="#00bcf2"
height="1"
opacity=""
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -3786,7 +3786,7 @@ Object {
fill="#0078d4"
height="1"
opacity=""
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -3823,7 +3823,7 @@ Object {
fill="#00bcf2"
height="1"
opacity=""
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -3836,7 +3836,7 @@ Object {
fill="#0078d4"
height="1"
opacity=""
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -4145,7 +4145,7 @@ Object {
fill="#00bcf2"
height="161.7"
opacity=""
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -4158,7 +4158,7 @@ Object {
fill="#0078d4"
height="215.6"
opacity=""
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -4195,7 +4195,7 @@ Object {
fill="#00bcf2"
height="161.7"
opacity=""
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -4208,7 +4208,7 @@ Object {
fill="#0078d4"
height="14.700000000000017"
opacity=""
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -4245,7 +4245,7 @@ Object {
fill="#00bcf2"
height="68.60000000000002"
opacity=""
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -4258,7 +4258,7 @@ Object {
fill="#0078d4"
height="245"
opacity=""
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -4563,7 +4563,7 @@ Object {
fill="#00bcf2"
height="161.7"
opacity=""
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -4576,7 +4576,7 @@ Object {
fill="#0078d4"
height="215.6"
opacity=""
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -4613,7 +4613,7 @@ Object {
fill="#00bcf2"
height="161.7"
opacity=""
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -4626,7 +4626,7 @@ Object {
fill="#0078d4"
height="14.700000000000017"
opacity=""
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -4663,7 +4663,7 @@ Object {
fill="#00bcf2"
height="68.60000000000002"
opacity=""
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -4676,7 +4676,7 @@ Object {
fill="#0078d4"
height="245"
opacity=""
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -5061,7 +5061,7 @@ Object {
fill="#00bcf2"
height="161.7"
opacity=""
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -5074,7 +5074,7 @@ Object {
fill="#0078d4"
height="215.6"
opacity=""
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -5111,7 +5111,7 @@ Object {
fill="#00bcf2"
height="161.7"
opacity=""
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -5124,7 +5124,7 @@ Object {
fill="#0078d4"
height="14.700000000000017"
opacity=""
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -5161,7 +5161,7 @@ Object {
fill="#00bcf2"
height="68.60000000000002"
opacity=""
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -5174,7 +5174,7 @@ Object {
fill="#0078d4"
height="245"
opacity=""
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -5505,7 +5505,7 @@ Object {
fill="#00bcf2"
height="161.7"
opacity=""
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -5518,7 +5518,7 @@ Object {
fill="#0078d4"
height="215.6"
opacity=""
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -5555,7 +5555,7 @@ Object {
fill="#00bcf2"
height="161.7"
opacity=""
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -5568,7 +5568,7 @@ Object {
fill="#0078d4"
height="14.700000000000017"
opacity=""
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -5605,7 +5605,7 @@ Object {
fill="#00bcf2"
height="68.60000000000002"
opacity=""
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -5618,7 +5618,7 @@ Object {
fill="#0078d4"
height="245"
opacity=""
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -6064,7 +6064,7 @@ Object {
fill="#00bcf2"
height="1"
opacity=""
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -6077,7 +6077,7 @@ Object {
fill="#0078d4"
height="1"
opacity=""
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -6114,7 +6114,7 @@ Object {
fill="#00bcf2"
height="1"
opacity=""
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -6127,7 +6127,7 @@ Object {
fill="#0078d4"
height="1"
opacity=""
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -6164,7 +6164,7 @@ Object {
fill="#00bcf2"
height="1"
opacity=""
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -6177,7 +6177,7 @@ Object {
fill="#0078d4"
height="1"
opacity=""
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -6566,7 +6566,7 @@ Object {
fill="#00bcf2"
height="1"
opacity=""
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -6579,7 +6579,7 @@ Object {
fill="#0078d4"
height="1"
opacity=""
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -6616,7 +6616,7 @@ Object {
fill="#00bcf2"
height="1"
opacity=""
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -6629,7 +6629,7 @@ Object {
fill="#0078d4"
height="1"
opacity=""
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -6666,7 +6666,7 @@ Object {
fill="#00bcf2"
height="1"
opacity=""
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -6679,7 +6679,7 @@ Object {
fill="#0078d4"
height="1"
opacity=""
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -7050,7 +7050,7 @@ Object {
fill="#00bcf2"
height="161.7"
opacity=""
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -7063,7 +7063,7 @@ Object {
fill="#0078d4"
height="215.6"
opacity=""
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -7100,7 +7100,7 @@ Object {
fill="#00bcf2"
height="161.7"
opacity=""
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -7113,7 +7113,7 @@ Object {
fill="#0078d4"
height="14.700000000000017"
opacity=""
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -7150,7 +7150,7 @@ Object {
fill="#00bcf2"
height="68.60000000000002"
opacity=""
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -7163,7 +7163,7 @@ Object {
fill="#0078d4"
height="245"
opacity=""
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -7468,7 +7468,7 @@ Object {
fill="#00bcf2"
height="161.7"
opacity=""
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -7481,7 +7481,7 @@ Object {
fill="#0078d4"
height="215.6"
opacity=""
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -7518,7 +7518,7 @@ Object {
fill="#00bcf2"
height="161.7"
opacity=""
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -7531,7 +7531,7 @@ Object {
fill="#0078d4"
height="14.700000000000017"
opacity=""
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -7568,7 +7568,7 @@ Object {
fill="#00bcf2"
height="68.60000000000002"
opacity=""
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -7581,7 +7581,7 @@ Object {
fill="#0078d4"
height="245"
opacity=""
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
diff --git a/packages/charts/react-charts/library/src/components/HorizontalBarChart/HorizontalBarChart.tsx b/packages/charts/react-charts/library/src/components/HorizontalBarChart/HorizontalBarChart.tsx
index 8eff11e39d133..e1b7aa62d3cd6 100644
--- a/packages/charts/react-charts/library/src/components/HorizontalBarChart/HorizontalBarChart.tsx
+++ b/packages/charts/react-charts/library/src/components/HorizontalBarChart/HorizontalBarChart.tsx
@@ -320,13 +320,18 @@ export const HorizontalBarChart: React.FunctionComponent _hoverOn(event, xValue, point) : undefined
}
onFocus={_showToolTipOnSegment && point.legend !== '' ? event => _hoverOn(event, xValue, point) : undefined}
- role="img"
+ role={point.onClick || (!props.hideTooltip && point.legend !== '') ? 'button' : 'img'}
aria-label={_getAriaLabel(point)}
onBlur={_hoverOff}
onMouseLeave={_hoverOff}
className={classes.barWrapper}
opacity={isLegendSelected ? 1 : 0.1}
- tabIndex={_legendHighlighted(point.legend!) || _noLegendHighlighted() ? 0 : undefined}
+ tabIndex={
+ (_legendHighlighted(point.legend!) || _noLegendHighlighted()) &&
+ (point.onClick || (!props.hideTooltip && point.legend !== ''))
+ ? 0
+ : undefined
+ }
/>
);
});
diff --git a/packages/charts/react-charts/library/src/components/HorizontalBarChart/__snapshots__/HorizontalBarChart.test.tsx.snap b/packages/charts/react-charts/library/src/components/HorizontalBarChart/__snapshots__/HorizontalBarChart.test.tsx.snap
index b8ed93962b5c3..a81e4f8e4722f 100644
--- a/packages/charts/react-charts/library/src/components/HorizontalBarChart/__snapshots__/HorizontalBarChart.test.tsx.snap
+++ b/packages/charts/react-charts/library/src/components/HorizontalBarChart/__snapshots__/HorizontalBarChart.test.tsx.snap
@@ -47,7 +47,7 @@ exports[`Horizontal bar chart - Screen resolution Should remain unchanged on zoo
fill="#004b50"
height="12"
opacity="1"
- role="img"
+ role="button"
tabindex="0"
width="10.286666666666665%"
x="0%"
@@ -60,7 +60,6 @@ exports[`Horizontal bar chart - Screen resolution Should remain unchanged on zoo
height="12"
opacity="1"
role="img"
- tabindex="0"
width="89.71333333333334%"
x="10.286666666666665%"
y="0"
@@ -111,7 +110,7 @@ exports[`Horizontal bar chart - Screen resolution Should remain unchanged on zoo
fill="#5c2d91"
height="12"
opacity="1"
- role="img"
+ role="button"
tabindex="0"
width="5.333333333333334%"
x="0%"
@@ -124,7 +123,6 @@ exports[`Horizontal bar chart - Screen resolution Should remain unchanged on zoo
height="12"
opacity="1"
role="img"
- tabindex="0"
width="94.66666666666667%"
x="5.333333333333334%"
y="0"
@@ -175,7 +173,7 @@ exports[`Horizontal bar chart - Screen resolution Should remain unchanged on zoo
fill="#a4262c"
height="12"
opacity="1"
- role="img"
+ role="button"
tabindex="0"
width="59.25333333333334%"
x="0%"
@@ -188,7 +186,6 @@ exports[`Horizontal bar chart - Screen resolution Should remain unchanged on zoo
height="12"
opacity="1"
role="img"
- tabindex="0"
width="40.74666666666666%"
x="59.25333333333334%"
y="0"
@@ -252,7 +249,7 @@ exports[`Horizontal bar chart - Screen resolution Should remain unchanged on zoo
fill="#004b50"
height="12"
opacity="1"
- role="img"
+ role="button"
tabindex="0"
width="10.286666666666665%"
x="0%"
@@ -265,7 +262,6 @@ exports[`Horizontal bar chart - Screen resolution Should remain unchanged on zoo
height="12"
opacity="1"
role="img"
- tabindex="0"
width="89.71333333333334%"
x="10.286666666666665%"
y="0"
@@ -316,7 +312,7 @@ exports[`Horizontal bar chart - Screen resolution Should remain unchanged on zoo
fill="#5c2d91"
height="12"
opacity="1"
- role="img"
+ role="button"
tabindex="0"
width="5.333333333333334%"
x="0%"
@@ -329,7 +325,6 @@ exports[`Horizontal bar chart - Screen resolution Should remain unchanged on zoo
height="12"
opacity="1"
role="img"
- tabindex="0"
width="94.66666666666667%"
x="5.333333333333334%"
y="0"
@@ -380,7 +375,7 @@ exports[`Horizontal bar chart - Screen resolution Should remain unchanged on zoo
fill="#a4262c"
height="12"
opacity="1"
- role="img"
+ role="button"
tabindex="0"
width="59.25333333333334%"
x="0%"
@@ -393,7 +388,6 @@ exports[`Horizontal bar chart - Screen resolution Should remain unchanged on zoo
height="12"
opacity="1"
role="img"
- tabindex="0"
width="40.74666666666666%"
x="59.25333333333334%"
y="0"
@@ -461,7 +455,7 @@ exports[`Horizontal bar chart - Theme Should reflect theme change 1`] = `
fill="#004b50"
height="12"
opacity="1"
- role="img"
+ role="button"
tabindex="0"
width="10.286666666666665%"
x="0%"
@@ -474,7 +468,6 @@ exports[`Horizontal bar chart - Theme Should reflect theme change 1`] = `
height="12"
opacity="1"
role="img"
- tabindex="0"
width="89.71333333333334%"
x="10.286666666666665%"
y="0"
@@ -525,7 +518,7 @@ exports[`Horizontal bar chart - Theme Should reflect theme change 1`] = `
fill="#5c2d91"
height="12"
opacity="1"
- role="img"
+ role="button"
tabindex="0"
width="5.333333333333334%"
x="0%"
@@ -538,7 +531,6 @@ exports[`Horizontal bar chart - Theme Should reflect theme change 1`] = `
height="12"
opacity="1"
role="img"
- tabindex="0"
width="94.66666666666667%"
x="5.333333333333334%"
y="0"
@@ -589,7 +581,7 @@ exports[`Horizontal bar chart - Theme Should reflect theme change 1`] = `
fill="#a4262c"
height="12"
opacity="1"
- role="img"
+ role="button"
tabindex="0"
width="59.25333333333334%"
x="0%"
@@ -602,7 +594,6 @@ exports[`Horizontal bar chart - Theme Should reflect theme change 1`] = `
height="12"
opacity="1"
role="img"
- tabindex="0"
width="40.74666666666666%"
x="59.25333333333334%"
y="0"
@@ -679,7 +670,7 @@ exports[`Horizontal bar chart re-rendering Should re-render the Horizontal bar c
fill="#004b50"
height="12"
opacity="1"
- role="img"
+ role="button"
tabindex="0"
width="10.286666666666665%"
x="0%"
@@ -692,7 +683,6 @@ exports[`Horizontal bar chart re-rendering Should re-render the Horizontal bar c
height="12"
opacity="1"
role="img"
- tabindex="0"
width="89.71333333333334%"
x="10.286666666666665%"
y="0"
@@ -743,7 +733,7 @@ exports[`Horizontal bar chart re-rendering Should re-render the Horizontal bar c
fill="#5c2d91"
height="12"
opacity="1"
- role="img"
+ role="button"
tabindex="0"
width="5.333333333333334%"
x="0%"
@@ -756,7 +746,6 @@ exports[`Horizontal bar chart re-rendering Should re-render the Horizontal bar c
height="12"
opacity="1"
role="img"
- tabindex="0"
width="94.66666666666667%"
x="5.333333333333334%"
y="0"
@@ -807,7 +796,7 @@ exports[`Horizontal bar chart re-rendering Should re-render the Horizontal bar c
fill="#a4262c"
height="12"
opacity="1"
- role="img"
+ role="button"
tabindex="0"
width="59.25333333333334%"
x="0%"
@@ -820,7 +809,6 @@ exports[`Horizontal bar chart re-rendering Should re-render the Horizontal bar c
height="12"
opacity="1"
role="img"
- tabindex="0"
width="40.74666666666666%"
x="59.25333333333334%"
y="0"
@@ -877,7 +865,7 @@ exports[`Horizontal bar chart rendering Should render HorizontalBarChart for row
fill="#004b50"
height="12"
opacity="1"
- role="img"
+ role="button"
tabindex="0"
width="10%"
x="0%"
@@ -889,7 +877,7 @@ exports[`Horizontal bar chart rendering Should render HorizontalBarChart for row
fill="#a4262c"
height="12"
opacity="1"
- role="img"
+ role="button"
tabindex="0"
width="90%"
x="10%"
@@ -1023,7 +1011,7 @@ exports[`Horizontal bar chart rendering Should render HorizontalBarChart for row
fill="#5c2d91"
height="12"
opacity="1"
- role="img"
+ role="button"
tabindex="0"
width="15%"
x="0%"
@@ -1035,7 +1023,7 @@ exports[`Horizontal bar chart rendering Should render HorizontalBarChart for row
fill="#a4262c"
height="12"
opacity="1"
- role="img"
+ role="button"
tabindex="0"
width="85%"
x="15%"
@@ -1176,7 +1164,7 @@ exports[`Horizontal bar chart rendering Should render the Horizontal bar chart l
fill="#004b50"
height="12"
opacity="1"
- role="img"
+ role="button"
tabindex="0"
width="10.286666666666665%"
x="0%"
@@ -1189,7 +1177,6 @@ exports[`Horizontal bar chart rendering Should render the Horizontal bar chart l
height="12"
opacity="1"
role="img"
- tabindex="0"
width="89.71333333333334%"
x="10.286666666666665%"
y="0"
@@ -1240,7 +1227,7 @@ exports[`Horizontal bar chart rendering Should render the Horizontal bar chart l
fill="#5c2d91"
height="12"
opacity="1"
- role="img"
+ role="button"
tabindex="0"
width="5.333333333333334%"
x="0%"
@@ -1253,7 +1240,6 @@ exports[`Horizontal bar chart rendering Should render the Horizontal bar chart l
height="12"
opacity="1"
role="img"
- tabindex="0"
width="94.66666666666667%"
x="5.333333333333334%"
y="0"
@@ -1304,7 +1290,7 @@ exports[`Horizontal bar chart rendering Should render the Horizontal bar chart l
fill="#a4262c"
height="12"
opacity="1"
- role="img"
+ role="button"
tabindex="0"
width="59.25333333333334%"
x="0%"
@@ -1317,7 +1303,6 @@ exports[`Horizontal bar chart rendering Should render the Horizontal bar chart l
height="12"
opacity="1"
role="img"
- tabindex="0"
width="40.74666666666666%"
x="59.25333333333334%"
y="0"
@@ -1379,7 +1364,7 @@ Object {
fill="#004b50"
height="12"
opacity="1"
- role="img"
+ role="button"
tabindex="0"
width="10.286666666666665%"
x="0%"
@@ -1425,7 +1410,7 @@ Object {
fill="#5c2d91"
height="12"
opacity="1"
- role="img"
+ role="button"
tabindex="0"
width="5.333333333333334%"
x="0%"
@@ -1471,7 +1456,7 @@ Object {
fill="#a4262c"
height="12"
opacity="1"
- role="img"
+ role="button"
tabindex="0"
width="59.25333333333334%"
x="0%"
@@ -1576,7 +1561,7 @@ Object {
fill="#004b50"
height="12"
opacity="1"
- role="img"
+ role="button"
tabindex="0"
width="10.286666666666665%"
x="0%"
@@ -1622,7 +1607,7 @@ Object {
fill="#5c2d91"
height="12"
opacity="1"
- role="img"
+ role="button"
tabindex="0"
width="5.333333333333334%"
x="0%"
@@ -1668,7 +1653,7 @@ Object {
fill="#a4262c"
height="12"
opacity="1"
- role="img"
+ role="button"
tabindex="0"
width="59.25333333333334%"
x="0%"
@@ -1784,7 +1769,7 @@ Object {
fill="#004b50"
height="12"
opacity="1"
- role="img"
+ role="button"
tabindex="0"
width="10.286666666666665%"
x="0%"
@@ -1839,7 +1824,7 @@ Object {
fill="#5c2d91"
height="12"
opacity="1"
- role="img"
+ role="button"
tabindex="0"
width="5.333333333333334%"
x="0%"
@@ -1894,7 +1879,7 @@ Object {
fill="#a4262c"
height="12"
opacity="1"
- role="img"
+ role="button"
tabindex="0"
width="59.25333333333334%"
x="0%"
@@ -2008,7 +1993,7 @@ Object {
fill="#004b50"
height="12"
opacity="1"
- role="img"
+ role="button"
tabindex="0"
width="10.286666666666665%"
x="0%"
@@ -2063,7 +2048,7 @@ Object {
fill="#5c2d91"
height="12"
opacity="1"
- role="img"
+ role="button"
tabindex="0"
width="5.333333333333334%"
x="0%"
@@ -2118,7 +2103,7 @@ Object {
fill="#a4262c"
height="12"
opacity="1"
- role="img"
+ role="button"
tabindex="0"
width="59.25333333333334%"
x="0%"
diff --git a/packages/charts/react-charts/library/src/components/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.tsx b/packages/charts/react-charts/library/src/components/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.tsx
index 9d1526073fc9c..939169afe822e 100644
--- a/packages/charts/react-charts/library/src/components/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.tsx
+++ b/packages/charts/react-charts/library/src/components/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.tsx
@@ -471,7 +471,7 @@ export const HorizontalBarChartWithAxis: React.FunctionComponent) => _onBarHover(point, startColor, event)}
aria-label={_getAriaLabel(point)}
- role="img"
+ role="button"
aria-labelledby={`toolTip${_calloutId}`}
onMouseLeave={_onBarLeave}
onFocus={event => _onBarFocus(event, point, index, startColor)}
@@ -646,7 +646,7 @@ export const HorizontalBarChartWithAxis: React.FunctionComponent {
_refCallback(e, point.legend!);
}}
diff --git a/packages/charts/react-charts/library/src/components/HorizontalBarChartWithAxis/__snapshots__/HorizontalBarChartWithAxis.test.tsx.snap b/packages/charts/react-charts/library/src/components/HorizontalBarChartWithAxis/__snapshots__/HorizontalBarChartWithAxis.test.tsx.snap
index bfa3a8bc4fdb3..67f9706f2dce8 100644
--- a/packages/charts/react-charts/library/src/components/HorizontalBarChartWithAxis/__snapshots__/HorizontalBarChartWithAxis.test.tsx.snap
+++ b/packages/charts/react-charts/library/src/components/HorizontalBarChartWithAxis/__snapshots__/HorizontalBarChartWithAxis.test.tsx.snap
@@ -335,7 +335,7 @@ exports[`Horizontal bar chart with axis rendering Should render the Horizontal b
fill="#0078d4"
height="16"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="147.5"
@@ -360,7 +360,7 @@ exports[`Horizontal bar chart with axis rendering Should render the Horizontal b
fill="#002050"
height="16"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="590"
@@ -385,7 +385,7 @@ exports[`Horizontal bar chart with axis rendering Should render the Horizontal b
fill="#00188f"
height="16"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="368.75"
@@ -410,7 +410,7 @@ exports[`Horizontal bar chart with axis rendering Should render the Horizontal b
fill="#00bcf2"
height="16"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="295"
@@ -862,7 +862,7 @@ exports[`Horizontal bar chart with axis rendering Should render the Horizontal b
fill="#0078d4"
height="32.714285714285715"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
transform="translate(0,-3.634920634920636)"
@@ -888,7 +888,7 @@ exports[`Horizontal bar chart with axis rendering Should render the Horizontal b
fill="#00bcf2"
height="32.714285714285715"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
transform="translate(0,-3.634920634920636)"
@@ -914,7 +914,7 @@ exports[`Horizontal bar chart with axis rendering Should render the Horizontal b
fill="#00188f"
height="32.714285714285715"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
transform="translate(0,-3.634920634920636)"
@@ -940,7 +940,7 @@ exports[`Horizontal bar chart with axis rendering Should render the Horizontal b
fill="#002050"
height="32.714285714285715"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
transform="translate(0,-3.634920634920636)"
@@ -1343,7 +1343,7 @@ Object {
fill="#0078d4"
height="16"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="147.5"
@@ -1368,7 +1368,7 @@ Object {
fill="#002050"
height="16"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="590"
@@ -1393,7 +1393,7 @@ Object {
fill="#00188f"
height="16"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="368.75"
@@ -1418,7 +1418,7 @@ Object {
fill="#00bcf2"
height="16"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="295"
@@ -1870,7 +1870,7 @@ Object {
fill="#0078d4"
height="16"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="147.5"
@@ -1895,7 +1895,7 @@ Object {
fill="#002050"
height="16"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="590"
@@ -1920,7 +1920,7 @@ Object {
fill="#00188f"
height="16"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="368.75"
@@ -1945,7 +1945,7 @@ Object {
fill="#00bcf2"
height="16"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="295"
@@ -2456,7 +2456,7 @@ Object {
fill="#0078d4"
height="16"
opacity="1"
- role="img"
+ role="button"
rx="3"
tabindex="0"
width="147.5"
@@ -2481,7 +2481,7 @@ Object {
fill="#002050"
height="16"
opacity="1"
- role="img"
+ role="button"
rx="3"
tabindex="0"
width="590"
@@ -2506,7 +2506,7 @@ Object {
fill="#00188f"
height="16"
opacity="1"
- role="img"
+ role="button"
rx="3"
tabindex="0"
width="368.75"
@@ -2531,7 +2531,7 @@ Object {
fill="#00bcf2"
height="16"
opacity="1"
- role="img"
+ role="button"
rx="3"
tabindex="0"
width="295"
@@ -2983,7 +2983,7 @@ Object {
fill="#0078d4"
height="16"
opacity="1"
- role="img"
+ role="button"
rx="3"
tabindex="0"
width="147.5"
@@ -3008,7 +3008,7 @@ Object {
fill="#002050"
height="16"
opacity="1"
- role="img"
+ role="button"
rx="3"
tabindex="0"
width="590"
@@ -3033,7 +3033,7 @@ Object {
fill="#00188f"
height="16"
opacity="1"
- role="img"
+ role="button"
rx="3"
tabindex="0"
width="368.75"
@@ -3058,7 +3058,7 @@ Object {
fill="#00bcf2"
height="16"
opacity="1"
- role="img"
+ role="button"
rx="3"
tabindex="0"
width="295"
@@ -3569,7 +3569,7 @@ Object {
fill="#0078d4"
height="16"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="147.5"
@@ -3594,7 +3594,7 @@ Object {
fill="#002050"
height="16"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="590"
@@ -3619,7 +3619,7 @@ Object {
fill="#00188f"
height="16"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="368.75"
@@ -3644,7 +3644,7 @@ Object {
fill="#00bcf2"
height="16"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="295"
@@ -4096,7 +4096,7 @@ Object {
fill="#0078d4"
height="16"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="147.5"
@@ -4121,7 +4121,7 @@ Object {
fill="#002050"
height="16"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="590"
@@ -4146,7 +4146,7 @@ Object {
fill="#00188f"
height="16"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="368.75"
@@ -4171,7 +4171,7 @@ Object {
fill="#00bcf2"
height="16"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="295"
@@ -4739,7 +4739,7 @@ Object {
fill="#0078d4"
height="45.8"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
transform="translate(0,-6.542857142857141)"
@@ -4753,7 +4753,7 @@ Object {
fill="#ff8c00"
height="45.8"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
transform="translate(0,-6.542857142857141)"
@@ -4767,7 +4767,7 @@ Object {
fill="#107c10"
height="45.8"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
transform="translate(0,-6.542857142857141)"
@@ -4793,7 +4793,7 @@ Object {
fill="#0078d4"
height="45.8"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
transform="translate(0,-6.542857142857141)"
@@ -4807,7 +4807,7 @@ Object {
fill="#ff8c00"
height="45.8"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
transform="translate(0,-6.542857142857141)"
@@ -4821,7 +4821,7 @@ Object {
fill="#107c10"
height="45.8"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
transform="translate(0,-6.542857142857141)"
@@ -4847,7 +4847,7 @@ Object {
fill="#0078d4"
height="45.8"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
transform="translate(0,-6.542857142857141)"
@@ -4861,7 +4861,7 @@ Object {
fill="#ff8c00"
height="45.8"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
transform="translate(0,-6.542857142857141)"
@@ -4875,7 +4875,7 @@ Object {
fill="#107c10"
height="45.8"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
transform="translate(0,-6.542857142857141)"
@@ -5366,7 +5366,7 @@ Object {
fill="#0078d4"
height="45.8"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
transform="translate(0,-6.542857142857141)"
@@ -5380,7 +5380,7 @@ Object {
fill="#ff8c00"
height="45.8"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
transform="translate(0,-6.542857142857141)"
@@ -5394,7 +5394,7 @@ Object {
fill="#107c10"
height="45.8"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
transform="translate(0,-6.542857142857141)"
@@ -5420,7 +5420,7 @@ Object {
fill="#0078d4"
height="45.8"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
transform="translate(0,-6.542857142857141)"
@@ -5434,7 +5434,7 @@ Object {
fill="#ff8c00"
height="45.8"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
transform="translate(0,-6.542857142857141)"
@@ -5448,7 +5448,7 @@ Object {
fill="#107c10"
height="45.8"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
transform="translate(0,-6.542857142857141)"
@@ -5474,7 +5474,7 @@ Object {
fill="#0078d4"
height="45.8"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
transform="translate(0,-6.542857142857141)"
@@ -5488,7 +5488,7 @@ Object {
fill="#ff8c00"
height="45.8"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
transform="translate(0,-6.542857142857141)"
@@ -5502,7 +5502,7 @@ Object {
fill="#107c10"
height="45.8"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
transform="translate(0,-6.542857142857141)"
@@ -5995,7 +5995,7 @@ Object {
fill="#0078d4"
height="1"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="147.5"
@@ -6008,7 +6008,7 @@ Object {
fill="#002050"
height="1"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="590"
@@ -6021,7 +6021,7 @@ Object {
fill="#00188f"
height="1"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="368.75"
@@ -6034,7 +6034,7 @@ Object {
fill="#00bcf2"
height="1"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="295"
@@ -6381,7 +6381,7 @@ Object {
fill="#0078d4"
height="1"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="147.5"
@@ -6394,7 +6394,7 @@ Object {
fill="#002050"
height="1"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="590"
@@ -6407,7 +6407,7 @@ Object {
fill="#00188f"
height="1"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="368.75"
@@ -6420,7 +6420,7 @@ Object {
fill="#00bcf2"
height="1"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="295"
@@ -6848,7 +6848,7 @@ Object {
fill="#0078d4"
height="32.714285714285715"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
transform="translate(0,-3.634920634920636)"
@@ -6874,7 +6874,7 @@ Object {
fill="#00bcf2"
height="32.714285714285715"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
transform="translate(0,-3.634920634920636)"
@@ -6900,7 +6900,7 @@ Object {
fill="#00188f"
height="32.714285714285715"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
transform="translate(0,-3.634920634920636)"
@@ -6926,7 +6926,7 @@ Object {
fill="#002050"
height="32.714285714285715"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
transform="translate(0,-3.634920634920636)"
@@ -7349,7 +7349,7 @@ Object {
fill="#0078d4"
height="32.714285714285715"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
transform="translate(0,-3.634920634920636)"
@@ -7375,7 +7375,7 @@ Object {
fill="#00bcf2"
height="32.714285714285715"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
transform="translate(0,-3.634920634920636)"
@@ -7401,7 +7401,7 @@ Object {
fill="#00188f"
height="32.714285714285715"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
transform="translate(0,-3.634920634920636)"
@@ -7427,7 +7427,7 @@ Object {
fill="#002050"
height="32.714285714285715"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
transform="translate(0,-3.634920634920636)"
@@ -7885,7 +7885,7 @@ Object {
fill="#0078d4"
height="32.714285714285715"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
transform="translate(0,-3.634920634920636)"
@@ -7911,7 +7911,7 @@ Object {
fill="#00bcf2"
height="32.714285714285715"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
transform="translate(0,-3.634920634920636)"
@@ -7937,7 +7937,7 @@ Object {
fill="#00188f"
height="32.714285714285715"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
transform="translate(0,-3.634920634920636)"
@@ -7963,7 +7963,7 @@ Object {
fill="#002050"
height="32.714285714285715"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
transform="translate(0,-3.634920634920636)"
@@ -8357,7 +8357,7 @@ Object {
fill="#0078d4"
height="32.714285714285715"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
transform="translate(0,-3.634920634920636)"
@@ -8383,7 +8383,7 @@ Object {
fill="#00bcf2"
height="32.714285714285715"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
transform="translate(0,-3.634920634920636)"
@@ -8409,7 +8409,7 @@ Object {
fill="#00188f"
height="32.714285714285715"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
transform="translate(0,-3.634920634920636)"
@@ -8435,7 +8435,7 @@ Object {
fill="#002050"
height="32.714285714285715"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
transform="translate(0,-3.634920634920636)"
diff --git a/packages/charts/react-charts/library/src/components/VegaDeclarativeChart/__snapshots__/VegaDeclarativeChart.test.tsx.snap b/packages/charts/react-charts/library/src/components/VegaDeclarativeChart/__snapshots__/VegaDeclarativeChart.test.tsx.snap
index cd8af79f37cdb..cbf24ddcb8118 100644
--- a/packages/charts/react-charts/library/src/components/VegaDeclarativeChart/__snapshots__/VegaDeclarativeChart.test.tsx.snap
+++ b/packages/charts/react-charts/library/src/components/VegaDeclarativeChart/__snapshots__/VegaDeclarativeChart.test.tsx.snap
@@ -249,7 +249,7 @@ exports[`VegaDeclarativeChart - Bar+Line Combo Rendering Bar + Line Combinations
fill="#637cef"
height="NaN"
opacity="1"
- role="img"
+ role="button"
rx="3"
tabindex="0"
transform="translate(0, 0)"
@@ -264,7 +264,7 @@ exports[`VegaDeclarativeChart - Bar+Line Combo Rendering Bar + Line Combinations
fill="#e3008c"
height="NaN"
opacity="1"
- role="img"
+ role="button"
rx="3"
tabindex="0"
transform="translate(0, 0)"
@@ -285,7 +285,7 @@ exports[`VegaDeclarativeChart - Bar+Line Combo Rendering Bar + Line Combinations
fill="#637cef"
height="NaN"
opacity="1"
- role="img"
+ role="button"
rx="3"
tabindex="0"
transform="translate(0, 0)"
@@ -300,7 +300,7 @@ exports[`VegaDeclarativeChart - Bar+Line Combo Rendering Bar + Line Combinations
fill="#e3008c"
height="NaN"
opacity="1"
- role="img"
+ role="button"
rx="3"
tabindex="0"
transform="translate(0, 0)"
@@ -321,7 +321,7 @@ exports[`VegaDeclarativeChart - Bar+Line Combo Rendering Bar + Line Combinations
fill="#637cef"
height="NaN"
opacity="1"
- role="img"
+ role="button"
rx="3"
tabindex="0"
transform="translate(0, 0)"
@@ -336,7 +336,7 @@ exports[`VegaDeclarativeChart - Bar+Line Combo Rendering Bar + Line Combinations
fill="#e3008c"
height="NaN"
opacity="1"
- role="img"
+ role="button"
rx="3"
tabindex="0"
transform="translate(0, 0)"
@@ -410,7 +410,7 @@ exports[`VegaDeclarativeChart - Bar+Line Combo Rendering Bar + Line Combinations
fill="var(--colorNeutralBackground1)"
opacity="0"
r="8"
- role="img"
+ role="button"
stroke="#2aa0a4"
stroke-width="3"
tabindex="0"
@@ -423,7 +423,7 @@ exports[`VegaDeclarativeChart - Bar+Line Combo Rendering Bar + Line Combinations
fill="var(--colorNeutralBackground1)"
opacity="0"
r="8"
- role="img"
+ role="button"
stroke="#2aa0a4"
stroke-width="3"
tabindex="0"
@@ -436,7 +436,7 @@ exports[`VegaDeclarativeChart - Bar+Line Combo Rendering Bar + Line Combinations
fill="var(--colorNeutralBackground1)"
opacity="0"
r="8"
- role="img"
+ role="button"
stroke="#2aa0a4"
stroke-width="3"
tabindex="0"
@@ -449,7 +449,7 @@ exports[`VegaDeclarativeChart - Bar+Line Combo Rendering Bar + Line Combinations
fill="var(--colorNeutralBackground1)"
opacity="0"
r="8"
- role="img"
+ role="button"
stroke="#2aa0a4"
stroke-width="3"
tabindex="0"
@@ -462,7 +462,7 @@ exports[`VegaDeclarativeChart - Bar+Line Combo Rendering Bar + Line Combinations
fill="var(--colorNeutralBackground1)"
opacity="0"
r="8"
- role="img"
+ role="button"
stroke="#2aa0a4"
stroke-width="3"
tabindex="0"
@@ -475,7 +475,7 @@ exports[`VegaDeclarativeChart - Bar+Line Combo Rendering Bar + Line Combinations
fill="var(--colorNeutralBackground1)"
opacity="0"
r="8"
- role="img"
+ role="button"
stroke="#2aa0a4"
stroke-width="3"
tabindex="0"
@@ -828,7 +828,7 @@ exports[`VegaDeclarativeChart - Bar+Line Combo Rendering Bar + Line Combinations
fill="#637cef"
height="NaN"
opacity="1"
- role="img"
+ role="button"
rx="3"
tabindex="0"
transform="translate(0, 0)"
@@ -849,7 +849,7 @@ exports[`VegaDeclarativeChart - Bar+Line Combo Rendering Bar + Line Combinations
fill="#637cef"
height="NaN"
opacity="1"
- role="img"
+ role="button"
rx="3"
tabindex="0"
transform="translate(0, 0)"
@@ -870,7 +870,7 @@ exports[`VegaDeclarativeChart - Bar+Line Combo Rendering Bar + Line Combinations
fill="#637cef"
height="NaN"
opacity="1"
- role="img"
+ role="button"
rx="3"
tabindex="0"
transform="translate(0, 0)"
@@ -911,7 +911,7 @@ exports[`VegaDeclarativeChart - Bar+Line Combo Rendering Bar + Line Combinations
fill="var(--colorNeutralBackground1)"
opacity="0"
r="8"
- role="img"
+ role="button"
stroke="#e3008c"
stroke-width="3"
tabindex="0"
@@ -924,7 +924,7 @@ exports[`VegaDeclarativeChart - Bar+Line Combo Rendering Bar + Line Combinations
fill="var(--colorNeutralBackground1)"
opacity="0"
r="8"
- role="img"
+ role="button"
stroke="#e3008c"
stroke-width="3"
tabindex="0"
@@ -937,7 +937,7 @@ exports[`VegaDeclarativeChart - Bar+Line Combo Rendering Bar + Line Combinations
fill="var(--colorNeutralBackground1)"
opacity="0"
r="8"
- role="img"
+ role="button"
stroke="#e3008c"
stroke-width="3"
tabindex="0"
@@ -1271,7 +1271,7 @@ exports[`VegaDeclarativeChart - Bar+Line Combo Rendering Bar + Line Combinations
fill="#637cef"
height="NaN"
opacity="1"
- role="img"
+ role="button"
rx="3"
tabindex="0"
transform="translate(0, 0)"
@@ -1292,7 +1292,7 @@ exports[`VegaDeclarativeChart - Bar+Line Combo Rendering Bar + Line Combinations
fill="#637cef"
height="NaN"
opacity="1"
- role="img"
+ role="button"
rx="3"
tabindex="0"
transform="translate(0, 0)"
@@ -1313,7 +1313,7 @@ exports[`VegaDeclarativeChart - Bar+Line Combo Rendering Bar + Line Combinations
fill="#637cef"
height="NaN"
opacity="1"
- role="img"
+ role="button"
rx="3"
tabindex="0"
transform="translate(0, 0)"
@@ -1354,7 +1354,7 @@ exports[`VegaDeclarativeChart - Bar+Line Combo Rendering Bar + Line Combinations
fill="var(--colorNeutralBackground1)"
opacity="0"
r="8"
- role="img"
+ role="button"
stroke="#e3008c"
stroke-width="3"
tabindex="0"
@@ -1367,7 +1367,7 @@ exports[`VegaDeclarativeChart - Bar+Line Combo Rendering Bar + Line Combinations
fill="var(--colorNeutralBackground1)"
opacity="0"
r="8"
- role="img"
+ role="button"
stroke="#e3008c"
stroke-width="3"
tabindex="0"
@@ -1380,7 +1380,7 @@ exports[`VegaDeclarativeChart - Bar+Line Combo Rendering Bar + Line Combinations
fill="var(--colorNeutralBackground1)"
opacity="0"
r="8"
- role="img"
+ role="button"
stroke="#e3008c"
stroke-width="3"
tabindex="0"
@@ -1791,7 +1791,7 @@ exports[`VegaDeclarativeChart - Bar+Line Combo Rendering Bar + Line Combinations
fill="lightblue"
height="NaN"
opacity="1"
- role="img"
+ role="button"
rx="3"
tabindex="0"
transform="translate(0, 0)"
@@ -1812,7 +1812,7 @@ exports[`VegaDeclarativeChart - Bar+Line Combo Rendering Bar + Line Combinations
fill="lightblue"
height="NaN"
opacity="1"
- role="img"
+ role="button"
rx="3"
tabindex="0"
transform="translate(0, 0)"
@@ -1833,7 +1833,7 @@ exports[`VegaDeclarativeChart - Bar+Line Combo Rendering Bar + Line Combinations
fill="lightblue"
height="NaN"
opacity="1"
- role="img"
+ role="button"
rx="3"
tabindex="0"
transform="translate(0, 0)"
@@ -1854,7 +1854,7 @@ exports[`VegaDeclarativeChart - Bar+Line Combo Rendering Bar + Line Combinations
fill="lightblue"
height="NaN"
opacity="1"
- role="img"
+ role="button"
rx="3"
tabindex="0"
transform="translate(0, 0)"
@@ -1875,7 +1875,7 @@ exports[`VegaDeclarativeChart - Bar+Line Combo Rendering Bar + Line Combinations
fill="lightblue"
height="NaN"
opacity="1"
- role="img"
+ role="button"
rx="3"
tabindex="0"
transform="translate(0, 0)"
@@ -1896,7 +1896,7 @@ exports[`VegaDeclarativeChart - Bar+Line Combo Rendering Bar + Line Combinations
fill="lightblue"
height="NaN"
opacity="1"
- role="img"
+ role="button"
rx="3"
tabindex="0"
transform="translate(0, 0)"
@@ -1970,7 +1970,7 @@ exports[`VegaDeclarativeChart - Bar+Line Combo Rendering Bar + Line Combinations
fill="var(--colorNeutralBackground1)"
opacity="0"
r="8"
- role="img"
+ role="button"
stroke="red"
stroke-width="3"
tabindex="0"
@@ -1983,7 +1983,7 @@ exports[`VegaDeclarativeChart - Bar+Line Combo Rendering Bar + Line Combinations
fill="var(--colorNeutralBackground1)"
opacity="0"
r="8"
- role="img"
+ role="button"
stroke="red"
stroke-width="3"
tabindex="0"
@@ -1996,7 +1996,7 @@ exports[`VegaDeclarativeChart - Bar+Line Combo Rendering Bar + Line Combinations
fill="var(--colorNeutralBackground1)"
opacity="0"
r="8"
- role="img"
+ role="button"
stroke="red"
stroke-width="3"
tabindex="0"
@@ -2009,7 +2009,7 @@ exports[`VegaDeclarativeChart - Bar+Line Combo Rendering Bar + Line Combinations
fill="var(--colorNeutralBackground1)"
opacity="0"
r="8"
- role="img"
+ role="button"
stroke="red"
stroke-width="3"
tabindex="0"
@@ -2022,7 +2022,7 @@ exports[`VegaDeclarativeChart - Bar+Line Combo Rendering Bar + Line Combinations
fill="var(--colorNeutralBackground1)"
opacity="0"
r="8"
- role="img"
+ role="button"
stroke="red"
stroke-width="3"
tabindex="0"
@@ -2035,7 +2035,7 @@ exports[`VegaDeclarativeChart - Bar+Line Combo Rendering Bar + Line Combinations
fill="var(--colorNeutralBackground1)"
opacity="0"
r="8"
- role="img"
+ role="button"
stroke="red"
stroke-width="3"
tabindex="0"
@@ -2419,7 +2419,7 @@ exports[`VegaDeclarativeChart - Chart Type Detection Snapshots for Chart Type De
fill="#637cef"
height="NaN"
opacity=""
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -2432,7 +2432,7 @@ exports[`VegaDeclarativeChart - Chart Type Detection Snapshots for Chart Type De
fill="#e3008c"
height="NaN"
opacity=""
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -3496,7 +3496,7 @@ exports[`VegaDeclarativeChart - Issue Fixes Issue 2: Line+Bar Combo (Now Support
fill="#637cef"
height="NaN"
opacity="1"
- role="img"
+ role="button"
rx="3"
tabindex="0"
transform="translate(1.5, 0)"
@@ -3529,7 +3529,7 @@ exports[`VegaDeclarativeChart - Issue Fixes Issue 2: Line+Bar Combo (Now Support
fill="#637cef"
height="NaN"
opacity="1"
- role="img"
+ role="button"
rx="3"
tabindex="0"
transform="translate(1.5, 0)"
@@ -3571,7 +3571,7 @@ exports[`VegaDeclarativeChart - Issue Fixes Issue 2: Line+Bar Combo (Now Support
fill="var(--colorNeutralBackground1)"
opacity="0"
r="8"
- role="img"
+ role="button"
stroke="#e3008c"
stroke-width="3"
tabindex="0"
@@ -3584,7 +3584,7 @@ exports[`VegaDeclarativeChart - Issue Fixes Issue 2: Line+Bar Combo (Now Support
fill="var(--colorNeutralBackground1)"
opacity="0"
r="8"
- role="img"
+ role="button"
stroke="#e3008c"
stroke-width="3"
tabindex="0"
diff --git a/packages/charts/react-charts/library/src/components/VerticalBarChart/VerticalBarChart.tsx b/packages/charts/react-charts/library/src/components/VerticalBarChart/VerticalBarChart.tsx
index 5db23b0112632..eef3308fe9d64 100644
--- a/packages/charts/react-charts/library/src/components/VerticalBarChart/VerticalBarChart.tsx
+++ b/packages/charts/react-charts/library/src/components/VerticalBarChart/VerticalBarChart.tsx
@@ -674,12 +674,12 @@ export const VerticalBarChart: React.FunctionComponent =
onClick={point.onClick}
onMouseOver={event => _onBarHover(point, colorScale(point.y), event)}
aria-label={_getAriaLabel(point)}
- role="img"
+ role={point.onClick || !props.hideTooltip ? 'button' : 'img'}
onMouseLeave={_onBarLeave}
onFocus={event => _onBarFocus(event, point, index, colorScale(point.y))}
onBlur={_onBarLeave}
fill={point.color && !useSingleColor ? point.color : colorScale(point.y)}
- tabIndex={!props.hideTooltip && shouldHighlight ? 0 : undefined}
+ tabIndex={(!props.hideTooltip || point.onClick) && shouldHighlight ? 0 : undefined}
opacity={shouldHighlight ? 1 : 0.1}
rx={props.roundCorners ? 3 : 0}
/>
@@ -732,7 +732,7 @@ export const VerticalBarChart: React.FunctionComponent =
width={_barWidth}
height={adjustedBarHeight}
aria-label={_getAriaLabel(point)}
- role="img"
+ role={point.onClick || !props.hideTooltip ? 'button' : 'img'}
ref={(e: SVGRectElement) => {
_refCallback(e, point.legend!);
}}
@@ -742,7 +742,7 @@ export const VerticalBarChart: React.FunctionComponent =
onBlur={_onBarLeave}
onFocus={event => _onBarFocus(event, point, index, colorScale(point.y))}
fill={point.color ? point.color : colorScale(point.y)}
- tabIndex={!props.hideTooltip && shouldHighlight ? 0 : undefined}
+ tabIndex={(!props.hideTooltip || point.onClick) && shouldHighlight ? 0 : undefined}
rx={props.roundCorners ? 3 : 0}
opacity={shouldHighlight ? 1 : 0.1}
/>
@@ -796,12 +796,12 @@ export const VerticalBarChart: React.FunctionComponent =
onClick={point.onClick}
onMouseOver={event => _onBarHover(point, colorScale(point.y), event)}
aria-label={_getAriaLabel(point)}
- role="img"
+ role={point.onClick || !props.hideTooltip ? 'button' : 'img'}
onMouseLeave={_onBarLeave}
onFocus={event => _onBarFocus(event, point, index, colorScale(point.y))}
onBlur={_onBarLeave}
fill={point.color && !useSingleColor ? point.color : colorScale(point.y)}
- tabIndex={!props.hideTooltip && shouldHighlight ? 0 : undefined}
+ tabIndex={(!props.hideTooltip || point.onClick) && shouldHighlight ? 0 : undefined}
rx={props.roundCorners ? 3 : 0}
opacity={shouldHighlight ? 1 : 0.1}
/>
diff --git a/packages/charts/react-charts/library/src/components/VerticalBarChart/__snapshots__/VerticalBarChart.test.tsx.snap b/packages/charts/react-charts/library/src/components/VerticalBarChart/__snapshots__/VerticalBarChart.test.tsx.snap
index 40c152a54aef5..19a66b5a44ed2 100644
--- a/packages/charts/react-charts/library/src/components/VerticalBarChart/__snapshots__/VerticalBarChart.test.tsx.snap
+++ b/packages/charts/react-charts/library/src/components/VerticalBarChart/__snapshots__/VerticalBarChart.test.tsx.snap
@@ -418,7 +418,7 @@ exports[`Screen resolution Should remain unchanged on zoom in 1`] = `
height="49"
id="_VBC_bar__r_52_-0"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -443,7 +443,7 @@ exports[`Screen resolution Should remain unchanged on zoom in 1`] = `
height="245"
id="_VBC_bar__r_52_-1"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -468,7 +468,7 @@ exports[`Screen resolution Should remain unchanged on zoom in 1`] = `
height="147"
id="_VBC_bar__r_52_-2"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -985,7 +985,7 @@ exports[`Screen resolution Should remain unchanged on zoom out 1`] = `
height="49"
id="_VBC_bar__r_58_-0"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -1010,7 +1010,7 @@ exports[`Screen resolution Should remain unchanged on zoom out 1`] = `
height="245"
id="_VBC_bar__r_58_-1"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -1035,7 +1035,7 @@ exports[`Screen resolution Should remain unchanged on zoom out 1`] = `
height="147"
id="_VBC_bar__r_58_-2"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -1556,7 +1556,7 @@ exports[`Theme Change Should reflect theme change 1`] = `
height="49"
id="_VBC_bar__r_5f_-0"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -1581,7 +1581,7 @@ exports[`Theme Change Should reflect theme change 1`] = `
height="245"
id="_VBC_bar__r_5f_-1"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -1606,7 +1606,7 @@ exports[`Theme Change Should reflect theme change 1`] = `
height="147"
id="_VBC_bar__r_5f_-2"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -2135,7 +2135,7 @@ exports[`Vertical bar chart re-rendering Should re-render the vertical bar chart
height="49"
id="_VBC_bar__r_5l_-0"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -2160,7 +2160,7 @@ exports[`Vertical bar chart re-rendering Should re-render the vertical bar chart
height="245"
id="_VBC_bar__r_5l_-1"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -2185,7 +2185,7 @@ exports[`Vertical bar chart re-rendering Should re-render the vertical bar chart
height="147"
id="_VBC_bar__r_5l_-2"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -2702,7 +2702,7 @@ exports[`Vertical bar chart rendering Should render the vertical bar chart with
height="49"
id="_VBC_bar__r_l_-0"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -2727,7 +2727,7 @@ exports[`Vertical bar chart rendering Should render the vertical bar chart with
height="245"
id="_VBC_bar__r_l_-1"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -2752,7 +2752,7 @@ exports[`Vertical bar chart rendering Should render the vertical bar chart with
height="147"
id="_VBC_bar__r_l_-2"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -3269,7 +3269,7 @@ exports[`Vertical bar chart rendering Should render the vertical bar chart with
height="49"
id="_VBC_bar__r_3_-0"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -3294,7 +3294,7 @@ exports[`Vertical bar chart rendering Should render the vertical bar chart with
height="245"
id="_VBC_bar__r_3_-1"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -3319,7 +3319,7 @@ exports[`Vertical bar chart rendering Should render the vertical bar chart with
height="147"
id="_VBC_bar__r_3_-2"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -3648,7 +3648,7 @@ exports[`Vertical bar chart rendering Should render the vertical bar chart with
height="245"
id="_VBC_bar__r_9_-0"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -3675,7 +3675,7 @@ exports[`Vertical bar chart rendering Should render the vertical bar chart with
height="175"
id="_VBC_bar__r_9_-1"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -3702,7 +3702,7 @@ exports[`Vertical bar chart rendering Should render the vertical bar chart with
height="133"
id="_VBC_bar__r_9_-2"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -3729,7 +3729,7 @@ exports[`Vertical bar chart rendering Should render the vertical bar chart with
height="196"
id="_VBC_bar__r_9_-3"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -4227,7 +4227,7 @@ exports[`Vertical bar chart rendering should render the vertical bar chart with
height="24.5"
id="_VBC_bar__r_r_-0"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -4252,7 +4252,7 @@ exports[`Vertical bar chart rendering should render the vertical bar chart with
height="122.5"
id="_VBC_bar__r_r_-1"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -4277,7 +4277,7 @@ exports[`Vertical bar chart rendering should render the vertical bar chart with
height="73.5"
id="_VBC_bar__r_r_-2"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -4794,7 +4794,7 @@ exports[`VerticalBarChart - mouse events Should render callout correctly on mous
height="49"
id="_VBC_bar__r_5r_-0"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -4819,7 +4819,7 @@ exports[`VerticalBarChart - mouse events Should render callout correctly on mous
height="245"
id="_VBC_bar__r_5r_-1"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -4844,7 +4844,7 @@ exports[`VerticalBarChart - mouse events Should render callout correctly on mous
height="147"
id="_VBC_bar__r_5r_-2"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -5417,7 +5417,7 @@ exports[`VerticalBarChart - mouse events Should render customized callout on mou
height="49"
id="_VBC_bar__r_62_-0"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -5442,7 +5442,7 @@ exports[`VerticalBarChart - mouse events Should render customized callout on mou
height="245"
id="_VBC_bar__r_62_-1"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -5467,7 +5467,7 @@ exports[`VerticalBarChart - mouse events Should render customized callout on mou
height="147"
id="_VBC_bar__r_62_-2"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -6017,7 +6017,7 @@ exports[`VerticalBarChart snapShot testing Should not render bar labels 1`] = `
height="49"
id="_VBC_bar__r_7n_-0"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -6032,7 +6032,7 @@ exports[`VerticalBarChart snapShot testing Should not render bar labels 1`] = `
height="245"
id="_VBC_bar__r_7n_-1"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -6047,7 +6047,7 @@ exports[`VerticalBarChart snapShot testing Should not render bar labels 1`] = `
height="147"
id="_VBC_bar__r_7n_-2"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -6552,7 +6552,7 @@ exports[`VerticalBarChart snapShot testing Should render gradients on bars 1`] =
height="49"
id="_VBC_bar__r_7t_-0"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -6577,7 +6577,7 @@ exports[`VerticalBarChart snapShot testing Should render gradients on bars 1`] =
height="245"
id="_VBC_bar__r_7t_-1"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -6602,7 +6602,7 @@ exports[`VerticalBarChart snapShot testing Should render gradients on bars 1`] =
height="147"
id="_VBC_bar__r_7t_-2"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -7117,7 +7117,7 @@ exports[`VerticalBarChart snapShot testing Should render rounded corners on bars
height="49"
id="_VBC_bar__r_83_-0"
opacity="1"
- role="img"
+ role="button"
rx="3"
tabindex="0"
width="16"
@@ -7142,7 +7142,7 @@ exports[`VerticalBarChart snapShot testing Should render rounded corners on bars
height="245"
id="_VBC_bar__r_83_-1"
opacity="1"
- role="img"
+ role="button"
rx="3"
tabindex="0"
width="16"
@@ -7167,7 +7167,7 @@ exports[`VerticalBarChart snapShot testing Should render rounded corners on bars
height="147"
id="_VBC_bar__r_83_-2"
opacity="1"
- role="img"
+ role="button"
rx="3"
tabindex="0"
width="16"
@@ -7682,7 +7682,7 @@ exports[`VerticalBarChart snapShot testing renders VerticalBarChart correctly 1`
height="49"
id="_VBC_bar__r_6f_-0"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -7707,7 +7707,7 @@ exports[`VerticalBarChart snapShot testing renders VerticalBarChart correctly 1`
height="245"
id="_VBC_bar__r_6f_-1"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -7732,7 +7732,7 @@ exports[`VerticalBarChart snapShot testing renders VerticalBarChart correctly 1`
height="147"
id="_VBC_bar__r_6f_-2"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -8247,7 +8247,7 @@ exports[`VerticalBarChart snapShot testing renders enabledLegendsWrapLines corre
height="49"
id="_VBC_bar__r_70_-0"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -8272,7 +8272,7 @@ exports[`VerticalBarChart snapShot testing renders enabledLegendsWrapLines corre
height="245"
id="_VBC_bar__r_70_-1"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -8297,7 +8297,7 @@ exports[`VerticalBarChart snapShot testing renders enabledLegendsWrapLines corre
height="147"
id="_VBC_bar__r_70_-2"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -8822,7 +8822,7 @@ exports[`VerticalBarChart snapShot testing renders hideLegend correctly 1`] = `
height="1"
id="_VBC_bar__r_6l_-0"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -8847,7 +8847,7 @@ exports[`VerticalBarChart snapShot testing renders hideLegend correctly 1`] = `
height="5"
id="_VBC_bar__r_6l_-1"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -8872,7 +8872,7 @@ exports[`VerticalBarChart snapShot testing renders hideLegend correctly 1`] = `
height="3"
id="_VBC_bar__r_6l_-2"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -9973,7 +9973,7 @@ exports[`VerticalBarChart snapShot testing renders showXAxisLablesTooltip correc
height="49"
id="_VBC_bar__r_75_-0"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -9998,7 +9998,7 @@ exports[`VerticalBarChart snapShot testing renders showXAxisLablesTooltip correc
height="245"
id="_VBC_bar__r_75_-1"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -10023,7 +10023,7 @@ exports[`VerticalBarChart snapShot testing renders showXAxisLablesTooltip correc
height="147"
id="_VBC_bar__r_75_-2"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -10641,7 +10641,7 @@ exports[`VerticalBarChart snapShot testing renders wrapXAxisLables correctly 1`]
height="49"
id="_VBC_bar__r_7b_-0"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -10666,7 +10666,7 @@ exports[`VerticalBarChart snapShot testing renders wrapXAxisLables correctly 1`]
height="245"
id="_VBC_bar__r_7b_-1"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -10691,7 +10691,7 @@ exports[`VerticalBarChart snapShot testing renders wrapXAxisLables correctly 1`]
height="147"
id="_VBC_bar__r_7b_-2"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -11213,7 +11213,7 @@ exports[`VerticalBarChart snapShot testing renders yAxisTickFormat correctly 1`]
height="49"
id="_VBC_bar__r_7h_-0"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -11238,7 +11238,7 @@ exports[`VerticalBarChart snapShot testing renders yAxisTickFormat correctly 1`]
height="245"
id="_VBC_bar__r_7h_-1"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
@@ -11263,7 +11263,7 @@ exports[`VerticalBarChart snapShot testing renders yAxisTickFormat correctly 1`]
height="147"
id="_VBC_bar__r_7h_-2"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
width="16"
diff --git a/packages/charts/react-charts/library/src/components/VerticalStackedBarChart/VerticalStackedBarChart.tsx b/packages/charts/react-charts/library/src/components/VerticalStackedBarChart/VerticalStackedBarChart.tsx
index 9d5f46b1b693d..dff4e6c9ee81c 100644
--- a/packages/charts/react-charts/library/src/components/VerticalStackedBarChart/VerticalStackedBarChart.tsx
+++ b/packages/charts/react-charts/library/src/components/VerticalStackedBarChart/VerticalStackedBarChart.tsx
@@ -659,7 +659,7 @@ export const VerticalStackedBarChart: React.FunctionComponent _lineFocus(event, circlePoint, circleRef)}
onBlur={_handleMouseOut}
- role="img"
+ role={!props.hideTooltip ? 'button' : 'img'}
aria-label={_getAriaLabel(circlePoint.xItem, circlePoint as VSChartDataPoint, true)}
/>,
);
@@ -1043,8 +1043,8 @@ export const VerticalStackedBarChart: React.FunctionComponent _onRectFocus(point, singleChartData.xAxisPoint as string, startColor, ref),
onBlur: _handleMouseOut,
onClick: (event: React.MouseEvent) => _onClick(point, event),
- role: 'img',
- tabIndex: !props.hideTooltip && shouldHighlight ? 0 : undefined,
+ role: props.onBarClick || props.href || !props.hideTooltip ? 'button' : 'img',
+ tabIndex: (props.onBarClick || props.href || !props.hideTooltip) && shouldHighlight ? 0 : undefined,
};
let barHeight: number;
@@ -1146,8 +1146,8 @@ export const VerticalStackedBarChart: React.FunctionComponent _onStackFocus(singleChartData, groupRef),
onBlur: _handleMouseOut,
onClick: (event: any) => _onClick(singleChartData, event),
- role: 'img',
- tabIndex: !props.hideTooltip ? 0 : undefined,
+ role: props.onBarClick || props.href || !props.hideTooltip ? 'button' : 'img',
+ tabIndex: props.onBarClick || props.href || !props.hideTooltip ? 0 : undefined,
};
let showLabel = false;
let barLabel: string | number = 0;
diff --git a/packages/charts/react-charts/library/src/components/VerticalStackedBarChart/__snapshots__/VerticalStackedBarChart.test.tsx.snap b/packages/charts/react-charts/library/src/components/VerticalStackedBarChart/__snapshots__/VerticalStackedBarChart.test.tsx.snap
index 9b908fbf33c8f..958b9fbe74c6c 100644
--- a/packages/charts/react-charts/library/src/components/VerticalStackedBarChart/__snapshots__/VerticalStackedBarChart.test.tsx.snap
+++ b/packages/charts/react-charts/library/src/components/VerticalStackedBarChart/__snapshots__/VerticalStackedBarChart.test.tsx.snap
@@ -215,7 +215,7 @@ exports[`Vertical stacked bar chart - Screen resolution Should remain unchanged
fill="#0078d4"
height="4.2"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
transform="translate(0, 0)"
@@ -230,7 +230,7 @@ exports[`Vertical stacked bar chart - Screen resolution Should remain unchanged
fill="#002050"
height="1.05"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
transform="translate(0, 0)"
@@ -263,7 +263,7 @@ exports[`Vertical stacked bar chart - Screen resolution Should remain unchanged
fill="#0078d4"
height="62.999999999999986"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
transform="translate(0, 0)"
@@ -278,7 +278,7 @@ exports[`Vertical stacked bar chart - Screen resolution Should remain unchanged
fill="#002050"
height="6.299999999999999"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
transform="translate(0, 0)"
@@ -293,7 +293,7 @@ exports[`Vertical stacked bar chart - Screen resolution Should remain unchanged
fill="#00188f"
height="83.99999999999999"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
transform="translate(0, 0)"
@@ -326,7 +326,7 @@ exports[`Vertical stacked bar chart - Screen resolution Should remain unchanged
fill="#0078d4"
height="21"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
transform="translate(0, 0)"
@@ -341,7 +341,7 @@ exports[`Vertical stacked bar chart - Screen resolution Should remain unchanged
fill="#002050"
height="126"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
transform="translate(0, 0)"
@@ -356,7 +356,7 @@ exports[`Vertical stacked bar chart - Screen resolution Should remain unchanged
fill="#00188f"
height="63"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
transform="translate(0, 0)"
@@ -409,7 +409,7 @@ exports[`Vertical stacked bar chart - Screen resolution Should remain unchanged
fill="var(--colorNeutralBackground1)"
opacity="0"
r="8"
- role="img"
+ role="button"
stroke="#0078d4"
stroke-width="3"
tabindex="0"
@@ -422,7 +422,7 @@ exports[`Vertical stacked bar chart - Screen resolution Should remain unchanged
fill="var(--colorNeutralBackground1)"
opacity="0"
r="8"
- role="img"
+ role="button"
stroke="#0078d4"
stroke-width="3"
tabindex="0"
@@ -435,7 +435,7 @@ exports[`Vertical stacked bar chart - Screen resolution Should remain unchanged
fill="var(--colorNeutralBackground1)"
opacity="0"
r="8"
- role="img"
+ role="button"
stroke="#0078d4"
stroke-width="3"
tabindex="0"
@@ -756,7 +756,7 @@ exports[`Vertical stacked bar chart - Screen resolution Should remain unchanged
fill="#0078d4"
height="4.2"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
transform="translate(0, 0)"
@@ -771,7 +771,7 @@ exports[`Vertical stacked bar chart - Screen resolution Should remain unchanged
fill="#002050"
height="1.05"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
transform="translate(0, 0)"
@@ -804,7 +804,7 @@ exports[`Vertical stacked bar chart - Screen resolution Should remain unchanged
fill="#0078d4"
height="62.999999999999986"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
transform="translate(0, 0)"
@@ -819,7 +819,7 @@ exports[`Vertical stacked bar chart - Screen resolution Should remain unchanged
fill="#002050"
height="6.299999999999999"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
transform="translate(0, 0)"
@@ -834,7 +834,7 @@ exports[`Vertical stacked bar chart - Screen resolution Should remain unchanged
fill="#00188f"
height="83.99999999999999"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
transform="translate(0, 0)"
@@ -867,7 +867,7 @@ exports[`Vertical stacked bar chart - Screen resolution Should remain unchanged
fill="#0078d4"
height="21"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
transform="translate(0, 0)"
@@ -882,7 +882,7 @@ exports[`Vertical stacked bar chart - Screen resolution Should remain unchanged
fill="#002050"
height="126"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
transform="translate(0, 0)"
@@ -897,7 +897,7 @@ exports[`Vertical stacked bar chart - Screen resolution Should remain unchanged
fill="#00188f"
height="63"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
transform="translate(0, 0)"
@@ -950,7 +950,7 @@ exports[`Vertical stacked bar chart - Screen resolution Should remain unchanged
fill="var(--colorNeutralBackground1)"
opacity="0"
r="8"
- role="img"
+ role="button"
stroke="#0078d4"
stroke-width="3"
tabindex="0"
@@ -963,7 +963,7 @@ exports[`Vertical stacked bar chart - Screen resolution Should remain unchanged
fill="var(--colorNeutralBackground1)"
opacity="0"
r="8"
- role="img"
+ role="button"
stroke="#0078d4"
stroke-width="3"
tabindex="0"
@@ -976,7 +976,7 @@ exports[`Vertical stacked bar chart - Screen resolution Should remain unchanged
fill="var(--colorNeutralBackground1)"
opacity="0"
r="8"
- role="img"
+ role="button"
stroke="#0078d4"
stroke-width="3"
tabindex="0"
@@ -1449,7 +1449,7 @@ exports[`Vertical stacked bar chart rendering Should render the vertical stacked
fill="aqua"
height="188.46153846153845"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
transform="translate(-8, 0)"
@@ -1464,7 +1464,7 @@ exports[`Vertical stacked bar chart rendering Should render the vertical stacked
fill="navy"
height="23.557692307692307"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
transform="translate(-8, 0)"
@@ -1497,7 +1497,7 @@ exports[`Vertical stacked bar chart rendering Should render the vertical stacked
fill="aqua"
height="141.34615384615384"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
transform="translate(-8, 0)"
@@ -1512,7 +1512,7 @@ exports[`Vertical stacked bar chart rendering Should render the vertical stacked
fill="navy"
height="94.23076923076923"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
transform="translate(-8, 0)"
@@ -1964,7 +1964,7 @@ exports[`VerticalStackedBarChart - mouse events Should render callout correctly
fill="aqua"
height="188.46153846153845"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
transform="translate(-8, 0)"
@@ -1979,7 +1979,7 @@ exports[`VerticalStackedBarChart - mouse events Should render callout correctly
fill="navy"
height="23.557692307692307"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
transform="translate(-8, 0)"
@@ -2012,7 +2012,7 @@ exports[`VerticalStackedBarChart - mouse events Should render callout correctly
fill="aqua"
height="141.34615384615384"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
transform="translate(-8, 0)"
@@ -2027,7 +2027,7 @@ exports[`VerticalStackedBarChart - mouse events Should render callout correctly
fill="navy"
height="94.23076923076923"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
transform="translate(-8, 0)"
@@ -2532,7 +2532,7 @@ exports[`VerticalStackedBarChart - mouse events Should render customized callout
fill="aqua"
height="188.46153846153845"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
transform="translate(-8, 0)"
@@ -2547,7 +2547,7 @@ exports[`VerticalStackedBarChart - mouse events Should render customized callout
fill="navy"
height="23.557692307692307"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
transform="translate(-8, 0)"
@@ -2580,7 +2580,7 @@ exports[`VerticalStackedBarChart - mouse events Should render customized callout
fill="aqua"
height="141.34615384615384"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
transform="translate(-8, 0)"
@@ -2595,7 +2595,7 @@ exports[`VerticalStackedBarChart - mouse events Should render customized callout
fill="navy"
height="94.23076923076923"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
transform="translate(-8, 0)"
@@ -3077,7 +3077,7 @@ exports[`VerticalStackedBarChart - mouse events Should render customized callout
fill="aqua"
height="188.46153846153845"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
transform="translate(-8, 0)"
@@ -3092,7 +3092,7 @@ exports[`VerticalStackedBarChart - mouse events Should render customized callout
fill="navy"
height="23.557692307692307"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
transform="translate(-8, 0)"
@@ -3125,7 +3125,7 @@ exports[`VerticalStackedBarChart - mouse events Should render customized callout
fill="aqua"
height="141.34615384615384"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
transform="translate(-8, 0)"
@@ -3140,7 +3140,7 @@ exports[`VerticalStackedBarChart - mouse events Should render customized callout
fill="navy"
height="94.23076923076923"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
transform="translate(-8, 0)"
@@ -3182,7 +3182,7 @@ exports[`VerticalStackedBarChart - mouse events Should render customized callout
fill="var(--colorNeutralBackground1)"
opacity="0"
r="8"
- role="img"
+ role="button"
stroke="yellow"
stroke-width="3"
tabindex="0"
@@ -3195,7 +3195,7 @@ exports[`VerticalStackedBarChart - mouse events Should render customized callout
fill="var(--colorNeutralBackground1)"
opacity="0"
r="8"
- role="img"
+ role="button"
stroke="yellow"
stroke-width="3"
tabindex="0"
@@ -3704,7 +3704,7 @@ exports[`VerticalStackedBarChart snapShot testing Should not render bar labels 1
fill="aqua"
height="188.46153846153845"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
transform="translate(-8, 0)"
@@ -3719,7 +3719,7 @@ exports[`VerticalStackedBarChart snapShot testing Should not render bar labels 1
fill="navy"
height="23.557692307692307"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
transform="translate(-8, 0)"
@@ -3740,7 +3740,7 @@ exports[`VerticalStackedBarChart snapShot testing Should not render bar labels 1
fill="aqua"
height="141.34615384615384"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
transform="translate(-8, 0)"
@@ -3755,7 +3755,7 @@ exports[`VerticalStackedBarChart snapShot testing Should not render bar labels 1
fill="navy"
height="94.23076923076923"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
transform="translate(-8, 0)"
@@ -4193,7 +4193,7 @@ exports[`VerticalStackedBarChart snapShot testing Should render gradients on bar
fill="aqua"
height="188.46153846153845"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
transform="translate(-8, 0)"
@@ -4208,7 +4208,7 @@ exports[`VerticalStackedBarChart snapShot testing Should render gradients on bar
fill="navy"
height="23.557692307692307"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
transform="translate(-8, 0)"
@@ -4241,7 +4241,7 @@ exports[`VerticalStackedBarChart snapShot testing Should render gradients on bar
fill="aqua"
height="141.34615384615384"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
transform="translate(-8, 0)"
@@ -4256,7 +4256,7 @@ exports[`VerticalStackedBarChart snapShot testing Should render gradients on bar
fill="navy"
height="94.23076923076923"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
transform="translate(-8, 0)"
@@ -4706,7 +4706,7 @@ exports[`VerticalStackedBarChart snapShot testing Should render rounded corners
fill="aqua"
height="188.46153846153845"
opacity="1"
- role="img"
+ role="button"
rx="3"
tabindex="0"
transform="translate(-8, 0)"
@@ -4721,7 +4721,7 @@ exports[`VerticalStackedBarChart snapShot testing Should render rounded corners
fill="navy"
height="23.557692307692307"
opacity="1"
- role="img"
+ role="button"
rx="3"
tabindex="0"
transform="translate(-8, 0)"
@@ -4754,7 +4754,7 @@ exports[`VerticalStackedBarChart snapShot testing Should render rounded corners
fill="aqua"
height="141.34615384615384"
opacity="1"
- role="img"
+ role="button"
rx="3"
tabindex="0"
transform="translate(-8, 0)"
@@ -4769,7 +4769,7 @@ exports[`VerticalStackedBarChart snapShot testing Should render rounded corners
fill="navy"
height="94.23076923076923"
opacity="1"
- role="img"
+ role="button"
rx="3"
tabindex="0"
transform="translate(-8, 0)"
@@ -5219,7 +5219,7 @@ exports[`VerticalStackedBarChart snapShot testing renders VerticalStackedBarChar
fill="aqua"
height="188.46153846153845"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
transform="translate(-8, 0)"
@@ -5234,7 +5234,7 @@ exports[`VerticalStackedBarChart snapShot testing renders VerticalStackedBarChar
fill="navy"
height="23.557692307692307"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
transform="translate(-8, 0)"
@@ -5267,7 +5267,7 @@ exports[`VerticalStackedBarChart snapShot testing renders VerticalStackedBarChar
fill="aqua"
height="141.34615384615384"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
transform="translate(-8, 0)"
@@ -5282,7 +5282,7 @@ exports[`VerticalStackedBarChart snapShot testing renders VerticalStackedBarChar
fill="navy"
height="94.23076923076923"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
transform="translate(-8, 0)"
@@ -5732,7 +5732,7 @@ exports[`VerticalStackedBarChart snapShot testing renders enabledLegendsWrapLine
fill="aqua"
height="188.46153846153845"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
transform="translate(-8, 0)"
@@ -5747,7 +5747,7 @@ exports[`VerticalStackedBarChart snapShot testing renders enabledLegendsWrapLine
fill="navy"
height="23.557692307692307"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
transform="translate(-8, 0)"
@@ -5780,7 +5780,7 @@ exports[`VerticalStackedBarChart snapShot testing renders enabledLegendsWrapLine
fill="aqua"
height="141.34615384615384"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
transform="translate(-8, 0)"
@@ -5795,7 +5795,7 @@ exports[`VerticalStackedBarChart snapShot testing renders enabledLegendsWrapLine
fill="navy"
height="94.23076923076923"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
transform="translate(-8, 0)"
@@ -6252,7 +6252,7 @@ exports[`VerticalStackedBarChart snapShot testing renders hideLegend correctly 1
fill="aqua"
height="3.846153846153846"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
transform="translate(-8, 0)"
@@ -6267,7 +6267,7 @@ exports[`VerticalStackedBarChart snapShot testing renders hideLegend correctly 1
fill="navy"
height="0.4807692307692307"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
transform="translate(-8, 0)"
@@ -6300,7 +6300,7 @@ exports[`VerticalStackedBarChart snapShot testing renders hideLegend correctly 1
fill="aqua"
height="2.884615384615384"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
transform="translate(-8, 0)"
@@ -6315,7 +6315,7 @@ exports[`VerticalStackedBarChart snapShot testing renders hideLegend correctly 1
fill="navy"
height="1.923076923076923"
opacity="1"
- role="img"
+ role="button"
rx="0"
tabindex="0"
transform="translate(-8, 0)"
@@ -7212,7 +7212,7 @@ exports[`VerticalStackedBarChart snapShot testing renders isCalloutForStack corr