diff --git a/change/@fluentui-react-charts-35c73142-960e-4539-8688-379264b9cc34.json b/change/@fluentui-react-charts-35c73142-960e-4539-8688-379264b9cc34.json
new file mode 100644
index 00000000000000..3560648a1e6e25
--- /dev/null
+++ b/change/@fluentui-react-charts-35c73142-960e-4539-8688-379264b9cc34.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Accessibility bug fixes",
+  "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 ad4edf64915154..02cfe8232670b9 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="option"]');
       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="option"]');
       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="option"]');
       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="option"]');
       // 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="option"]');
       // 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="option"]');
       // 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="option"]');
       // 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="option"]');
       // 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="option"]');
       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(<GroupedVerticalBarChart data={chartPoints} calloutProps={{}} />);
-    const bars = container.querySelectorAll('rect[role="img"]');
+    const bars = container.querySelectorAll('rect[role="option"]');
     fireEvent.mouseOver(bars[0]);
     // Wait for any async updates (if needed)
     act(() => {
@@ -740,7 +740,7 @@ describe('GroupedVerticalBarChart - mouse events', () => {
 
   it('Should render callout correctly on mousemove', () => {
     const { container } = render(<GroupedVerticalBarChart data={chartPoints} />);
-    const bars = container.querySelectorAll('rect[role="img"]');
+    const bars = container.querySelectorAll('rect[role="option"]');
     fireEvent.mouseMove(bars[2]);
     const html1 = container.innerHTML;
     fireEvent.mouseMove(bars[3]);
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 4a620d58b06659..d7de63e346ebbf 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<GroupedVerticalBarChartProps> = R
               onClick={pointData.onClick}
               aria-label={getAriaLabel(pointData, singleSet.xAxisPoint)}
               tabIndex={_legendHighlighted(pointData.legend) || _noLegendHighlighted() ? 0 : undefined}
-              role="img"
+              role="option"
             />,
           );
 
@@ -854,7 +854,6 @@ export const GroupedVerticalBarChart: React.FC<GroupedVerticalBarChartProps> = R
 
         const dotId = _getDotId(seriesIdx, pointIdx);
         const isLinePointActive = activeLinePoint === point.x || activeLinePoint === dotId;
-
         dotGroup.push(
           <circle
             key={dotId}
@@ -871,7 +870,7 @@ export const GroupedVerticalBarChart: React.FC<GroupedVerticalBarChartProps> = R
             tabIndex={shouldHighlight ? 0 : undefined}
             onFocus={e => _onLineFocus(e, series, seriesIdx, pointIdx)}
             onBlur={_onBarLeave}
-            role="img"
+            role="option"
             aria-label={getAriaLabel(
               {
                 xAxisCalloutData: point.xAxisCalloutData,
@@ -885,10 +884,17 @@ export const GroupedVerticalBarChart: React.FC<GroupedVerticalBarChartProps> = R
           />,
         );
       });
+      const dotGroupAriaLabel = `${series.legend || `Line ${seriesIdx + 1}`}, line with ${
+        series.data.length
+      } data points`;
 
       lineBorders.push(<g key={`lineBorderGroup-${seriesIdx}`}>{lineBorderGroup}</g>);
       lines.push(<g key={`lineGroup-${seriesIdx}`}>{lineGroup}</g>);
-      dots.push(<g key={`dotGroup-${seriesIdx}`}>{dotGroup}</g>);
+      dots.push(
+        <g role="listbox" key={`dotGroup-${seriesIdx}`} aria-label={dotGroupAriaLabel}>
+          {dotGroup}
+        </g>,
+      );
     });
 
     return dots.length > 0 ? (
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 21b439b03667c7..f73d401db1243b 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="option"
               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="option"
               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="option"
               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="option"
               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="option"
               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="option"
               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="option"
               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="option"
               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="option"
               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="option"
               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="option"
               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="option"
               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="option"
               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="option"
               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="option"
               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="option"
               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="option"
               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="option"
               rx="0"
               tabindex="0"
               width="16"
@@ -1556,7 +1556,7 @@ Object {
                   fill="#00bcf2"
                   height="161.7"
                   opacity=""
-                  role="img"
+                  role="option"
                   rx="0"
                   tabindex="0"
                   width="16"
@@ -1569,7 +1569,7 @@ Object {
                   fill="#0078d4"
                   height="215.6"
                   opacity=""
-                  role="img"
+                  role="option"
                   rx="0"
                   tabindex="0"
                   width="16"
@@ -1606,7 +1606,7 @@ Object {
                   fill="#00bcf2"
                   height="161.7"
                   opacity=""
-                  role="img"
+                  role="option"
                   rx="0"
                   tabindex="0"
                   width="16"
@@ -1619,7 +1619,7 @@ Object {
                   fill="#0078d4"
                   height="14.700000000000017"
                   opacity=""
-                  role="img"
+                  role="option"
                   rx="0"
                   tabindex="0"
                   width="16"
@@ -1656,7 +1656,7 @@ Object {
                   fill="#00bcf2"
                   height="68.60000000000002"
                   opacity=""
-                  role="img"
+                  role="option"
                   rx="0"
                   tabindex="0"
                   width="16"
@@ -1669,7 +1669,7 @@ Object {
                   fill="#0078d4"
                   height="245"
                   opacity=""
-                  role="img"
+                  role="option"
                   rx="0"
                   tabindex="0"
                   width="16"
@@ -1974,7 +1974,7 @@ Object {
                 fill="#00bcf2"
                 height="161.7"
                 opacity=""
-                role="img"
+                role="option"
                 rx="0"
                 tabindex="0"
                 width="16"
@@ -1987,7 +1987,7 @@ Object {
                 fill="#0078d4"
                 height="215.6"
                 opacity=""
-                role="img"
+                role="option"
                 rx="0"
                 tabindex="0"
                 width="16"
@@ -2024,7 +2024,7 @@ Object {
                 fill="#00bcf2"
                 height="161.7"
                 opacity=""
-                role="img"
+                role="option"
                 rx="0"
                 tabindex="0"
                 width="16"
@@ -2037,7 +2037,7 @@ Object {
                 fill="#0078d4"
                 height="14.700000000000017"
                 opacity=""
-                role="img"
+                role="option"
                 rx="0"
                 tabindex="0"
                 width="16"
@@ -2074,7 +2074,7 @@ Object {
                 fill="#00bcf2"
                 height="68.60000000000002"
                 opacity=""
-                role="img"
+                role="option"
                 rx="0"
                 tabindex="0"
                 width="16"
@@ -2087,7 +2087,7 @@ Object {
                 fill="#0078d4"
                 height="245"
                 opacity=""
-                role="img"
+                role="option"
                 rx="0"
                 tabindex="0"
                 width="16"
@@ -2451,7 +2451,7 @@ Object {
                   fill="#00bcf2"
                   height="161.7"
                   opacity=""
-                  role="img"
+                  role="option"
                   rx="0"
                   tabindex="0"
                   width="16"
@@ -2464,7 +2464,7 @@ Object {
                   fill="#0078d4"
                   height="215.6"
                   opacity=""
-                  role="img"
+                  role="option"
                   rx="0"
                   tabindex="0"
                   width="16"
@@ -2501,7 +2501,7 @@ Object {
                   fill="#00bcf2"
                   height="161.7"
                   opacity=""
-                  role="img"
+                  role="option"
                   rx="0"
                   tabindex="0"
                   width="16"
@@ -2514,7 +2514,7 @@ Object {
                   fill="#0078d4"
                   height="14.700000000000017"
                   opacity=""
-                  role="img"
+                  role="option"
                   rx="0"
                   tabindex="0"
                   width="16"
@@ -2551,7 +2551,7 @@ Object {
                   fill="#00bcf2"
                   height="68.60000000000002"
                   opacity=""
-                  role="img"
+                  role="option"
                   rx="0"
                   tabindex="0"
                   width="16"
@@ -2564,7 +2564,7 @@ Object {
                   fill="#0078d4"
                   height="245"
                   opacity=""
-                  role="img"
+                  role="option"
                   rx="0"
                   tabindex="0"
                   width="16"
@@ -2876,7 +2876,7 @@ Object {
                 fill="#00bcf2"
                 height="161.7"
                 opacity=""
-                role="img"
+                role="option"
                 rx="0"
                 tabindex="0"
                 width="16"
@@ -2889,7 +2889,7 @@ Object {
                 fill="#0078d4"
                 height="215.6"
                 opacity=""
-                role="img"
+                role="option"
                 rx="0"
                 tabindex="0"
                 width="16"
@@ -2926,7 +2926,7 @@ Object {
                 fill="#00bcf2"
                 height="161.7"
                 opacity=""
-                role="img"
+                role="option"
                 rx="0"
                 tabindex="0"
                 width="16"
@@ -2939,7 +2939,7 @@ Object {
                 fill="#0078d4"
                 height="14.700000000000017"
                 opacity=""
-                role="img"
+                role="option"
                 rx="0"
                 tabindex="0"
                 width="16"
@@ -2976,7 +2976,7 @@ Object {
                 fill="#00bcf2"
                 height="68.60000000000002"
                 opacity=""
-                role="img"
+                role="option"
                 rx="0"
                 tabindex="0"
                 width="16"
@@ -2989,7 +2989,7 @@ Object {
                 fill="#0078d4"
                 height="245"
                 opacity=""
-                role="img"
+                role="option"
                 rx="0"
                 tabindex="0"
                 width="16"
@@ -3360,7 +3360,7 @@ Object {
                   fill="#00bcf2"
                   height="1"
                   opacity=""
-                  role="img"
+                  role="option"
                   rx="0"
                   tabindex="0"
                   width="16"
@@ -3373,7 +3373,7 @@ Object {
                   fill="#0078d4"
                   height="1"
                   opacity=""
-                  role="img"
+                  role="option"
                   rx="0"
                   tabindex="0"
                   width="16"
@@ -3410,7 +3410,7 @@ Object {
                   fill="#00bcf2"
                   height="1"
                   opacity=""
-                  role="img"
+                  role="option"
                   rx="0"
                   tabindex="0"
                   width="16"
@@ -3423,7 +3423,7 @@ Object {
                   fill="#0078d4"
                   height="1"
                   opacity=""
-                  role="img"
+                  role="option"
                   rx="0"
                   tabindex="0"
                   width="16"
@@ -3460,7 +3460,7 @@ Object {
                   fill="#00bcf2"
                   height="1"
                   opacity=""
-                  role="img"
+                  role="option"
                   rx="0"
                   tabindex="0"
                   width="16"
@@ -3473,7 +3473,7 @@ Object {
                   fill="#0078d4"
                   height="1"
                   opacity=""
-                  role="img"
+                  role="option"
                   rx="0"
                   tabindex="0"
                   width="16"
@@ -3723,7 +3723,7 @@ Object {
                 fill="#00bcf2"
                 height="1"
                 opacity=""
-                role="img"
+                role="option"
                 rx="0"
                 tabindex="0"
                 width="16"
@@ -3736,7 +3736,7 @@ Object {
                 fill="#0078d4"
                 height="1"
                 opacity=""
-                role="img"
+                role="option"
                 rx="0"
                 tabindex="0"
                 width="16"
@@ -3773,7 +3773,7 @@ Object {
                 fill="#00bcf2"
                 height="1"
                 opacity=""
-                role="img"
+                role="option"
                 rx="0"
                 tabindex="0"
                 width="16"
@@ -3786,7 +3786,7 @@ Object {
                 fill="#0078d4"
                 height="1"
                 opacity=""
-                role="img"
+                role="option"
                 rx="0"
                 tabindex="0"
                 width="16"
@@ -3823,7 +3823,7 @@ Object {
                 fill="#00bcf2"
                 height="1"
                 opacity=""
-                role="img"
+                role="option"
                 rx="0"
                 tabindex="0"
                 width="16"
@@ -3836,7 +3836,7 @@ Object {
                 fill="#0078d4"
                 height="1"
                 opacity=""
-                role="img"
+                role="option"
                 rx="0"
                 tabindex="0"
                 width="16"
@@ -4145,7 +4145,7 @@ Object {
                   fill="#00bcf2"
                   height="161.7"
                   opacity=""
-                  role="img"
+                  role="option"
                   rx="0"
                   tabindex="0"
                   width="16"
@@ -4158,7 +4158,7 @@ Object {
                   fill="#0078d4"
                   height="215.6"
                   opacity=""
-                  role="img"
+                  role="option"
                   rx="0"
                   tabindex="0"
                   width="16"
@@ -4195,7 +4195,7 @@ Object {
                   fill="#00bcf2"
                   height="161.7"
                   opacity=""
-                  role="img"
+                  role="option"
                   rx="0"
                   tabindex="0"
                   width="16"
@@ -4208,7 +4208,7 @@ Object {
                   fill="#0078d4"
                   height="14.700000000000017"
                   opacity=""
-                  role="img"
+                  role="option"
                   rx="0"
                   tabindex="0"
                   width="16"
@@ -4245,7 +4245,7 @@ Object {
                   fill="#00bcf2"
                   height="68.60000000000002"
                   opacity=""
-                  role="img"
+                  role="option"
                   rx="0"
                   tabindex="0"
                   width="16"
@@ -4258,7 +4258,7 @@ Object {
                   fill="#0078d4"
                   height="245"
                   opacity=""
-                  role="img"
+                  role="option"
                   rx="0"
                   tabindex="0"
                   width="16"
@@ -4563,7 +4563,7 @@ Object {
                 fill="#00bcf2"
                 height="161.7"
                 opacity=""
-                role="img"
+                role="option"
                 rx="0"
                 tabindex="0"
                 width="16"
@@ -4576,7 +4576,7 @@ Object {
                 fill="#0078d4"
                 height="215.6"
                 opacity=""
-                role="img"
+                role="option"
                 rx="0"
                 tabindex="0"
                 width="16"
@@ -4613,7 +4613,7 @@ Object {
                 fill="#00bcf2"
                 height="161.7"
                 opacity=""
-                role="img"
+                role="option"
                 rx="0"
                 tabindex="0"
                 width="16"
@@ -4626,7 +4626,7 @@ Object {
                 fill="#0078d4"
                 height="14.700000000000017"
                 opacity=""
-                role="img"
+                role="option"
                 rx="0"
                 tabindex="0"
                 width="16"
@@ -4663,7 +4663,7 @@ Object {
                 fill="#00bcf2"
                 height="68.60000000000002"
                 opacity=""
-                role="img"
+                role="option"
                 rx="0"
                 tabindex="0"
                 width="16"
@@ -4676,7 +4676,7 @@ Object {
                 fill="#0078d4"
                 height="245"
                 opacity=""
-                role="img"
+                role="option"
                 rx="0"
                 tabindex="0"
                 width="16"
@@ -5061,7 +5061,7 @@ Object {
                   fill="#00bcf2"
                   height="161.7"
                   opacity=""
-                  role="img"
+                  role="option"
                   rx="0"
                   tabindex="0"
                   width="16"
@@ -5074,7 +5074,7 @@ Object {
                   fill="#0078d4"
                   height="215.6"
                   opacity=""
-                  role="img"
+                  role="option"
                   rx="0"
                   tabindex="0"
                   width="16"
@@ -5111,7 +5111,7 @@ Object {
                   fill="#00bcf2"
                   height="161.7"
                   opacity=""
-                  role="img"
+                  role="option"
                   rx="0"
                   tabindex="0"
                   width="16"
@@ -5124,7 +5124,7 @@ Object {
                   fill="#0078d4"
                   height="14.700000000000017"
                   opacity=""
-                  role="img"
+                  role="option"
                   rx="0"
                   tabindex="0"
                   width="16"
@@ -5161,7 +5161,7 @@ Object {
                   fill="#00bcf2"
                   height="68.60000000000002"
                   opacity=""
-                  role="img"
+                  role="option"
                   rx="0"
                   tabindex="0"
                   width="16"
@@ -5174,7 +5174,7 @@ Object {
                   fill="#0078d4"
                   height="245"
                   opacity=""
-                  role="img"
+                  role="option"
                   rx="0"
                   tabindex="0"
                   width="16"
@@ -5505,7 +5505,7 @@ Object {
                 fill="#00bcf2"
                 height="161.7"
                 opacity=""
-                role="img"
+                role="option"
                 rx="0"
                 tabindex="0"
                 width="16"
@@ -5518,7 +5518,7 @@ Object {
                 fill="#0078d4"
                 height="215.6"
                 opacity=""
-                role="img"
+                role="option"
                 rx="0"
                 tabindex="0"
                 width="16"
@@ -5555,7 +5555,7 @@ Object {
                 fill="#00bcf2"
                 height="161.7"
                 opacity=""
-                role="img"
+                role="option"
                 rx="0"
                 tabindex="0"
                 width="16"
@@ -5568,7 +5568,7 @@ Object {
                 fill="#0078d4"
                 height="14.700000000000017"
                 opacity=""
-                role="img"
+                role="option"
                 rx="0"
                 tabindex="0"
                 width="16"
@@ -5605,7 +5605,7 @@ Object {
                 fill="#00bcf2"
                 height="68.60000000000002"
                 opacity=""
-                role="img"
+                role="option"
                 rx="0"
                 tabindex="0"
                 width="16"
@@ -5618,7 +5618,7 @@ Object {
                 fill="#0078d4"
                 height="245"
                 opacity=""
-                role="img"
+                role="option"
                 rx="0"
                 tabindex="0"
                 width="16"
@@ -6064,7 +6064,7 @@ Object {
                   fill="#00bcf2"
                   height="1"
                   opacity=""
-                  role="img"
+                  role="option"
                   rx="0"
                   tabindex="0"
                   width="16"
@@ -6077,7 +6077,7 @@ Object {
                   fill="#0078d4"
                   height="1"
                   opacity=""
-                  role="img"
+                  role="option"
                   rx="0"
                   tabindex="0"
                   width="16"
@@ -6114,7 +6114,7 @@ Object {
                   fill="#00bcf2"
                   height="1"
                   opacity=""
-                  role="img"
+                  role="option"
                   rx="0"
                   tabindex="0"
                   width="16"
@@ -6127,7 +6127,7 @@ Object {
                   fill="#0078d4"
                   height="1"
                   opacity=""
-                  role="img"
+                  role="option"
                   rx="0"
                   tabindex="0"
                   width="16"
@@ -6164,7 +6164,7 @@ Object {
                   fill="#00bcf2"
                   height="1"
                   opacity=""
-                  role="img"
+                  role="option"
                   rx="0"
                   tabindex="0"
                   width="16"
@@ -6177,7 +6177,7 @@ Object {
                   fill="#0078d4"
                   height="1"
                   opacity=""
-                  role="img"
+                  role="option"
                   rx="0"
                   tabindex="0"
                   width="16"
@@ -6566,7 +6566,7 @@ Object {
                 fill="#00bcf2"
                 height="1"
                 opacity=""
-                role="img"
+                role="option"
                 rx="0"
                 tabindex="0"
                 width="16"
@@ -6579,7 +6579,7 @@ Object {
                 fill="#0078d4"
                 height="1"
                 opacity=""
-                role="img"
+                role="option"
                 rx="0"
                 tabindex="0"
                 width="16"
@@ -6616,7 +6616,7 @@ Object {
                 fill="#00bcf2"
                 height="1"
                 opacity=""
-                role="img"
+                role="option"
                 rx="0"
                 tabindex="0"
                 width="16"
@@ -6629,7 +6629,7 @@ Object {
                 fill="#0078d4"
                 height="1"
                 opacity=""
-                role="img"
+                role="option"
                 rx="0"
                 tabindex="0"
                 width="16"
@@ -6666,7 +6666,7 @@ Object {
                 fill="#00bcf2"
                 height="1"
                 opacity=""
-                role="img"
+                role="option"
                 rx="0"
                 tabindex="0"
                 width="16"
@@ -6679,7 +6679,7 @@ Object {
                 fill="#0078d4"
                 height="1"
                 opacity=""
-                role="img"
+                role="option"
                 rx="0"
                 tabindex="0"
                 width="16"
@@ -7050,7 +7050,7 @@ Object {
                   fill="#00bcf2"
                   height="161.7"
                   opacity=""
-                  role="img"
+                  role="option"
                   rx="0"
                   tabindex="0"
                   width="16"
@@ -7063,7 +7063,7 @@ Object {
                   fill="#0078d4"
                   height="215.6"
                   opacity=""
-                  role="img"
+                  role="option"
                   rx="0"
                   tabindex="0"
                   width="16"
@@ -7100,7 +7100,7 @@ Object {
                   fill="#00bcf2"
                   height="161.7"
                   opacity=""
-                  role="img"
+                  role="option"
                   rx="0"
                   tabindex="0"
                   width="16"
@@ -7113,7 +7113,7 @@ Object {
                   fill="#0078d4"
                   height="14.700000000000017"
                   opacity=""
-                  role="img"
+                  role="option"
                   rx="0"
                   tabindex="0"
                   width="16"
@@ -7150,7 +7150,7 @@ Object {
                   fill="#00bcf2"
                   height="68.60000000000002"
                   opacity=""
-                  role="img"
+                  role="option"
                   rx="0"
                   tabindex="0"
                   width="16"
@@ -7163,7 +7163,7 @@ Object {
                   fill="#0078d4"
                   height="245"
                   opacity=""
-                  role="img"
+                  role="option"
                   rx="0"
                   tabindex="0"
                   width="16"
@@ -7468,7 +7468,7 @@ Object {
                 fill="#00bcf2"
                 height="161.7"
                 opacity=""
-                role="img"
+                role="option"
                 rx="0"
                 tabindex="0"
                 width="16"
@@ -7481,7 +7481,7 @@ Object {
                 fill="#0078d4"
                 height="215.6"
                 opacity=""
-                role="img"
+                role="option"
                 rx="0"
                 tabindex="0"
                 width="16"
@@ -7518,7 +7518,7 @@ Object {
                 fill="#00bcf2"
                 height="161.7"
                 opacity=""
-                role="img"
+                role="option"
                 rx="0"
                 tabindex="0"
                 width="16"
@@ -7531,7 +7531,7 @@ Object {
                 fill="#0078d4"
                 height="14.700000000000017"
                 opacity=""
-                role="img"
+                role="option"
                 rx="0"
                 tabindex="0"
                 width="16"
@@ -7568,7 +7568,7 @@ Object {
                 fill="#00bcf2"
                 height="68.60000000000002"
                 opacity=""
-                role="img"
+                role="option"
                 rx="0"
                 tabindex="0"
                 width="16"
@@ -7581,7 +7581,7 @@ Object {
                 fill="#0078d4"
                 height="245"
                 opacity=""
-                role="img"
+                role="option"
                 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 8eff11e39d1338..265796bdc317f7 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,15 @@ export const HorizontalBarChart: React.FunctionComponent<HorizontalBarChartProps
             _showToolTipOnSegment && point.legend !== '' ? event => _hoverOn(event, xValue, point) : undefined
           }
           onFocus={_showToolTipOnSegment && point.legend !== '' ? event => _hoverOn(event, xValue, point) : undefined}
-          role="img"
-          aria-label={_getAriaLabel(point)}
+          role={index !== placeholderIndex ? 'option' : ''}
+          aria-label={index !== placeholderIndex ? _getAriaLabel(point) : undefined}
           onBlur={_hoverOff}
           onMouseLeave={_hoverOff}
           className={classes.barWrapper}
           opacity={isLegendSelected ? 1 : 0.1}
-          tabIndex={_legendHighlighted(point.legend!) || _noLegendHighlighted() ? 0 : undefined}
+          tabIndex={
+            index !== placeholderIndex && (_legendHighlighted(point.legend!) || _noLegendHighlighted()) ? 0 : undefined
+          }
         />
       );
     });
@@ -417,6 +419,7 @@ export const HorizontalBarChart: React.FunctionComponent<HorizontalBarChartProps
           props.variant === HorizontalBarChartVariant.AbsoluteScale ? null : _getChartDataText(points!);
         const bars = _createBars(points!);
         const keyVal = _uniqLineText + '_' + index;
+        const barGroupAriaLabel = `bar ${index + 1} of ${data!.length}.`;
         // ToDo - Showtriangle property is per data series. How to account for it in the new stylesheet
         /*         const classes = useHorizontalBarChartStyles(props.styles!, {
           width: props.width,
@@ -440,7 +443,9 @@ export const HorizontalBarChart: React.FunctionComponent<HorizontalBarChartProps
               {points!.chartData![0].data && _createBenchmark(points!)}
               <svg ref={barChartSvgRef} className={classes.chart} aria-label={points!.chartTitle}>
                 <g
+                  role="listbox"
                   id={keyVal}
+                  aria-label={barGroupAriaLabel}
                   ref={(e: SVGGElement) => {
                     _refCallback(e, points!.chartData![0].legend);
                   }}
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 b8ed93962b5c34..decd6bd0782edd 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
@@ -39,7 +39,9 @@ exports[`Horizontal bar chart - Screen resolution Should remain unchanged on zoo
           class="fui-hbc__chart"
         >
           <g
+            aria-label="bar 1 of 3."
             id="_HorizontalLine__r_2s__0"
+            role="listbox"
           >
             <rect
               aria-label="2020/04/30, 10%."
@@ -47,20 +49,18 @@ exports[`Horizontal bar chart - Screen resolution Should remain unchanged on zoo
               fill="#004b50"
               height="12"
               opacity="1"
-              role="img"
+              role="option"
               tabindex="0"
               width="10.286666666666665%"
               x="0%"
               y="0"
             />
             <rect
-              aria-label="13457/15000."
               class="fui-hbc__barWrapper"
               fill="var(--colorBackgroundOverlay)"
               height="12"
               opacity="1"
-              role="img"
-              tabindex="0"
+              role=""
               width="89.71333333333334%"
               x="10.286666666666665%"
               y="0"
@@ -103,7 +103,9 @@ exports[`Horizontal bar chart - Screen resolution Should remain unchanged on zoo
           class="fui-hbc__chart"
         >
           <g
+            aria-label="bar 2 of 3."
             id="_HorizontalLine__r_2s__1"
+            role="listbox"
           >
             <rect
               aria-label="2020/04/30, 5%."
@@ -111,20 +113,18 @@ exports[`Horizontal bar chart - Screen resolution Should remain unchanged on zoo
               fill="#5c2d91"
               height="12"
               opacity="1"
-              role="img"
+              role="option"
               tabindex="0"
               width="5.333333333333334%"
               x="0%"
               y="0"
             />
             <rect
-              aria-label="14200/15000."
               class="fui-hbc__barWrapper"
               fill="var(--colorBackgroundOverlay)"
               height="12"
               opacity="1"
-              role="img"
-              tabindex="0"
+              role=""
               width="94.66666666666667%"
               x="5.333333333333334%"
               y="0"
@@ -167,7 +167,9 @@ exports[`Horizontal bar chart - Screen resolution Should remain unchanged on zoo
           class="fui-hbc__chart"
         >
           <g
+            aria-label="bar 3 of 3."
             id="_HorizontalLine__r_2s__2"
+            role="listbox"
           >
             <rect
               aria-label="2020/04/30, 59%."
@@ -175,20 +177,18 @@ exports[`Horizontal bar chart - Screen resolution Should remain unchanged on zoo
               fill="#a4262c"
               height="12"
               opacity="1"
-              role="img"
+              role="option"
               tabindex="0"
               width="59.25333333333334%"
               x="0%"
               y="0"
             />
             <rect
-              aria-label="6112/15000."
               class="fui-hbc__barWrapper"
               fill="var(--colorBackgroundOverlay)"
               height="12"
               opacity="1"
-              role="img"
-              tabindex="0"
+              role=""
               width="40.74666666666666%"
               x="59.25333333333334%"
               y="0"
@@ -244,7 +244,9 @@ exports[`Horizontal bar chart - Screen resolution Should remain unchanged on zoo
           class="fui-hbc__chart"
         >
           <g
+            aria-label="bar 1 of 3."
             id="_HorizontalLine__r_32__0"
+            role="listbox"
           >
             <rect
               aria-label="2020/04/30, 10%."
@@ -252,20 +254,18 @@ exports[`Horizontal bar chart - Screen resolution Should remain unchanged on zoo
               fill="#004b50"
               height="12"
               opacity="1"
-              role="img"
+              role="option"
               tabindex="0"
               width="10.286666666666665%"
               x="0%"
               y="0"
             />
             <rect
-              aria-label="13457/15000."
               class="fui-hbc__barWrapper"
               fill="var(--colorBackgroundOverlay)"
               height="12"
               opacity="1"
-              role="img"
-              tabindex="0"
+              role=""
               width="89.71333333333334%"
               x="10.286666666666665%"
               y="0"
@@ -308,7 +308,9 @@ exports[`Horizontal bar chart - Screen resolution Should remain unchanged on zoo
           class="fui-hbc__chart"
         >
           <g
+            aria-label="bar 2 of 3."
             id="_HorizontalLine__r_32__1"
+            role="listbox"
           >
             <rect
               aria-label="2020/04/30, 5%."
@@ -316,20 +318,18 @@ exports[`Horizontal bar chart - Screen resolution Should remain unchanged on zoo
               fill="#5c2d91"
               height="12"
               opacity="1"
-              role="img"
+              role="option"
               tabindex="0"
               width="5.333333333333334%"
               x="0%"
               y="0"
             />
             <rect
-              aria-label="14200/15000."
               class="fui-hbc__barWrapper"
               fill="var(--colorBackgroundOverlay)"
               height="12"
               opacity="1"
-              role="img"
-              tabindex="0"
+              role=""
               width="94.66666666666667%"
               x="5.333333333333334%"
               y="0"
@@ -372,7 +372,9 @@ exports[`Horizontal bar chart - Screen resolution Should remain unchanged on zoo
           class="fui-hbc__chart"
         >
           <g
+            aria-label="bar 3 of 3."
             id="_HorizontalLine__r_32__2"
+            role="listbox"
           >
             <rect
               aria-label="2020/04/30, 59%."
@@ -380,20 +382,18 @@ exports[`Horizontal bar chart - Screen resolution Should remain unchanged on zoo
               fill="#a4262c"
               height="12"
               opacity="1"
-              role="img"
+              role="option"
               tabindex="0"
               width="59.25333333333334%"
               x="0%"
               y="0"
             />
             <rect
-              aria-label="6112/15000."
               class="fui-hbc__barWrapper"
               fill="var(--colorBackgroundOverlay)"
               height="12"
               opacity="1"
-              role="img"
-              tabindex="0"
+              role=""
               width="40.74666666666666%"
               x="59.25333333333334%"
               y="0"
@@ -453,7 +453,9 @@ exports[`Horizontal bar chart - Theme Should reflect theme change 1`] = `
             class="fui-hbc__chart"
           >
             <g
+              aria-label="bar 1 of 3."
               id="_HorizontalLine__r_39__0"
+              role="listbox"
             >
               <rect
                 aria-label="2020/04/30, 10%."
@@ -461,20 +463,18 @@ exports[`Horizontal bar chart - Theme Should reflect theme change 1`] = `
                 fill="#004b50"
                 height="12"
                 opacity="1"
-                role="img"
+                role="option"
                 tabindex="0"
                 width="10.286666666666665%"
                 x="0%"
                 y="0"
               />
               <rect
-                aria-label="13457/15000."
                 class="fui-hbc__barWrapper"
                 fill="var(--colorBackgroundOverlay)"
                 height="12"
                 opacity="1"
-                role="img"
-                tabindex="0"
+                role=""
                 width="89.71333333333334%"
                 x="10.286666666666665%"
                 y="0"
@@ -517,7 +517,9 @@ exports[`Horizontal bar chart - Theme Should reflect theme change 1`] = `
             class="fui-hbc__chart"
           >
             <g
+              aria-label="bar 2 of 3."
               id="_HorizontalLine__r_39__1"
+              role="listbox"
             >
               <rect
                 aria-label="2020/04/30, 5%."
@@ -525,20 +527,18 @@ exports[`Horizontal bar chart - Theme Should reflect theme change 1`] = `
                 fill="#5c2d91"
                 height="12"
                 opacity="1"
-                role="img"
+                role="option"
                 tabindex="0"
                 width="5.333333333333334%"
                 x="0%"
                 y="0"
               />
               <rect
-                aria-label="14200/15000."
                 class="fui-hbc__barWrapper"
                 fill="var(--colorBackgroundOverlay)"
                 height="12"
                 opacity="1"
-                role="img"
-                tabindex="0"
+                role=""
                 width="94.66666666666667%"
                 x="5.333333333333334%"
                 y="0"
@@ -581,7 +581,9 @@ exports[`Horizontal bar chart - Theme Should reflect theme change 1`] = `
             class="fui-hbc__chart"
           >
             <g
+              aria-label="bar 3 of 3."
               id="_HorizontalLine__r_39__2"
+              role="listbox"
             >
               <rect
                 aria-label="2020/04/30, 59%."
@@ -589,20 +591,18 @@ exports[`Horizontal bar chart - Theme Should reflect theme change 1`] = `
                 fill="#a4262c"
                 height="12"
                 opacity="1"
-                role="img"
+                role="option"
                 tabindex="0"
                 width="59.25333333333334%"
                 x="0%"
                 y="0"
               />
               <rect
-                aria-label="6112/15000."
                 class="fui-hbc__barWrapper"
                 fill="var(--colorBackgroundOverlay)"
                 height="12"
                 opacity="1"
-                role="img"
-                tabindex="0"
+                role=""
                 width="40.74666666666666%"
                 x="59.25333333333334%"
                 y="0"
@@ -671,7 +671,9 @@ exports[`Horizontal bar chart re-rendering Should re-render the Horizontal bar c
           class="fui-hbc__chart"
         >
           <g
+            aria-label="bar 1 of 3."
             id="_HorizontalLine__r_3f__0"
+            role="listbox"
           >
             <rect
               aria-label="2020/04/30, 10%."
@@ -679,20 +681,18 @@ exports[`Horizontal bar chart re-rendering Should re-render the Horizontal bar c
               fill="#004b50"
               height="12"
               opacity="1"
-              role="img"
+              role="option"
               tabindex="0"
               width="10.286666666666665%"
               x="0%"
               y="0"
             />
             <rect
-              aria-label="13457/15000."
               class="fui-hbc__barWrapper"
               fill="var(--colorBackgroundOverlay)"
               height="12"
               opacity="1"
-              role="img"
-              tabindex="0"
+              role=""
               width="89.71333333333334%"
               x="10.286666666666665%"
               y="0"
@@ -735,7 +735,9 @@ exports[`Horizontal bar chart re-rendering Should re-render the Horizontal bar c
           class="fui-hbc__chart"
         >
           <g
+            aria-label="bar 2 of 3."
             id="_HorizontalLine__r_3f__1"
+            role="listbox"
           >
             <rect
               aria-label="2020/04/30, 5%."
@@ -743,20 +745,18 @@ exports[`Horizontal bar chart re-rendering Should re-render the Horizontal bar c
               fill="#5c2d91"
               height="12"
               opacity="1"
-              role="img"
+              role="option"
               tabindex="0"
               width="5.333333333333334%"
               x="0%"
               y="0"
             />
             <rect
-              aria-label="14200/15000."
               class="fui-hbc__barWrapper"
               fill="var(--colorBackgroundOverlay)"
               height="12"
               opacity="1"
-              role="img"
-              tabindex="0"
+              role=""
               width="94.66666666666667%"
               x="5.333333333333334%"
               y="0"
@@ -799,7 +799,9 @@ exports[`Horizontal bar chart re-rendering Should re-render the Horizontal bar c
           class="fui-hbc__chart"
         >
           <g
+            aria-label="bar 3 of 3."
             id="_HorizontalLine__r_3f__2"
+            role="listbox"
           >
             <rect
               aria-label="2020/04/30, 59%."
@@ -807,20 +809,18 @@ exports[`Horizontal bar chart re-rendering Should re-render the Horizontal bar c
               fill="#a4262c"
               height="12"
               opacity="1"
-              role="img"
+              role="option"
               tabindex="0"
               width="59.25333333333334%"
               x="0%"
               y="0"
             />
             <rect
-              aria-label="6112/15000."
               class="fui-hbc__barWrapper"
               fill="var(--colorBackgroundOverlay)"
               height="12"
               opacity="1"
-              role="img"
-              tabindex="0"
+              role=""
               width="40.74666666666666%"
               x="59.25333333333334%"
               y="0"
@@ -869,7 +869,9 @@ exports[`Horizontal bar chart rendering Should render HorizontalBarChart for row
           class="fui-hbc__chart"
         >
           <g
+            aria-label="bar 1 of 1."
             id="_HorizontalLine__r_6__0"
+            role="listbox"
           >
             <rect
               aria-label="one.one, 10/100."
@@ -877,20 +879,18 @@ exports[`Horizontal bar chart rendering Should render HorizontalBarChart for row
               fill="#004b50"
               height="12"
               opacity="1"
-              role="img"
+              role="option"
               tabindex="0"
               width="10%"
               x="0%"
               y="0"
             />
             <rect
-              aria-label="one.two, 90/100."
               class="fui-hbc__barWrapper"
               fill="#a4262c"
               height="12"
               opacity="1"
-              role="img"
-              tabindex="0"
+              role=""
               width="90%"
               x="10%"
               y="0"
@@ -1015,7 +1015,9 @@ exports[`Horizontal bar chart rendering Should render HorizontalBarChart for row
           class="fui-hbc__chart"
         >
           <g
+            aria-label="bar 1 of 1."
             id="_HorizontalLine__r_a__0"
+            role="listbox"
           >
             <rect
               aria-label="two.one, 30/200."
@@ -1023,20 +1025,18 @@ exports[`Horizontal bar chart rendering Should render HorizontalBarChart for row
               fill="#5c2d91"
               height="12"
               opacity="1"
-              role="img"
+              role="option"
               tabindex="0"
               width="15%"
               x="0%"
               y="0"
             />
             <rect
-              aria-label="two.two, 170/200."
               class="fui-hbc__barWrapper"
               fill="#a4262c"
               height="12"
               opacity="1"
-              role="img"
-              tabindex="0"
+              role=""
               width="85%"
               x="15%"
               y="0"
@@ -1168,7 +1168,9 @@ exports[`Horizontal bar chart rendering Should render the Horizontal bar chart l
           class="fui-hbc__chart"
         >
           <g
+            aria-label="bar 1 of 3."
             id="_HorizontalLine__r_0__0"
+            role="listbox"
           >
             <rect
               aria-label="2020/04/30, 10%."
@@ -1176,20 +1178,18 @@ exports[`Horizontal bar chart rendering Should render the Horizontal bar chart l
               fill="#004b50"
               height="12"
               opacity="1"
-              role="img"
+              role="option"
               tabindex="0"
               width="10.286666666666665%"
               x="0%"
               y="0"
             />
             <rect
-              aria-label="13457/15000."
               class="fui-hbc__barWrapper"
               fill="var(--colorBackgroundOverlay)"
               height="12"
               opacity="1"
-              role="img"
-              tabindex="0"
+              role=""
               width="89.71333333333334%"
               x="10.286666666666665%"
               y="0"
@@ -1232,7 +1232,9 @@ exports[`Horizontal bar chart rendering Should render the Horizontal bar chart l
           class="fui-hbc__chart"
         >
           <g
+            aria-label="bar 2 of 3."
             id="_HorizontalLine__r_0__1"
+            role="listbox"
           >
             <rect
               aria-label="2020/04/30, 5%."
@@ -1240,20 +1242,18 @@ exports[`Horizontal bar chart rendering Should render the Horizontal bar chart l
               fill="#5c2d91"
               height="12"
               opacity="1"
-              role="img"
+              role="option"
               tabindex="0"
               width="5.333333333333334%"
               x="0%"
               y="0"
             />
             <rect
-              aria-label="14200/15000."
               class="fui-hbc__barWrapper"
               fill="var(--colorBackgroundOverlay)"
               height="12"
               opacity="1"
-              role="img"
-              tabindex="0"
+              role=""
               width="94.66666666666667%"
               x="5.333333333333334%"
               y="0"
@@ -1296,7 +1296,9 @@ exports[`Horizontal bar chart rendering Should render the Horizontal bar chart l
           class="fui-hbc__chart"
         >
           <g
+            aria-label="bar 3 of 3."
             id="_HorizontalLine__r_0__2"
+            role="listbox"
           >
             <rect
               aria-label="2020/04/30, 59%."
@@ -1304,20 +1306,18 @@ exports[`Horizontal bar chart rendering Should render the Horizontal bar chart l
               fill="#a4262c"
               height="12"
               opacity="1"
-              role="img"
+              role="option"
               tabindex="0"
               width="59.25333333333334%"
               x="0%"
               y="0"
             />
             <rect
-              aria-label="6112/15000."
               class="fui-hbc__barWrapper"
               fill="var(--colorBackgroundOverlay)"
               height="12"
               opacity="1"
-              role="img"
-              tabindex="0"
+              role=""
               width="40.74666666666666%"
               x="59.25333333333334%"
               y="0"
@@ -1371,7 +1371,9 @@ Object {
               class="fui-hbc__chart"
             >
               <g
+                aria-label="bar 1 of 3."
                 id="_HorizontalLine__r_41__0"
+                role="listbox"
               >
                 <rect
                   aria-label="2020/04/30, 10%."
@@ -1379,7 +1381,7 @@ Object {
                   fill="#004b50"
                   height="12"
                   opacity="1"
-                  role="img"
+                  role="option"
                   tabindex="0"
                   width="10.286666666666665%"
                   x="0%"
@@ -1417,7 +1419,9 @@ Object {
               class="fui-hbc__chart"
             >
               <g
+                aria-label="bar 2 of 3."
                 id="_HorizontalLine__r_41__1"
+                role="listbox"
               >
                 <rect
                   aria-label="2020/04/30, 5%."
@@ -1425,7 +1429,7 @@ Object {
                   fill="#5c2d91"
                   height="12"
                   opacity="1"
-                  role="img"
+                  role="option"
                   tabindex="0"
                   width="5.333333333333334%"
                   x="0%"
@@ -1463,7 +1467,9 @@ Object {
               class="fui-hbc__chart"
             >
               <g
+                aria-label="bar 3 of 3."
                 id="_HorizontalLine__r_41__2"
+                role="listbox"
               >
                 <rect
                   aria-label="2020/04/30, 59%."
@@ -1471,7 +1477,7 @@ Object {
                   fill="#a4262c"
                   height="12"
                   opacity="1"
-                  role="img"
+                  role="option"
                   tabindex="0"
                   width="59.25333333333334%"
                   x="0%"
@@ -1568,7 +1574,9 @@ Object {
             class="fui-hbc__chart"
           >
             <g
+              aria-label="bar 1 of 3."
               id="_HorizontalLine__r_41__0"
+              role="listbox"
             >
               <rect
                 aria-label="2020/04/30, 10%."
@@ -1576,7 +1584,7 @@ Object {
                 fill="#004b50"
                 height="12"
                 opacity="1"
-                role="img"
+                role="option"
                 tabindex="0"
                 width="10.286666666666665%"
                 x="0%"
@@ -1614,7 +1622,9 @@ Object {
             class="fui-hbc__chart"
           >
             <g
+              aria-label="bar 2 of 3."
               id="_HorizontalLine__r_41__1"
+              role="listbox"
             >
               <rect
                 aria-label="2020/04/30, 5%."
@@ -1622,7 +1632,7 @@ Object {
                 fill="#5c2d91"
                 height="12"
                 opacity="1"
-                role="img"
+                role="option"
                 tabindex="0"
                 width="5.333333333333334%"
                 x="0%"
@@ -1660,7 +1670,9 @@ Object {
             class="fui-hbc__chart"
           >
             <g
+              aria-label="bar 3 of 3."
               id="_HorizontalLine__r_41__2"
+              role="listbox"
             >
               <rect
                 aria-label="2020/04/30, 59%."
@@ -1668,7 +1680,7 @@ Object {
                 fill="#a4262c"
                 height="12"
                 opacity="1"
-                role="img"
+                role="option"
                 tabindex="0"
                 width="59.25333333333334%"
                 x="0%"
@@ -1776,7 +1788,9 @@ Object {
               class="fui-hbc__chart"
             >
               <g
+                aria-label="bar 1 of 3."
                 id="_HorizontalLine__r_3r__0"
+                role="listbox"
               >
                 <rect
                   aria-label="2020/04/30, 10%."
@@ -1784,7 +1798,7 @@ Object {
                   fill="#004b50"
                   height="12"
                   opacity="1"
-                  role="img"
+                  role="option"
                   tabindex="0"
                   width="10.286666666666665%"
                   x="0%"
@@ -1831,7 +1845,9 @@ Object {
               class="fui-hbc__chart"
             >
               <g
+                aria-label="bar 2 of 3."
                 id="_HorizontalLine__r_3r__1"
+                role="listbox"
               >
                 <rect
                   aria-label="2020/04/30, 5%."
@@ -1839,7 +1855,7 @@ Object {
                   fill="#5c2d91"
                   height="12"
                   opacity="1"
-                  role="img"
+                  role="option"
                   tabindex="0"
                   width="5.333333333333334%"
                   x="0%"
@@ -1886,7 +1902,9 @@ Object {
               class="fui-hbc__chart"
             >
               <g
+                aria-label="bar 3 of 3."
                 id="_HorizontalLine__r_3r__2"
+                role="listbox"
               >
                 <rect
                   aria-label="2020/04/30, 59%."
@@ -1894,7 +1912,7 @@ Object {
                   fill="#a4262c"
                   height="12"
                   opacity="1"
-                  role="img"
+                  role="option"
                   tabindex="0"
                   width="59.25333333333334%"
                   x="0%"
@@ -2000,7 +2018,9 @@ Object {
             class="fui-hbc__chart"
           >
             <g
+              aria-label="bar 1 of 3."
               id="_HorizontalLine__r_3r__0"
+              role="listbox"
             >
               <rect
                 aria-label="2020/04/30, 10%."
@@ -2008,7 +2028,7 @@ Object {
                 fill="#004b50"
                 height="12"
                 opacity="1"
-                role="img"
+                role="option"
                 tabindex="0"
                 width="10.286666666666665%"
                 x="0%"
@@ -2055,7 +2075,9 @@ Object {
             class="fui-hbc__chart"
           >
             <g
+              aria-label="bar 2 of 3."
               id="_HorizontalLine__r_3r__1"
+              role="listbox"
             >
               <rect
                 aria-label="2020/04/30, 5%."
@@ -2063,7 +2085,7 @@ Object {
                 fill="#5c2d91"
                 height="12"
                 opacity="1"
-                role="img"
+                role="option"
                 tabindex="0"
                 width="5.333333333333334%"
                 x="0%"
@@ -2110,7 +2132,9 @@ Object {
             class="fui-hbc__chart"
           >
             <g
+              aria-label="bar 3 of 3."
               id="_HorizontalLine__r_3r__2"
+              role="listbox"
             >
               <rect
                 aria-label="2020/04/30, 59%."
@@ -2118,7 +2142,7 @@ Object {
                 fill="#a4262c"
                 height="12"
                 opacity="1"
-                role="img"
+                role="option"
                 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 9d1526073fc9c2..391d9c65d0a560 100644
--- a/packages/charts/react-charts/library/src/components/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.tsx
+++ b/packages/charts/react-charts/library/src/components/HorizontalBarChartWithAxis/HorizontalBarChartWithAxis.tsx
@@ -184,8 +184,8 @@ export const HorizontalBarChartWithAxis: React.FunctionComponent<HorizontalBarCh
     let allBars: JSXElement[] = [];
     // when the chart mounts, the xRange[1] is sometimes seen to be < 0 (like -40) while xRange[0] > 0.
     if (xRange[0] < xRange[1]) {
-      allBars = stackedChartData
-        .map(singleBarData =>
+      allBars = stackedChartData.map((singleBarData, groupIndex) => {
+        const groupBars =
           _yAxisType === YAxisType.NumericAxis
             ? _createNumericBars(
                 containerHeight,
@@ -204,9 +204,18 @@ export const HorizontalBarChartWithAxis: React.FunctionComponent<HorizontalBarCh
                 singleBarData,
                 xBarScale,
                 yBarScale,
-              ),
-        )
-        .flat();
+              );
+
+        return (
+          <g
+            key={`bar-group-${groupIndex}`}
+            role="listbox"
+            aria-label={_getBarGroupAriaLabel(singleBarData, groupIndex)}
+          >
+            {groupBars}
+          </g>
+        );
+      });
     }
 
     return (_bars = allBars);
@@ -471,7 +480,7 @@ export const HorizontalBarChartWithAxis: React.FunctionComponent<HorizontalBarCh
             onClick={point.onClick}
             onMouseOver={(event: React.MouseEvent<SVGElement, MouseEvent>) => _onBarHover(point, startColor, event)}
             aria-label={_getAriaLabel(point)}
-            role="img"
+            role="option"
             aria-labelledby={`toolTip${_calloutId}`}
             onMouseLeave={_onBarLeave}
             onFocus={event => _onBarFocus(event, point, index, startColor)}
@@ -646,7 +655,7 @@ export const HorizontalBarChartWithAxis: React.FunctionComponent<HorizontalBarCh
             height={_barHeight}
             aria-labelledby={`toolTip${_calloutId}`}
             aria-label={_getAriaLabel(point)}
-            role="img"
+            role="option"
             ref={(e: SVGRectElement) => {
               _refCallback(e, point.legend!);
             }}
@@ -771,6 +780,11 @@ export const HorizontalBarChartWithAxis: React.FunctionComponent<HorizontalBarCh
     return point.callOutAccessibilityData?.ariaLabel || `${yValue}. ` + (legend ? `${legend}, ` : '') + `${xValue}.`;
   }
 
+  function _getBarGroupAriaLabel(singleBarData: HorizontalBarChartWithAxisDataPoint[], groupIndex: number): string {
+    const yGroupLabel = singleBarData[0]?.y?.toString() || `Group ${groupIndex + 1}`;
+    return `${yGroupLabel}, bar group ${groupIndex + 1} of ${_yAxisLabels.length}, with ${singleBarData.length} bars.`;
+  }
+
   function _renderBarLabel(
     xPosition: number,
     yPosition: number,
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 bfa3a8bc4fdb3f..848f19fc391958 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
@@ -329,106 +329,126 @@ exports[`Horizontal bar chart with axis rendering Should render the Horizontal b
           </g>
         </g>
         <g>
-          <rect
-            aria-label="2020/04/30. Oranges, 10%."
-            aria-labelledby="toolTipcallout_r_0_"
-            fill="#0078d4"
-            height="16"
-            opacity="1"
-            role="img"
-            rx="0"
-            tabindex="0"
-            width="147.5"
-            x="40"
-            y="219.7"
-          />
-          <text
-            aria-hidden="true"
-            class="fui-hbcwa__barLabel"
-            dominant-baseline="central"
-            style="direction: ltr; unicode-bidi: isolate;"
-            text-anchor="start"
-            transform="translate(4)"
-            x="187.5"
-            y="227.7"
+          <g
+            aria-label="5000, bar group 1 of 4, with 1 bars."
+            role="listbox"
           >
-            10k
-          </text>
-          <rect
-            aria-label="2020/04/30. Bananas, 88%."
-            aria-labelledby="toolTipcallout_r_0_"
-            fill="#002050"
-            height="16"
-            opacity="1"
-            role="img"
-            rx="0"
-            tabindex="0"
-            width="590"
-            x="40"
-            y="185.62"
-          />
-          <text
-            aria-hidden="true"
-            class="fui-hbcwa__barLabel"
-            dominant-baseline="central"
-            style="direction: ltr; unicode-bidi: isolate;"
-            text-anchor="start"
-            transform="translate(4)"
-            x="630"
-            y="193.62"
+            <rect
+              aria-label="2020/04/30. Oranges, 10%."
+              aria-labelledby="toolTipcallout_r_0_"
+              fill="#0078d4"
+              height="16"
+              opacity="1"
+              role="option"
+              rx="0"
+              tabindex="0"
+              width="147.5"
+              x="40"
+              y="219.7"
+            />
+            <text
+              aria-hidden="true"
+              class="fui-hbcwa__barLabel"
+              dominant-baseline="central"
+              style="direction: ltr; unicode-bidi: isolate;"
+              text-anchor="start"
+              transform="translate(4)"
+              x="187.5"
+              y="227.7"
+            >
+              10k
+            </text>
+          </g>
+          <g
+            aria-label="13000, bar group 2 of 4, with 1 bars."
+            role="listbox"
           >
-            40k
-          </text>
-          <rect
-            aria-label="2020/04/30. Apples, 37%."
-            aria-labelledby="toolTipcallout_r_0_"
-            fill="#00188f"
-            height="16"
-            opacity="1"
-            role="img"
-            rx="0"
-            tabindex="0"
-            width="368.75"
-            x="40"
-            y="113.2"
-          />
-          <text
-            aria-hidden="true"
-            class="fui-hbcwa__barLabel"
-            dominant-baseline="central"
-            style="direction: ltr; unicode-bidi: isolate;"
-            text-anchor="start"
-            transform="translate(4)"
-            x="408.75"
-            y="121.2"
+            <rect
+              aria-label="2020/04/30. Bananas, 88%."
+              aria-labelledby="toolTipcallout_r_0_"
+              fill="#002050"
+              height="16"
+              opacity="1"
+              role="option"
+              rx="0"
+              tabindex="0"
+              width="590"
+              x="40"
+              y="185.62"
+            />
+            <text
+              aria-hidden="true"
+              class="fui-hbcwa__barLabel"
+              dominant-baseline="central"
+              style="direction: ltr; unicode-bidi: isolate;"
+              text-anchor="start"
+              transform="translate(4)"
+              x="630"
+              y="193.62"
+            >
+              40k
+            </text>
+          </g>
+          <g
+            aria-label="30000, bar group 3 of 4, with 1 bars."
+            role="listbox"
           >
-            25k
-          </text>
-          <rect
-            aria-label="2020/04/30. Grapes, 20%."
-            aria-labelledby="toolTipcallout_r_0_"
-            fill="#00bcf2"
-            height="16"
-            opacity="1"
-            role="img"
-            rx="0"
-            tabindex="0"
-            width="295"
-            x="40"
-            y="28"
-          />
-          <text
-            aria-hidden="true"
-            class="fui-hbcwa__barLabel"
-            dominant-baseline="central"
-            style="direction: ltr; unicode-bidi: isolate;"
-            text-anchor="start"
-            transform="translate(4)"
-            x="335"
-            y="36"
+            <rect
+              aria-label="2020/04/30. Apples, 37%."
+              aria-labelledby="toolTipcallout_r_0_"
+              fill="#00188f"
+              height="16"
+              opacity="1"
+              role="option"
+              rx="0"
+              tabindex="0"
+              width="368.75"
+              x="40"
+              y="113.2"
+            />
+            <text
+              aria-hidden="true"
+              class="fui-hbcwa__barLabel"
+              dominant-baseline="central"
+              style="direction: ltr; unicode-bidi: isolate;"
+              text-anchor="start"
+              transform="translate(4)"
+              x="408.75"
+              y="121.2"
+            >
+              25k
+            </text>
+          </g>
+          <g
+            aria-label="50000, bar group 4 of 4, with 1 bars."
+            role="listbox"
           >
-            20k
-          </text>
+            <rect
+              aria-label="2020/04/30. Grapes, 20%."
+              aria-labelledby="toolTipcallout_r_0_"
+              fill="#00bcf2"
+              height="16"
+              opacity="1"
+              role="option"
+              rx="0"
+              tabindex="0"
+              width="295"
+              x="40"
+              y="28"
+            />
+            <text
+              aria-hidden="true"
+              class="fui-hbcwa__barLabel"
+              dominant-baseline="central"
+              style="direction: ltr; unicode-bidi: isolate;"
+              text-anchor="start"
+              transform="translate(4)"
+              x="335"
+              y="36"
+            >
+              20k
+            </text>
+          </g>
         </g>
       </svg>
     </div>
@@ -856,110 +876,130 @@ exports[`Horizontal bar chart with axis rendering Should render the Horizontal b
           </g>
         </g>
         <g>
-          <rect
-            aria-label="String One. 1000."
-            aria-labelledby="toolTipcallout_r_4_"
-            fill="#0078d4"
-            height="32.714285714285715"
-            opacity="1"
-            role="img"
-            rx="0"
-            tabindex="0"
-            transform="translate(0,-3.634920634920636)"
-            width="118"
-            x="40"
-            y="206.11111111111111"
-          />
-          <text
-            aria-hidden="true"
-            class="fui-hbcwa__barLabel"
-            dominant-baseline="central"
-            style="direction: ltr; unicode-bidi: isolate;"
-            text-anchor="start"
-            transform="translate(4)"
-            x="158"
-            y="218.83333333333334"
+          <g
+            aria-label="String One, bar group 1 of 4, with 1 bars."
+            role="listbox"
           >
-            1k
-          </text>
-          <rect
-            aria-label="String Two. 5000."
-            aria-labelledby="toolTipcallout_r_4_"
-            fill="#00bcf2"
-            height="32.714285714285715"
-            opacity="1"
-            role="img"
-            rx="0"
-            tabindex="0"
-            transform="translate(0,-3.634920634920636)"
-            width="590"
-            x="40"
-            y="155.22222222222223"
-          />
-          <text
-            aria-hidden="true"
-            class="fui-hbcwa__barLabel"
-            dominant-baseline="central"
-            style="direction: ltr; unicode-bidi: isolate;"
-            text-anchor="start"
-            transform="translate(4)"
-            x="630"
-            y="167.94444444444446"
+            <rect
+              aria-label="String One. 1000."
+              aria-labelledby="toolTipcallout_r_4_"
+              fill="#0078d4"
+              height="32.714285714285715"
+              opacity="1"
+              role="option"
+              rx="0"
+              tabindex="0"
+              transform="translate(0,-3.634920634920636)"
+              width="118"
+              x="40"
+              y="206.11111111111111"
+            />
+            <text
+              aria-hidden="true"
+              class="fui-hbcwa__barLabel"
+              dominant-baseline="central"
+              style="direction: ltr; unicode-bidi: isolate;"
+              text-anchor="start"
+              transform="translate(4)"
+              x="158"
+              y="218.83333333333334"
+            >
+              1k
+            </text>
+          </g>
+          <g
+            aria-label="String Two, bar group 2 of 4, with 1 bars."
+            role="listbox"
           >
-            5k
-          </text>
-          <rect
-            aria-label="String Three. 3000."
-            aria-labelledby="toolTipcallout_r_4_"
-            fill="#00188f"
-            height="32.714285714285715"
-            opacity="1"
-            role="img"
-            rx="0"
-            tabindex="0"
-            transform="translate(0,-3.634920634920636)"
-            width="354"
-            x="40"
-            y="104.33333333333334"
-          />
-          <text
-            aria-hidden="true"
-            class="fui-hbcwa__barLabel"
-            dominant-baseline="central"
-            style="direction: ltr; unicode-bidi: isolate;"
-            text-anchor="start"
-            transform="translate(4)"
-            x="394"
-            y="117.05555555555557"
+            <rect
+              aria-label="String Two. 5000."
+              aria-labelledby="toolTipcallout_r_4_"
+              fill="#00bcf2"
+              height="32.714285714285715"
+              opacity="1"
+              role="option"
+              rx="0"
+              tabindex="0"
+              transform="translate(0,-3.634920634920636)"
+              width="590"
+              x="40"
+              y="155.22222222222223"
+            />
+            <text
+              aria-hidden="true"
+              class="fui-hbcwa__barLabel"
+              dominant-baseline="central"
+              style="direction: ltr; unicode-bidi: isolate;"
+              text-anchor="start"
+              transform="translate(4)"
+              x="630"
+              y="167.94444444444446"
+            >
+              5k
+            </text>
+          </g>
+          <g
+            aria-label="String Three, bar group 3 of 4, with 1 bars."
+            role="listbox"
           >
-            3k
-          </text>
-          <rect
-            aria-label="String Four. 2000."
-            aria-labelledby="toolTipcallout_r_4_"
-            fill="#002050"
-            height="32.714285714285715"
-            opacity="1"
-            role="img"
-            rx="0"
-            tabindex="0"
-            transform="translate(0,-3.634920634920636)"
-            width="236"
-            x="40"
-            y="53.44444444444446"
-          />
-          <text
-            aria-hidden="true"
-            class="fui-hbcwa__barLabel"
-            dominant-baseline="central"
-            style="direction: ltr; unicode-bidi: isolate;"
-            text-anchor="start"
-            transform="translate(4)"
-            x="276"
-            y="66.16666666666669"
+            <rect
+              aria-label="String Three. 3000."
+              aria-labelledby="toolTipcallout_r_4_"
+              fill="#00188f"
+              height="32.714285714285715"
+              opacity="1"
+              role="option"
+              rx="0"
+              tabindex="0"
+              transform="translate(0,-3.634920634920636)"
+              width="354"
+              x="40"
+              y="104.33333333333334"
+            />
+            <text
+              aria-hidden="true"
+              class="fui-hbcwa__barLabel"
+              dominant-baseline="central"
+              style="direction: ltr; unicode-bidi: isolate;"
+              text-anchor="start"
+              transform="translate(4)"
+              x="394"
+              y="117.05555555555557"
+            >
+              3k
+            </text>
+          </g>
+          <g
+            aria-label="String Four, bar group 4 of 4, with 1 bars."
+            role="listbox"
           >
-            2k
-          </text>
+            <rect
+              aria-label="String Four. 2000."
+              aria-labelledby="toolTipcallout_r_4_"
+              fill="#002050"
+              height="32.714285714285715"
+              opacity="1"
+              role="option"
+              rx="0"
+              tabindex="0"
+              transform="translate(0,-3.634920634920636)"
+              width="236"
+              x="40"
+              y="53.44444444444446"
+            />
+            <text
+              aria-hidden="true"
+              class="fui-hbcwa__barLabel"
+              dominant-baseline="central"
+              style="direction: ltr; unicode-bidi: isolate;"
+              text-anchor="start"
+              transform="translate(4)"
+              x="276"
+              y="66.16666666666669"
+            >
+              2k
+            </text>
+          </g>
         </g>
       </svg>
     </div>
@@ -1337,106 +1377,126 @@ Object {
               </g>
             </g>
             <g>
-              <rect
-                aria-label="2020/04/30. Oranges, 10%."
-                aria-labelledby="toolTipcallout_r_2e_"
-                fill="#0078d4"
-                height="16"
-                opacity="1"
-                role="img"
-                rx="0"
-                tabindex="0"
-                width="147.5"
-                x="40"
-                y="219.7"
-              />
-              <text
-                aria-hidden="true"
-                class="fui-hbcwa__barLabel"
-                dominant-baseline="central"
-                style="direction: ltr; unicode-bidi: isolate;"
-                text-anchor="start"
-                transform="translate(4)"
-                x="187.5"
-                y="227.7"
-              >
-                10k
-              </text>
-              <rect
-                aria-label="2020/04/30. Bananas, 88%."
-                aria-labelledby="toolTipcallout_r_2e_"
-                fill="#002050"
-                height="16"
-                opacity="1"
-                role="img"
-                rx="0"
-                tabindex="0"
-                width="590"
-                x="40"
-                y="185.62"
-              />
-              <text
-                aria-hidden="true"
-                class="fui-hbcwa__barLabel"
-                dominant-baseline="central"
-                style="direction: ltr; unicode-bidi: isolate;"
-                text-anchor="start"
-                transform="translate(4)"
-                x="630"
-                y="193.62"
-              >
-                40k
-              </text>
-              <rect
-                aria-label="2020/04/30. Apples, 37%."
-                aria-labelledby="toolTipcallout_r_2e_"
-                fill="#00188f"
-                height="16"
-                opacity="1"
-                role="img"
-                rx="0"
-                tabindex="0"
-                width="368.75"
-                x="40"
-                y="113.2"
-              />
-              <text
-                aria-hidden="true"
-                class="fui-hbcwa__barLabel"
-                dominant-baseline="central"
-                style="direction: ltr; unicode-bidi: isolate;"
-                text-anchor="start"
-                transform="translate(4)"
-                x="408.75"
-                y="121.2"
-              >
-                25k
-              </text>
-              <rect
-                aria-label="2020/04/30. Grapes, 20%."
-                aria-labelledby="toolTipcallout_r_2e_"
-                fill="#00bcf2"
-                height="16"
-                opacity="1"
-                role="img"
-                rx="0"
-                tabindex="0"
-                width="295"
-                x="40"
-                y="28"
-              />
-              <text
-                aria-hidden="true"
-                class="fui-hbcwa__barLabel"
-                dominant-baseline="central"
-                style="direction: ltr; unicode-bidi: isolate;"
-                text-anchor="start"
-                transform="translate(4)"
-                x="335"
-                y="36"
-              >
-                20k
-              </text>
+              <g
+                aria-label="5000, bar group 1 of 4, with 1 bars."
+                role="listbox"
+              >
+                <rect
+                  aria-label="2020/04/30. Oranges, 10%."
+                  aria-labelledby="toolTipcallout_r_2e_"
+                  fill="#0078d4"
+                  height="16"
+                  opacity="1"
+                  role="option"
+                  rx="0"
+                  tabindex="0"
+                  width="147.5"
+                  x="40"
+                  y="219.7"
+                />
+                <text
+                  aria-hidden="true"
+                  class="fui-hbcwa__barLabel"
+                  dominant-baseline="central"
+                  style="direction: ltr; unicode-bidi: isolate;"
+                  text-anchor="start"
+                  transform="translate(4)"
+                  x="187.5"
+                  y="227.7"
+                >
+                  10k
+                </text>
+              </g>
+              <g
+                aria-label="13000, bar group 2 of 4, with 1 bars."
+                role="listbox"
+              >
+                <rect
+                  aria-label="2020/04/30. Bananas, 88%."
+                  aria-labelledby="toolTipcallout_r_2e_"
+                  fill="#002050"
+                  height="16"
+                  opacity="1"
+                  role="option"
+                  rx="0"
+                  tabindex="0"
+                  width="590"
+                  x="40"
+                  y="185.62"
+                />
+                <text
+                  aria-hidden="true"
+                  class="fui-hbcwa__barLabel"
+                  dominant-baseline="central"
+                  style="direction: ltr; unicode-bidi: isolate;"
+                  text-anchor="start"
+                  transform="translate(4)"
+                  x="630"
+                  y="193.62"
+                >
+                  40k
+                </text>
+              </g>
+              <g
+                aria-label="30000, bar group 3 of 4, with 1 bars."
+                role="listbox"
+              >
+                <rect
+                  aria-label="2020/04/30. Apples, 37%."
+                  aria-labelledby="toolTipcallout_r_2e_"
+                  fill="#00188f"
+                  height="16"
+                  opacity="1"
+                  role="option"
+                  rx="0"
+                  tabindex="0"
+                  width="368.75"
+                  x="40"
+                  y="113.2"
+                />
+                <text
+                  aria-hidden="true"
+                  class="fui-hbcwa__barLabel"
+                  dominant-baseline="central"
+                  style="direction: ltr; unicode-bidi: isolate;"
+                  text-anchor="start"
+                  transform="translate(4)"
+                  x="408.75"
+                  y="121.2"
+                >
+                  25k
+                </text>
+              </g>
+              <g
+                aria-label="50000, bar group 4 of 4, with 1 bars."
+                role="listbox"
+              >
+                <rect
+                  aria-label="2020/04/30. Grapes, 20%."
+                  aria-labelledby="toolTipcallout_r_2e_"
+                  fill="#00bcf2"
+                  height="16"
+                  opacity="1"
+                  role="option"
+                  rx="0"
+                  tabindex="0"
+                  width="295"
+                  x="40"
+                  y="28"
+                />
+                <text
+                  aria-hidden="true"
+                  class="fui-hbcwa__barLabel"
+                  dominant-baseline="central"
+                  style="direction: ltr; unicode-bidi: isolate;"
+                  text-anchor="start"
+                  transform="translate(4)"
+                  x="335"
+                  y="36"
+                >
+                  20k
+                </text>
+              </g>
             </g>
           </svg>
         </div>
@@ -1864,140 +1924,160 @@ Object {
             </g>
           </g>
           <g>
-            <rect
-              aria-label="2020/04/30. Oranges, 10%."
-              aria-labelledby="toolTipcallout_r_2e_"
-              fill="#0078d4"
-              height="16"
-              opacity="1"
-              role="img"
-              rx="0"
-              tabindex="0"
-              width="147.5"
-              x="40"
-              y="219.7"
-            />
-            <text
-              aria-hidden="true"
-              class="fui-hbcwa__barLabel"
-              dominant-baseline="central"
-              style="direction: ltr; unicode-bidi: isolate;"
-              text-anchor="start"
-              transform="translate(4)"
-              x="187.5"
-              y="227.7"
-            >
-              10k
-            </text>
-            <rect
-              aria-label="2020/04/30. Bananas, 88%."
-              aria-labelledby="toolTipcallout_r_2e_"
-              fill="#002050"
-              height="16"
-              opacity="1"
-              role="img"
-              rx="0"
-              tabindex="0"
-              width="590"
-              x="40"
-              y="185.62"
-            />
-            <text
-              aria-hidden="true"
-              class="fui-hbcwa__barLabel"
-              dominant-baseline="central"
-              style="direction: ltr; unicode-bidi: isolate;"
-              text-anchor="start"
-              transform="translate(4)"
-              x="630"
-              y="193.62"
-            >
-              40k
-            </text>
-            <rect
-              aria-label="2020/04/30. Apples, 37%."
-              aria-labelledby="toolTipcallout_r_2e_"
-              fill="#00188f"
-              height="16"
-              opacity="1"
-              role="img"
-              rx="0"
-              tabindex="0"
-              width="368.75"
-              x="40"
-              y="113.2"
-            />
-            <text
-              aria-hidden="true"
-              class="fui-hbcwa__barLabel"
-              dominant-baseline="central"
-              style="direction: ltr; unicode-bidi: isolate;"
-              text-anchor="start"
-              transform="translate(4)"
-              x="408.75"
-              y="121.2"
-            >
-              25k
-            </text>
-            <rect
-              aria-label="2020/04/30. Grapes, 20%."
-              aria-labelledby="toolTipcallout_r_2e_"
-              fill="#00bcf2"
-              height="16"
-              opacity="1"
-              role="img"
-              rx="0"
-              tabindex="0"
-              width="295"
-              x="40"
-              y="28"
-            />
-            <text
-              aria-hidden="true"
-              class="fui-hbcwa__barLabel"
-              dominant-baseline="central"
-              style="direction: ltr; unicode-bidi: isolate;"
-              text-anchor="start"
-              transform="translate(4)"
-              x="335"
-              y="36"
-            >
-              20k
-            </text>
-          </g>
-        </svg>
-      </div>
-      <div
-        class="fui-cart__legendContainer"
-      >
-        <div
-          aria-label="Legends"
-          aria-multiselectable="false"
-          class="fui-legend__root"
-          data-tabster="{\\"mover\\":{\\"cyclic\\":false,\\"direction\\":2,\\"memorizeCurrent\\":true}}"
-          role="listbox"
-        >
-          <div
-            class="fui-Overflow fui-legend__resizableArea"
-            style="text-align: unset;"
-          >
-            <button
-              aria-label="Oranges"
-              aria-selected="false"
-              class="fui-Button fui-legend__legend"
-              data-overflow-item=""
-              role="option"
-              style="--rect-height: 12px; --rect-backgroundColor: #0078d4; --rect-borderColor: #0078d4;"
-              type="button"
+            <g
+              aria-label="5000, bar group 1 of 4, with 1 bars."
+              role="listbox"
             >
-              <div
-                class="fui-legend__rect"
-                style="height: 12px; background-color: rgb(0, 120, 212); border-color: rgb(0, 120, 212); --rect-content-high-contrast: linear-gradient(to right, #0078d4, #0078d4);"
+              <rect
+                aria-label="2020/04/30. Oranges, 10%."
+                aria-labelledby="toolTipcallout_r_2e_"
+                fill="#0078d4"
+                height="16"
+                opacity="1"
+                role="option"
+                rx="0"
+                tabindex="0"
+                width="147.5"
+                x="40"
+                y="219.7"
               />
-              <div
-                class="fui-legend__text"
+              <text
+                aria-hidden="true"
+                class="fui-hbcwa__barLabel"
+                dominant-baseline="central"
+                style="direction: ltr; unicode-bidi: isolate;"
+                text-anchor="start"
+                transform="translate(4)"
+                x="187.5"
+                y="227.7"
               >
-                Oranges
+                10k
+              </text>
+            </g>
+            <g
+              aria-label="13000, bar group 2 of 4, with 1 bars."
+              role="listbox"
+            >
+              <rect
+                aria-label="2020/04/30. Bananas, 88%."
+                aria-labelledby="toolTipcallout_r_2e_"
+                fill="#002050"
+                height="16"
+                opacity="1"
+                role="option"
+                rx="0"
+                tabindex="0"
+                width="590"
+                x="40"
+                y="185.62"
+              />
+              <text
+                aria-hidden="true"
+                class="fui-hbcwa__barLabel"
+                dominant-baseline="central"
+                style="direction: ltr; unicode-bidi: isolate;"
+                text-anchor="start"
+                transform="translate(4)"
+                x="630"
+                y="193.62"
+              >
+                40k
+              </text>
+            </g>
+            <g
+              aria-label="30000, bar group 3 of 4, with 1 bars."
+              role="listbox"
+            >
+              <rect
+                aria-label="2020/04/30. Apples, 37%."
+                aria-labelledby="toolTipcallout_r_2e_"
+                fill="#00188f"
+                height="16"
+                opacity="1"
+                role="option"
+                rx="0"
+                tabindex="0"
+                width="368.75"
+                x="40"
+                y="113.2"
+              />
+              <text
+                aria-hidden="true"
+                class="fui-hbcwa__barLabel"
+                dominant-baseline="central"
+                style="direction: ltr; unicode-bidi: isolate;"
+                text-anchor="start"
+                transform="translate(4)"
+                x="408.75"
+                y="121.2"
+              >
+                25k
+              </text>
+            </g>
+            <g
+              aria-label="50000, bar group 4 of 4, with 1 bars."
+              role="listbox"
+            >
+              <rect
+                aria-label="2020/04/30. Grapes, 20%."
+                aria-labelledby="toolTipcallout_r_2e_"
+                fill="#00bcf2"
+                height="16"
+                opacity="1"
+                role="option"
+                rx="0"
+                tabindex="0"
+                width="295"
+                x="40"
+                y="28"
+              />
+              <text
+                aria-hidden="true"
+                class="fui-hbcwa__barLabel"
+                dominant-baseline="central"
+                style="direction: ltr; unicode-bidi: isolate;"
+                text-anchor="start"
+                transform="translate(4)"
+                x="335"
+                y="36"
+              >
+                20k
+              </text>
+            </g>
+          </g>
+        </svg>
+      </div>
+      <div
+        class="fui-cart__legendContainer"
+      >
+        <div
+          aria-label="Legends"
+          aria-multiselectable="false"
+          class="fui-legend__root"
+          data-tabster="{\\"mover\\":{\\"cyclic\\":false,\\"direction\\":2,\\"memorizeCurrent\\":true}}"
+          role="listbox"
+        >
+          <div
+            class="fui-Overflow fui-legend__resizableArea"
+            style="text-align: unset;"
+          >
+            <button
+              aria-label="Oranges"
+              aria-selected="false"
+              class="fui-Button fui-legend__legend"
+              data-overflow-item=""
+              role="option"
+              style="--rect-height: 12px; --rect-backgroundColor: #0078d4; --rect-borderColor: #0078d4;"
+              type="button"
+            >
+              <div
+                class="fui-legend__rect"
+                style="height: 12px; background-color: rgb(0, 120, 212); border-color: rgb(0, 120, 212); --rect-content-high-contrast: linear-gradient(to right, #0078d4, #0078d4);"
+              />
+              <div
+                class="fui-legend__text"
+              >
+                Oranges
               </div>
             </button>
             <button
@@ -2450,106 +2530,126 @@ Object {
               </g>
             </g>
             <g>
-              <rect
-                aria-label="2020/04/30. Oranges, 10%."
-                aria-labelledby="toolTipcallout_r_2i_"
-                fill="#0078d4"
-                height="16"
-                opacity="1"
-                role="img"
-                rx="3"
-                tabindex="0"
-                width="147.5"
-                x="40"
-                y="219.7"
-              />
-              <text
-                aria-hidden="true"
-                class="fui-hbcwa__barLabel"
-                dominant-baseline="central"
-                style="direction: ltr; unicode-bidi: isolate;"
-                text-anchor="start"
-                transform="translate(4)"
-                x="187.5"
-                y="227.7"
-              >
-                10k
-              </text>
-              <rect
-                aria-label="2020/04/30. Bananas, 88%."
-                aria-labelledby="toolTipcallout_r_2i_"
-                fill="#002050"
-                height="16"
-                opacity="1"
-                role="img"
-                rx="3"
-                tabindex="0"
-                width="590"
-                x="40"
-                y="185.62"
-              />
-              <text
-                aria-hidden="true"
-                class="fui-hbcwa__barLabel"
-                dominant-baseline="central"
-                style="direction: ltr; unicode-bidi: isolate;"
-                text-anchor="start"
-                transform="translate(4)"
-                x="630"
-                y="193.62"
-              >
-                40k
-              </text>
-              <rect
-                aria-label="2020/04/30. Apples, 37%."
-                aria-labelledby="toolTipcallout_r_2i_"
-                fill="#00188f"
-                height="16"
-                opacity="1"
-                role="img"
-                rx="3"
-                tabindex="0"
-                width="368.75"
-                x="40"
-                y="113.2"
-              />
-              <text
-                aria-hidden="true"
-                class="fui-hbcwa__barLabel"
-                dominant-baseline="central"
-                style="direction: ltr; unicode-bidi: isolate;"
-                text-anchor="start"
-                transform="translate(4)"
-                x="408.75"
-                y="121.2"
-              >
-                25k
-              </text>
-              <rect
-                aria-label="2020/04/30. Grapes, 20%."
-                aria-labelledby="toolTipcallout_r_2i_"
-                fill="#00bcf2"
-                height="16"
-                opacity="1"
-                role="img"
-                rx="3"
-                tabindex="0"
-                width="295"
-                x="40"
-                y="28"
-              />
-              <text
-                aria-hidden="true"
-                class="fui-hbcwa__barLabel"
-                dominant-baseline="central"
-                style="direction: ltr; unicode-bidi: isolate;"
-                text-anchor="start"
-                transform="translate(4)"
-                x="335"
-                y="36"
-              >
-                20k
-              </text>
+              <g
+                aria-label="5000, bar group 1 of 4, with 1 bars."
+                role="listbox"
+              >
+                <rect
+                  aria-label="2020/04/30. Oranges, 10%."
+                  aria-labelledby="toolTipcallout_r_2i_"
+                  fill="#0078d4"
+                  height="16"
+                  opacity="1"
+                  role="option"
+                  rx="3"
+                  tabindex="0"
+                  width="147.5"
+                  x="40"
+                  y="219.7"
+                />
+                <text
+                  aria-hidden="true"
+                  class="fui-hbcwa__barLabel"
+                  dominant-baseline="central"
+                  style="direction: ltr; unicode-bidi: isolate;"
+                  text-anchor="start"
+                  transform="translate(4)"
+                  x="187.5"
+                  y="227.7"
+                >
+                  10k
+                </text>
+              </g>
+              <g
+                aria-label="13000, bar group 2 of 4, with 1 bars."
+                role="listbox"
+              >
+                <rect
+                  aria-label="2020/04/30. Bananas, 88%."
+                  aria-labelledby="toolTipcallout_r_2i_"
+                  fill="#002050"
+                  height="16"
+                  opacity="1"
+                  role="option"
+                  rx="3"
+                  tabindex="0"
+                  width="590"
+                  x="40"
+                  y="185.62"
+                />
+                <text
+                  aria-hidden="true"
+                  class="fui-hbcwa__barLabel"
+                  dominant-baseline="central"
+                  style="direction: ltr; unicode-bidi: isolate;"
+                  text-anchor="start"
+                  transform="translate(4)"
+                  x="630"
+                  y="193.62"
+                >
+                  40k
+                </text>
+              </g>
+              <g
+                aria-label="30000, bar group 3 of 4, with 1 bars."
+                role="listbox"
+              >
+                <rect
+                  aria-label="2020/04/30. Apples, 37%."
+                  aria-labelledby="toolTipcallout_r_2i_"
+                  fill="#00188f"
+                  height="16"
+                  opacity="1"
+                  role="option"
+                  rx="3"
+                  tabindex="0"
+                  width="368.75"
+                  x="40"
+                  y="113.2"
+                />
+                <text
+                  aria-hidden="true"
+                  class="fui-hbcwa__barLabel"
+                  dominant-baseline="central"
+                  style="direction: ltr; unicode-bidi: isolate;"
+                  text-anchor="start"
+                  transform="translate(4)"
+                  x="408.75"
+                  y="121.2"
+                >
+                  25k
+                </text>
+              </g>
+              <g
+                aria-label="50000, bar group 4 of 4, with 1 bars."
+                role="listbox"
+              >
+                <rect
+                  aria-label="2020/04/30. Grapes, 20%."
+                  aria-labelledby="toolTipcallout_r_2i_"
+                  fill="#00bcf2"
+                  height="16"
+                  opacity="1"
+                  role="option"
+                  rx="3"
+                  tabindex="0"
+                  width="295"
+                  x="40"
+                  y="28"
+                />
+                <text
+                  aria-hidden="true"
+                  class="fui-hbcwa__barLabel"
+                  dominant-baseline="central"
+                  style="direction: ltr; unicode-bidi: isolate;"
+                  text-anchor="start"
+                  transform="translate(4)"
+                  x="335"
+                  y="36"
+                >
+                  20k
+                </text>
+              </g>
             </g>
           </svg>
         </div>
@@ -2977,106 +3077,126 @@ Object {
             </g>
           </g>
           <g>
-            <rect
-              aria-label="2020/04/30. Oranges, 10%."
-              aria-labelledby="toolTipcallout_r_2i_"
-              fill="#0078d4"
-              height="16"
-              opacity="1"
-              role="img"
-              rx="3"
-              tabindex="0"
-              width="147.5"
-              x="40"
-              y="219.7"
-            />
-            <text
-              aria-hidden="true"
-              class="fui-hbcwa__barLabel"
-              dominant-baseline="central"
-              style="direction: ltr; unicode-bidi: isolate;"
-              text-anchor="start"
-              transform="translate(4)"
-              x="187.5"
-              y="227.7"
+            <g
+              aria-label="5000, bar group 1 of 4, with 1 bars."
+              role="listbox"
             >
-              10k
-            </text>
-            <rect
-              aria-label="2020/04/30. Bananas, 88%."
-              aria-labelledby="toolTipcallout_r_2i_"
-              fill="#002050"
-              height="16"
-              opacity="1"
-              role="img"
-              rx="3"
-              tabindex="0"
-              width="590"
-              x="40"
-              y="185.62"
-            />
-            <text
-              aria-hidden="true"
-              class="fui-hbcwa__barLabel"
-              dominant-baseline="central"
-              style="direction: ltr; unicode-bidi: isolate;"
-              text-anchor="start"
-              transform="translate(4)"
-              x="630"
-              y="193.62"
+              <rect
+                aria-label="2020/04/30. Oranges, 10%."
+                aria-labelledby="toolTipcallout_r_2i_"
+                fill="#0078d4"
+                height="16"
+                opacity="1"
+                role="option"
+                rx="3"
+                tabindex="0"
+                width="147.5"
+                x="40"
+                y="219.7"
+              />
+              <text
+                aria-hidden="true"
+                class="fui-hbcwa__barLabel"
+                dominant-baseline="central"
+                style="direction: ltr; unicode-bidi: isolate;"
+                text-anchor="start"
+                transform="translate(4)"
+                x="187.5"
+                y="227.7"
+              >
+                10k
+              </text>
+            </g>
+            <g
+              aria-label="13000, bar group 2 of 4, with 1 bars."
+              role="listbox"
             >
-              40k
-            </text>
-            <rect
-              aria-label="2020/04/30. Apples, 37%."
-              aria-labelledby="toolTipcallout_r_2i_"
-              fill="#00188f"
-              height="16"
-              opacity="1"
-              role="img"
-              rx="3"
-              tabindex="0"
-              width="368.75"
-              x="40"
-              y="113.2"
-            />
-            <text
-              aria-hidden="true"
-              class="fui-hbcwa__barLabel"
-              dominant-baseline="central"
-              style="direction: ltr; unicode-bidi: isolate;"
-              text-anchor="start"
-              transform="translate(4)"
-              x="408.75"
-              y="121.2"
+              <rect
+                aria-label="2020/04/30. Bananas, 88%."
+                aria-labelledby="toolTipcallout_r_2i_"
+                fill="#002050"
+                height="16"
+                opacity="1"
+                role="option"
+                rx="3"
+                tabindex="0"
+                width="590"
+                x="40"
+                y="185.62"
+              />
+              <text
+                aria-hidden="true"
+                class="fui-hbcwa__barLabel"
+                dominant-baseline="central"
+                style="direction: ltr; unicode-bidi: isolate;"
+                text-anchor="start"
+                transform="translate(4)"
+                x="630"
+                y="193.62"
+              >
+                40k
+              </text>
+            </g>
+            <g
+              aria-label="30000, bar group 3 of 4, with 1 bars."
+              role="listbox"
             >
-              25k
-            </text>
-            <rect
-              aria-label="2020/04/30. Grapes, 20%."
-              aria-labelledby="toolTipcallout_r_2i_"
-              fill="#00bcf2"
-              height="16"
-              opacity="1"
-              role="img"
-              rx="3"
-              tabindex="0"
-              width="295"
-              x="40"
-              y="28"
-            />
-            <text
-              aria-hidden="true"
-              class="fui-hbcwa__barLabel"
-              dominant-baseline="central"
-              style="direction: ltr; unicode-bidi: isolate;"
-              text-anchor="start"
-              transform="translate(4)"
-              x="335"
-              y="36"
+              <rect
+                aria-label="2020/04/30. Apples, 37%."
+                aria-labelledby="toolTipcallout_r_2i_"
+                fill="#00188f"
+                height="16"
+                opacity="1"
+                role="option"
+                rx="3"
+                tabindex="0"
+                width="368.75"
+                x="40"
+                y="113.2"
+              />
+              <text
+                aria-hidden="true"
+                class="fui-hbcwa__barLabel"
+                dominant-baseline="central"
+                style="direction: ltr; unicode-bidi: isolate;"
+                text-anchor="start"
+                transform="translate(4)"
+                x="408.75"
+                y="121.2"
+              >
+                25k
+              </text>
+            </g>
+            <g
+              aria-label="50000, bar group 4 of 4, with 1 bars."
+              role="listbox"
             >
-              20k
-            </text>
+              <rect
+                aria-label="2020/04/30. Grapes, 20%."
+                aria-labelledby="toolTipcallout_r_2i_"
+                fill="#00bcf2"
+                height="16"
+                opacity="1"
+                role="option"
+                rx="3"
+                tabindex="0"
+                width="295"
+                x="40"
+                y="28"
+              />
+              <text
+                aria-hidden="true"
+                class="fui-hbcwa__barLabel"
+                dominant-baseline="central"
+                style="direction: ltr; unicode-bidi: isolate;"
+                text-anchor="start"
+                transform="translate(4)"
+                x="335"
+                y="36"
+              >
+                20k
+              </text>
+            </g>
           </g>
         </svg>
       </div>
@@ -3563,106 +3683,126 @@ Object {
               </g>
             </g>
             <g>
-              <rect
-                aria-label="2020/04/30. Oranges, 10%."
-                aria-labelledby="toolTipcallout_r_1r_"
-                fill="#0078d4"
-                height="16"
-                opacity="1"
-                role="img"
-                rx="0"
-                tabindex="0"
-                width="147.5"
-                x="40"
-                y="219.7"
-              />
-              <text
-                aria-hidden="true"
-                class="fui-hbcwa__barLabel"
-                dominant-baseline="central"
-                style="direction: ltr; unicode-bidi: isolate;"
-                text-anchor="start"
-                transform="translate(4)"
-                x="187.5"
-                y="227.7"
-              >
-                10k
-              </text>
-              <rect
-                aria-label="2020/04/30. Bananas, 88%."
-                aria-labelledby="toolTipcallout_r_1r_"
-                fill="#002050"
-                height="16"
-                opacity="1"
-                role="img"
-                rx="0"
-                tabindex="0"
-                width="590"
-                x="40"
-                y="185.62"
-              />
-              <text
-                aria-hidden="true"
-                class="fui-hbcwa__barLabel"
-                dominant-baseline="central"
-                style="direction: ltr; unicode-bidi: isolate;"
-                text-anchor="start"
-                transform="translate(4)"
-                x="630"
-                y="193.62"
-              >
-                40k
-              </text>
-              <rect
-                aria-label="2020/04/30. Apples, 37%."
-                aria-labelledby="toolTipcallout_r_1r_"
-                fill="#00188f"
-                height="16"
-                opacity="1"
-                role="img"
-                rx="0"
-                tabindex="0"
-                width="368.75"
-                x="40"
-                y="113.2"
-              />
-              <text
-                aria-hidden="true"
-                class="fui-hbcwa__barLabel"
-                dominant-baseline="central"
-                style="direction: ltr; unicode-bidi: isolate;"
-                text-anchor="start"
-                transform="translate(4)"
-                x="408.75"
-                y="121.2"
-              >
-                25k
-              </text>
-              <rect
-                aria-label="2020/04/30. Grapes, 20%."
-                aria-labelledby="toolTipcallout_r_1r_"
-                fill="#00bcf2"
-                height="16"
-                opacity="1"
-                role="img"
-                rx="0"
-                tabindex="0"
-                width="295"
-                x="40"
-                y="28"
-              />
-              <text
-                aria-hidden="true"
-                class="fui-hbcwa__barLabel"
-                dominant-baseline="central"
-                style="direction: ltr; unicode-bidi: isolate;"
-                text-anchor="start"
-                transform="translate(4)"
-                x="335"
-                y="36"
-              >
-                20k
-              </text>
+              <g
+                aria-label="5000, bar group 1 of 4, with 1 bars."
+                role="listbox"
+              >
+                <rect
+                  aria-label="2020/04/30. Oranges, 10%."
+                  aria-labelledby="toolTipcallout_r_1r_"
+                  fill="#0078d4"
+                  height="16"
+                  opacity="1"
+                  role="option"
+                  rx="0"
+                  tabindex="0"
+                  width="147.5"
+                  x="40"
+                  y="219.7"
+                />
+                <text
+                  aria-hidden="true"
+                  class="fui-hbcwa__barLabel"
+                  dominant-baseline="central"
+                  style="direction: ltr; unicode-bidi: isolate;"
+                  text-anchor="start"
+                  transform="translate(4)"
+                  x="187.5"
+                  y="227.7"
+                >
+                  10k
+                </text>
+              </g>
+              <g
+                aria-label="13000, bar group 2 of 4, with 1 bars."
+                role="listbox"
+              >
+                <rect
+                  aria-label="2020/04/30. Bananas, 88%."
+                  aria-labelledby="toolTipcallout_r_1r_"
+                  fill="#002050"
+                  height="16"
+                  opacity="1"
+                  role="option"
+                  rx="0"
+                  tabindex="0"
+                  width="590"
+                  x="40"
+                  y="185.62"
+                />
+                <text
+                  aria-hidden="true"
+                  class="fui-hbcwa__barLabel"
+                  dominant-baseline="central"
+                  style="direction: ltr; unicode-bidi: isolate;"
+                  text-anchor="start"
+                  transform="translate(4)"
+                  x="630"
+                  y="193.62"
+                >
+                  40k
+                </text>
+              </g>
+              <g
+                aria-label="30000, bar group 3 of 4, with 1 bars."
+                role="listbox"
+              >
+                <rect
+                  aria-label="2020/04/30. Apples, 37%."
+                  aria-labelledby="toolTipcallout_r_1r_"
+                  fill="#00188f"
+                  height="16"
+                  opacity="1"
+                  role="option"
+                  rx="0"
+                  tabindex="0"
+                  width="368.75"
+                  x="40"
+                  y="113.2"
+                />
+                <text
+                  aria-hidden="true"
+                  class="fui-hbcwa__barLabel"
+                  dominant-baseline="central"
+                  style="direction: ltr; unicode-bidi: isolate;"
+                  text-anchor="start"
+                  transform="translate(4)"
+                  x="408.75"
+                  y="121.2"
+                >
+                  25k
+                </text>
+              </g>
+              <g
+                aria-label="50000, bar group 4 of 4, with 1 bars."
+                role="listbox"
+              >
+                <rect
+                  aria-label="2020/04/30. Grapes, 20%."
+                  aria-labelledby="toolTipcallout_r_1r_"
+                  fill="#00bcf2"
+                  height="16"
+                  opacity="1"
+                  role="option"
+                  rx="0"
+                  tabindex="0"
+                  width="295"
+                  x="40"
+                  y="28"
+                />
+                <text
+                  aria-hidden="true"
+                  class="fui-hbcwa__barLabel"
+                  dominant-baseline="central"
+                  style="direction: ltr; unicode-bidi: isolate;"
+                  text-anchor="start"
+                  transform="translate(4)"
+                  x="335"
+                  y="36"
+                >
+                  20k
+                </text>
+              </g>
             </g>
           </svg>
         </div>
@@ -4090,166 +4230,186 @@ Object {
             </g>
           </g>
           <g>
-            <rect
-              aria-label="2020/04/30. Oranges, 10%."
-              aria-labelledby="toolTipcallout_r_1r_"
-              fill="#0078d4"
-              height="16"
-              opacity="1"
-              role="img"
-              rx="0"
-              tabindex="0"
-              width="147.5"
-              x="40"
-              y="219.7"
-            />
-            <text
-              aria-hidden="true"
-              class="fui-hbcwa__barLabel"
-              dominant-baseline="central"
-              style="direction: ltr; unicode-bidi: isolate;"
-              text-anchor="start"
-              transform="translate(4)"
-              x="187.5"
-              y="227.7"
-            >
-              10k
-            </text>
-            <rect
-              aria-label="2020/04/30. Bananas, 88%."
-              aria-labelledby="toolTipcallout_r_1r_"
-              fill="#002050"
-              height="16"
-              opacity="1"
-              role="img"
-              rx="0"
-              tabindex="0"
-              width="590"
-              x="40"
-              y="185.62"
-            />
-            <text
-              aria-hidden="true"
-              class="fui-hbcwa__barLabel"
-              dominant-baseline="central"
-              style="direction: ltr; unicode-bidi: isolate;"
-              text-anchor="start"
-              transform="translate(4)"
-              x="630"
-              y="193.62"
-            >
-              40k
-            </text>
-            <rect
-              aria-label="2020/04/30. Apples, 37%."
-              aria-labelledby="toolTipcallout_r_1r_"
-              fill="#00188f"
-              height="16"
-              opacity="1"
-              role="img"
-              rx="0"
-              tabindex="0"
-              width="368.75"
-              x="40"
-              y="113.2"
-            />
-            <text
-              aria-hidden="true"
-              class="fui-hbcwa__barLabel"
-              dominant-baseline="central"
-              style="direction: ltr; unicode-bidi: isolate;"
-              text-anchor="start"
-              transform="translate(4)"
-              x="408.75"
-              y="121.2"
-            >
-              25k
-            </text>
-            <rect
-              aria-label="2020/04/30. Grapes, 20%."
-              aria-labelledby="toolTipcallout_r_1r_"
-              fill="#00bcf2"
-              height="16"
-              opacity="1"
-              role="img"
-              rx="0"
-              tabindex="0"
-              width="295"
-              x="40"
-              y="28"
-            />
-            <text
-              aria-hidden="true"
-              class="fui-hbcwa__barLabel"
-              dominant-baseline="central"
-              style="direction: ltr; unicode-bidi: isolate;"
-              text-anchor="start"
-              transform="translate(4)"
-              x="335"
-              y="36"
-            >
-              20k
-            </text>
-          </g>
-        </svg>
-      </div>
-      <div
-        class="fui-cart__legendContainer"
-      >
-        <div
-          aria-label="Legends"
-          aria-multiselectable="false"
-          class="fui-legend__root"
-          data-tabster="{\\"mover\\":{\\"cyclic\\":false,\\"direction\\":2,\\"memorizeCurrent\\":true}}"
-          role="listbox"
-        >
-          <div
-            class="fui-Overflow fui-legend__resizableArea"
-            style="text-align: unset;"
-          >
-            <button
-              aria-label="Oranges"
-              aria-selected="false"
-              class="fui-Button fui-legend__legend"
-              data-overflow-item=""
-              role="option"
-              style="--rect-height: 12px; --rect-backgroundColor: #0078d4; --rect-borderColor: #0078d4;"
-              type="button"
+            <g
+              aria-label="5000, bar group 1 of 4, with 1 bars."
+              role="listbox"
             >
-              <div
-                class="fui-legend__rect"
-                style="height: 12px; background-color: rgb(0, 120, 212); border-color: rgb(0, 120, 212); --rect-content-high-contrast: linear-gradient(to right, #0078d4, #0078d4);"
+              <rect
+                aria-label="2020/04/30. Oranges, 10%."
+                aria-labelledby="toolTipcallout_r_1r_"
+                fill="#0078d4"
+                height="16"
+                opacity="1"
+                role="option"
+                rx="0"
+                tabindex="0"
+                width="147.5"
+                x="40"
+                y="219.7"
               />
-              <div
-                class="fui-legend__text"
+              <text
+                aria-hidden="true"
+                class="fui-hbcwa__barLabel"
+                dominant-baseline="central"
+                style="direction: ltr; unicode-bidi: isolate;"
+                text-anchor="start"
+                transform="translate(4)"
+                x="187.5"
+                y="227.7"
               >
-                Oranges
-              </div>
-            </button>
-            <button
-              aria-label="Grapes"
-              aria-selected="false"
-              class="fui-Button fui-legend__legend"
-              data-overflow-item=""
-              role="option"
-              style="--rect-height: 12px; --rect-backgroundColor: #00bcf2; --rect-borderColor: #00bcf2;"
-              type="button"
+                10k
+              </text>
+            </g>
+            <g
+              aria-label="13000, bar group 2 of 4, with 1 bars."
+              role="listbox"
             >
-              <div
-                class="fui-legend__rect"
-                style="height: 12px; background-color: rgb(0, 188, 242); border-color: rgb(0, 188, 242); --rect-content-high-contrast: linear-gradient(to right, #00bcf2, #00bcf2);"
+              <rect
+                aria-label="2020/04/30. Bananas, 88%."
+                aria-labelledby="toolTipcallout_r_1r_"
+                fill="#002050"
+                height="16"
+                opacity="1"
+                role="option"
+                rx="0"
+                tabindex="0"
+                width="590"
+                x="40"
+                y="185.62"
               />
-              <div
-                class="fui-legend__text"
+              <text
+                aria-hidden="true"
+                class="fui-hbcwa__barLabel"
+                dominant-baseline="central"
+                style="direction: ltr; unicode-bidi: isolate;"
+                text-anchor="start"
+                transform="translate(4)"
+                x="630"
+                y="193.62"
               >
-                Grapes
-              </div>
-            </button>
-            <button
-              aria-label="Apples"
-              aria-selected="false"
-              class="fui-Button fui-legend__legend"
-              data-overflow-item=""
+                40k
+              </text>
+            </g>
+            <g
+              aria-label="30000, bar group 3 of 4, with 1 bars."
+              role="listbox"
+            >
+              <rect
+                aria-label="2020/04/30. Apples, 37%."
+                aria-labelledby="toolTipcallout_r_1r_"
+                fill="#00188f"
+                height="16"
+                opacity="1"
+                role="option"
+                rx="0"
+                tabindex="0"
+                width="368.75"
+                x="40"
+                y="113.2"
+              />
+              <text
+                aria-hidden="true"
+                class="fui-hbcwa__barLabel"
+                dominant-baseline="central"
+                style="direction: ltr; unicode-bidi: isolate;"
+                text-anchor="start"
+                transform="translate(4)"
+                x="408.75"
+                y="121.2"
+              >
+                25k
+              </text>
+            </g>
+            <g
+              aria-label="50000, bar group 4 of 4, with 1 bars."
+              role="listbox"
+            >
+              <rect
+                aria-label="2020/04/30. Grapes, 20%."
+                aria-labelledby="toolTipcallout_r_1r_"
+                fill="#00bcf2"
+                height="16"
+                opacity="1"
+                role="option"
+                rx="0"
+                tabindex="0"
+                width="295"
+                x="40"
+                y="28"
+              />
+              <text
+                aria-hidden="true"
+                class="fui-hbcwa__barLabel"
+                dominant-baseline="central"
+                style="direction: ltr; unicode-bidi: isolate;"
+                text-anchor="start"
+                transform="translate(4)"
+                x="335"
+                y="36"
+              >
+                20k
+              </text>
+            </g>
+          </g>
+        </svg>
+      </div>
+      <div
+        class="fui-cart__legendContainer"
+      >
+        <div
+          aria-label="Legends"
+          aria-multiselectable="false"
+          class="fui-legend__root"
+          data-tabster="{\\"mover\\":{\\"cyclic\\":false,\\"direction\\":2,\\"memorizeCurrent\\":true}}"
+          role="listbox"
+        >
+          <div
+            class="fui-Overflow fui-legend__resizableArea"
+            style="text-align: unset;"
+          >
+            <button
+              aria-label="Oranges"
+              aria-selected="false"
+              class="fui-Button fui-legend__legend"
+              data-overflow-item=""
+              role="option"
+              style="--rect-height: 12px; --rect-backgroundColor: #0078d4; --rect-borderColor: #0078d4;"
+              type="button"
+            >
+              <div
+                class="fui-legend__rect"
+                style="height: 12px; background-color: rgb(0, 120, 212); border-color: rgb(0, 120, 212); --rect-content-high-contrast: linear-gradient(to right, #0078d4, #0078d4);"
+              />
+              <div
+                class="fui-legend__text"
+              >
+                Oranges
+              </div>
+            </button>
+            <button
+              aria-label="Grapes"
+              aria-selected="false"
+              class="fui-Button fui-legend__legend"
+              data-overflow-item=""
+              role="option"
+              style="--rect-height: 12px; --rect-backgroundColor: #00bcf2; --rect-borderColor: #00bcf2;"
+              type="button"
+            >
+              <div
+                class="fui-legend__rect"
+                style="height: 12px; background-color: rgb(0, 188, 242); border-color: rgb(0, 188, 242); --rect-content-high-contrast: linear-gradient(to right, #00bcf2, #00bcf2);"
+              />
+              <div
+                class="fui-legend__text"
+              >
+                Grapes
+              </div>
+            </button>
+            <button
+              aria-label="Apples"
+              aria-selected="false"
+              class="fui-Button fui-legend__legend"
+              data-overflow-item=""
               role="option"
               style="--rect-height: 12px; --rect-backgroundColor: #00188f; --rect-borderColor: #00188f;"
               type="button"
@@ -4733,193 +4893,208 @@ Object {
               </g>
             </g>
             <g>
-              <rect
-                aria-label="Q1. Product A, 10K."
-                aria-labelledby="toolTipcallout_r_1v_"
-                fill="#0078d4"
-                height="45.8"
-                opacity="1"
-                role="img"
-                rx="0"
-                tabindex="0"
-                transform="translate(0,-6.542857142857141)"
-                width="208.71428571428575"
-                x="208.57142857142858"
-                y="191.57142857142856"
-              />
-              <rect
-                aria-label="Q1. Product B, -5K."
-                aria-labelledby="toolTipcallout_r_1v_"
-                fill="#ff8c00"
-                height="45.8"
-                opacity="1"
-                role="img"
-                rx="0"
-                tabindex="0"
-                transform="translate(0,-6.542857142857141)"
-                width="103.35714285714286"
-                x="103.21428571428572"
-                y="191.57142857142856"
-              />
-              <rect
-                aria-label="Q1. Product C, 8K."
-                aria-labelledby="toolTipcallout_r_1v_"
-                fill="#107c10"
-                height="45.8"
-                opacity="1"
-                role="img"
-                rx="0"
-                tabindex="0"
-                transform="translate(0,-6.542857142857141)"
-                width="168.57142857142858"
-                x="419.28571428571433"
-                y="191.57142857142856"
-              />
-              <text
-                aria-hidden="true"
-                class="fui-hbcwa__barLabel"
-                dominant-baseline="central"
-                style="direction: ltr; unicode-bidi: isolate;"
-                text-anchor="start"
-                transform="translate(4)"
-                x="587.8571428571429"
-                y="207.92857142857142"
-              >
-                13k
-              </text>
-              <rect
-                aria-label="Q2. Product A, -7K."
-                aria-labelledby="toolTipcallout_r_1v_"
-                fill="#0078d4"
-                height="45.8"
-                opacity="1"
-                role="img"
-                rx="0"
-                tabindex="0"
-                transform="translate(0,-6.542857142857141)"
-                width="145.5"
-                x="61.07142857142857"
-                y="126.14285714285714"
-              />
-              <rect
-                aria-label="Q2. Product B, 12K."
-                aria-labelledby="toolTipcallout_r_1v_"
-                fill="#ff8c00"
-                height="45.8"
-                opacity="1"
-                role="img"
-                rx="0"
-                tabindex="0"
-                transform="translate(0,-6.542857142857141)"
-                width="250.85714285714286"
-                x="208.57142857142858"
-                y="126.14285714285714"
-              />
-              <rect
-                aria-label="Q2. Product C, 3K."
-                aria-labelledby="toolTipcallout_r_1v_"
-                fill="#107c10"
-                height="45.8"
-                opacity="1"
-                role="img"
-                rx="0"
-                tabindex="0"
-                transform="translate(0,-6.542857142857141)"
-                width="63.214285714285694"
-                x="461.42857142857144"
-                y="126.14285714285714"
-              />
-              <text
-                aria-hidden="true"
-                class="fui-hbcwa__barLabel"
-                dominant-baseline="central"
-                style="direction: ltr; unicode-bidi: isolate;"
-                text-anchor="start"
-                transform="translate(4)"
-                x="524.6428571428571"
-                y="142.5"
-              >
-                8k
-              </text>
-              <rect
-                aria-label="Q3. Product A, 15K."
-                aria-labelledby="toolTipcallout_r_1v_"
-                fill="#0078d4"
-                height="45.8"
-                opacity="1"
-                role="img"
-                rx="0"
-                tabindex="0"
-                transform="translate(0,-6.542857142857141)"
-                width="314.07142857142856"
-                x="208.57142857142858"
-                y="60.71428571428571"
-              />
-              <rect
-                aria-label="Q3. Product B, -4K."
-                aria-labelledby="toolTipcallout_r_1v_"
-                fill="#ff8c00"
-                height="45.8"
-                opacity="1"
-                role="img"
-                rx="0"
-                tabindex="0"
-                transform="translate(0,-6.542857142857141)"
-                width="82.28571428571429"
-                x="124.28571428571429"
-                y="60.71428571428571"
-              />
-              <rect
-                aria-label="Q3. Product C, 5K."
-                aria-labelledby="toolTipcallout_r_1v_"
-                fill="#107c10"
-                height="45.8"
-                opacity="1"
-                role="img"
-                rx="0"
-                tabindex="0"
-                transform="translate(0,-6.542857142857141)"
-                width="105.35714285714286"
-                x="524.6428571428571"
-                y="60.71428571428571"
-              />
-              <text
-                aria-hidden="true"
-                class="fui-hbcwa__barLabel"
-                dominant-baseline="central"
-                style="direction: ltr; unicode-bidi: isolate;"
-                text-anchor="start"
-                transform="translate(4)"
-                x="630"
-                y="77.07142857142856"
-              >
-                16k
-              </text>
-            </g>
-          </svg>
-        </div>
-        <div
-          class="fui-cart__legendContainer"
-        >
-          <div
-            aria-label="Legends"
-            aria-multiselectable="false"
-            class="fui-legend__root"
-            data-tabster="{\\"mover\\":{\\"cyclic\\":false,\\"direction\\":2,\\"memorizeCurrent\\":true}}"
-            role="listbox"
-          >
-            <div
-              class="fui-Overflow fui-legend__resizableArea"
-              style="text-align: unset;"
-            >
-              <button
-                aria-label="Product A"
-                aria-selected="false"
-                class="fui-Button fui-legend__legend"
-                data-overflow-item=""
-                role="option"
-                style="--rect-height: 12px; --rect-backgroundColor: #0078d4; --rect-borderColor: #0078d4;"
-                type="button"
+              <g
+                aria-label="Q1, bar group 1 of 3, with 3 bars."
+                role="listbox"
+              >
+                <rect
+                  aria-label="Q1. Product A, 10K."
+                  aria-labelledby="toolTipcallout_r_1v_"
+                  fill="#0078d4"
+                  height="45.8"
+                  opacity="1"
+                  role="option"
+                  rx="0"
+                  tabindex="0"
+                  transform="translate(0,-6.542857142857141)"
+                  width="208.71428571428575"
+                  x="208.57142857142858"
+                  y="191.57142857142856"
+                />
+                <rect
+                  aria-label="Q1. Product B, -5K."
+                  aria-labelledby="toolTipcallout_r_1v_"
+                  fill="#ff8c00"
+                  height="45.8"
+                  opacity="1"
+                  role="option"
+                  rx="0"
+                  tabindex="0"
+                  transform="translate(0,-6.542857142857141)"
+                  width="103.35714285714286"
+                  x="103.21428571428572"
+                  y="191.57142857142856"
+                />
+                <rect
+                  aria-label="Q1. Product C, 8K."
+                  aria-labelledby="toolTipcallout_r_1v_"
+                  fill="#107c10"
+                  height="45.8"
+                  opacity="1"
+                  role="option"
+                  rx="0"
+                  tabindex="0"
+                  transform="translate(0,-6.542857142857141)"
+                  width="168.57142857142858"
+                  x="419.28571428571433"
+                  y="191.57142857142856"
+                />
+                <text
+                  aria-hidden="true"
+                  class="fui-hbcwa__barLabel"
+                  dominant-baseline="central"
+                  style="direction: ltr; unicode-bidi: isolate;"
+                  text-anchor="start"
+                  transform="translate(4)"
+                  x="587.8571428571429"
+                  y="207.92857142857142"
+                >
+                  13k
+                </text>
+              </g>
+              <g
+                aria-label="Q2, bar group 2 of 3, with 3 bars."
+                role="listbox"
+              >
+                <rect
+                  aria-label="Q2. Product A, -7K."
+                  aria-labelledby="toolTipcallout_r_1v_"
+                  fill="#0078d4"
+                  height="45.8"
+                  opacity="1"
+                  role="option"
+                  rx="0"
+                  tabindex="0"
+                  transform="translate(0,-6.542857142857141)"
+                  width="145.5"
+                  x="61.07142857142857"
+                  y="126.14285714285714"
+                />
+                <rect
+                  aria-label="Q2. Product B, 12K."
+                  aria-labelledby="toolTipcallout_r_1v_"
+                  fill="#ff8c00"
+                  height="45.8"
+                  opacity="1"
+                  role="option"
+                  rx="0"
+                  tabindex="0"
+                  transform="translate(0,-6.542857142857141)"
+                  width="250.85714285714286"
+                  x="208.57142857142858"
+                  y="126.14285714285714"
+                />
+                <rect
+                  aria-label="Q2. Product C, 3K."
+                  aria-labelledby="toolTipcallout_r_1v_"
+                  fill="#107c10"
+                  height="45.8"
+                  opacity="1"
+                  role="option"
+                  rx="0"
+                  tabindex="0"
+                  transform="translate(0,-6.542857142857141)"
+                  width="63.214285714285694"
+                  x="461.42857142857144"
+                  y="126.14285714285714"
+                />
+                <text
+                  aria-hidden="true"
+                  class="fui-hbcwa__barLabel"
+                  dominant-baseline="central"
+                  style="direction: ltr; unicode-bidi: isolate;"
+                  text-anchor="start"
+                  transform="translate(4)"
+                  x="524.6428571428571"
+                  y="142.5"
+                >
+                  8k
+                </text>
+              </g>
+              <g
+                aria-label="Q3, bar group 3 of 3, with 3 bars."
+                role="listbox"
+              >
+                <rect
+                  aria-label="Q3. Product A, 15K."
+                  aria-labelledby="toolTipcallout_r_1v_"
+                  fill="#0078d4"
+                  height="45.8"
+                  opacity="1"
+                  role="option"
+                  rx="0"
+                  tabindex="0"
+                  transform="translate(0,-6.542857142857141)"
+                  width="314.07142857142856"
+                  x="208.57142857142858"
+                  y="60.71428571428571"
+                />
+                <rect
+                  aria-label="Q3. Product B, -4K."
+                  aria-labelledby="toolTipcallout_r_1v_"
+                  fill="#ff8c00"
+                  height="45.8"
+                  opacity="1"
+                  role="option"
+                  rx="0"
+                  tabindex="0"
+                  transform="translate(0,-6.542857142857141)"
+                  width="82.28571428571429"
+                  x="124.28571428571429"
+                  y="60.71428571428571"
+                />
+                <rect
+                  aria-label="Q3. Product C, 5K."
+                  aria-labelledby="toolTipcallout_r_1v_"
+                  fill="#107c10"
+                  height="45.8"
+                  opacity="1"
+                  role="option"
+                  rx="0"
+                  tabindex="0"
+                  transform="translate(0,-6.542857142857141)"
+                  width="105.35714285714286"
+                  x="524.6428571428571"
+                  y="60.71428571428571"
+                />
+                <text
+                  aria-hidden="true"
+                  class="fui-hbcwa__barLabel"
+                  dominant-baseline="central"
+                  style="direction: ltr; unicode-bidi: isolate;"
+                  text-anchor="start"
+                  transform="translate(4)"
+                  x="630"
+                  y="77.07142857142856"
+                >
+                  16k
+                </text>
+              </g>
+            </g>
+          </svg>
+        </div>
+        <div
+          class="fui-cart__legendContainer"
+        >
+          <div
+            aria-label="Legends"
+            aria-multiselectable="false"
+            class="fui-legend__root"
+            data-tabster="{\\"mover\\":{\\"cyclic\\":false,\\"direction\\":2,\\"memorizeCurrent\\":true}}"
+            role="listbox"
+          >
+            <div
+              class="fui-Overflow fui-legend__resizableArea"
+              style="text-align: unset;"
+            >
+              <button
+                aria-label="Product A"
+                aria-selected="false"
+                class="fui-Button fui-legend__legend"
+                data-overflow-item=""
+                role="option"
+                style="--rect-height: 12px; --rect-backgroundColor: #0078d4; --rect-borderColor: #0078d4;"
+                type="button"
               >
                 <div
                   class="fui-legend__rect"
@@ -5360,228 +5535,243 @@ Object {
             </g>
           </g>
           <g>
-            <rect
-              aria-label="Q1. Product A, 10K."
-              aria-labelledby="toolTipcallout_r_1v_"
-              fill="#0078d4"
-              height="45.8"
-              opacity="1"
-              role="img"
-              rx="0"
-              tabindex="0"
-              transform="translate(0,-6.542857142857141)"
-              width="208.71428571428575"
-              x="208.57142857142858"
-              y="191.57142857142856"
-            />
-            <rect
-              aria-label="Q1. Product B, -5K."
-              aria-labelledby="toolTipcallout_r_1v_"
-              fill="#ff8c00"
-              height="45.8"
-              opacity="1"
-              role="img"
-              rx="0"
-              tabindex="0"
-              transform="translate(0,-6.542857142857141)"
-              width="103.35714285714286"
-              x="103.21428571428572"
-              y="191.57142857142856"
-            />
-            <rect
-              aria-label="Q1. Product C, 8K."
-              aria-labelledby="toolTipcallout_r_1v_"
-              fill="#107c10"
-              height="45.8"
-              opacity="1"
-              role="img"
-              rx="0"
-              tabindex="0"
-              transform="translate(0,-6.542857142857141)"
-              width="168.57142857142858"
-              x="419.28571428571433"
-              y="191.57142857142856"
-            />
-            <text
-              aria-hidden="true"
-              class="fui-hbcwa__barLabel"
-              dominant-baseline="central"
-              style="direction: ltr; unicode-bidi: isolate;"
-              text-anchor="start"
-              transform="translate(4)"
-              x="587.8571428571429"
-              y="207.92857142857142"
-            >
-              13k
-            </text>
-            <rect
-              aria-label="Q2. Product A, -7K."
-              aria-labelledby="toolTipcallout_r_1v_"
-              fill="#0078d4"
-              height="45.8"
-              opacity="1"
-              role="img"
-              rx="0"
-              tabindex="0"
-              transform="translate(0,-6.542857142857141)"
-              width="145.5"
-              x="61.07142857142857"
-              y="126.14285714285714"
-            />
-            <rect
-              aria-label="Q2. Product B, 12K."
-              aria-labelledby="toolTipcallout_r_1v_"
-              fill="#ff8c00"
-              height="45.8"
-              opacity="1"
-              role="img"
-              rx="0"
-              tabindex="0"
-              transform="translate(0,-6.542857142857141)"
-              width="250.85714285714286"
-              x="208.57142857142858"
-              y="126.14285714285714"
-            />
-            <rect
-              aria-label="Q2. Product C, 3K."
-              aria-labelledby="toolTipcallout_r_1v_"
-              fill="#107c10"
-              height="45.8"
-              opacity="1"
-              role="img"
-              rx="0"
-              tabindex="0"
-              transform="translate(0,-6.542857142857141)"
-              width="63.214285714285694"
-              x="461.42857142857144"
-              y="126.14285714285714"
-            />
-            <text
-              aria-hidden="true"
-              class="fui-hbcwa__barLabel"
-              dominant-baseline="central"
-              style="direction: ltr; unicode-bidi: isolate;"
-              text-anchor="start"
-              transform="translate(4)"
-              x="524.6428571428571"
-              y="142.5"
-            >
-              8k
-            </text>
-            <rect
-              aria-label="Q3. Product A, 15K."
-              aria-labelledby="toolTipcallout_r_1v_"
-              fill="#0078d4"
-              height="45.8"
-              opacity="1"
-              role="img"
-              rx="0"
-              tabindex="0"
-              transform="translate(0,-6.542857142857141)"
-              width="314.07142857142856"
-              x="208.57142857142858"
-              y="60.71428571428571"
-            />
-            <rect
-              aria-label="Q3. Product B, -4K."
-              aria-labelledby="toolTipcallout_r_1v_"
-              fill="#ff8c00"
-              height="45.8"
-              opacity="1"
-              role="img"
-              rx="0"
-              tabindex="0"
-              transform="translate(0,-6.542857142857141)"
-              width="82.28571428571429"
-              x="124.28571428571429"
-              y="60.71428571428571"
-            />
-            <rect
-              aria-label="Q3. Product C, 5K."
-              aria-labelledby="toolTipcallout_r_1v_"
-              fill="#107c10"
-              height="45.8"
-              opacity="1"
-              role="img"
-              rx="0"
-              tabindex="0"
-              transform="translate(0,-6.542857142857141)"
-              width="105.35714285714286"
-              x="524.6428571428571"
-              y="60.71428571428571"
-            />
-            <text
-              aria-hidden="true"
-              class="fui-hbcwa__barLabel"
-              dominant-baseline="central"
-              style="direction: ltr; unicode-bidi: isolate;"
-              text-anchor="start"
-              transform="translate(4)"
-              x="630"
-              y="77.07142857142856"
-            >
-              16k
-            </text>
-          </g>
-        </svg>
-      </div>
-      <div
-        class="fui-cart__legendContainer"
-      >
-        <div
-          aria-label="Legends"
-          aria-multiselectable="false"
-          class="fui-legend__root"
-          data-tabster="{\\"mover\\":{\\"cyclic\\":false,\\"direction\\":2,\\"memorizeCurrent\\":true}}"
-          role="listbox"
-        >
-          <div
-            class="fui-Overflow fui-legend__resizableArea"
-            style="text-align: unset;"
-          >
-            <button
-              aria-label="Product A"
-              aria-selected="false"
-              class="fui-Button fui-legend__legend"
-              data-overflow-item=""
-              role="option"
-              style="--rect-height: 12px; --rect-backgroundColor: #0078d4; --rect-borderColor: #0078d4;"
-              type="button"
+            <g
+              aria-label="Q1, bar group 1 of 3, with 3 bars."
+              role="listbox"
             >
-              <div
-                class="fui-legend__rect"
-                style="height: 12px; background-color: rgb(0, 120, 212); border-color: rgb(0, 120, 212); --rect-content-high-contrast: linear-gradient(to right, #0078d4, #0078d4);"
+              <rect
+                aria-label="Q1. Product A, 10K."
+                aria-labelledby="toolTipcallout_r_1v_"
+                fill="#0078d4"
+                height="45.8"
+                opacity="1"
+                role="option"
+                rx="0"
+                tabindex="0"
+                transform="translate(0,-6.542857142857141)"
+                width="208.71428571428575"
+                x="208.57142857142858"
+                y="191.57142857142856"
               />
-              <div
-                class="fui-legend__text"
-              >
-                Product A
-              </div>
-            </button>
-            <button
-              aria-label="Product B"
-              aria-selected="false"
-              class="fui-Button fui-legend__legend"
-              data-overflow-item=""
-              role="option"
-              style="--rect-height: 12px; --rect-backgroundColor: #ff8c00; --rect-borderColor: #ff8c00;"
-              type="button"
-            >
-              <div
-                class="fui-legend__rect"
-                style="height: 12px; background-color: rgb(255, 140, 0); border-color: rgb(255, 140, 0); --rect-content-high-contrast: linear-gradient(to right, #ff8c00, #ff8c00);"
+              <rect
+                aria-label="Q1. Product B, -5K."
+                aria-labelledby="toolTipcallout_r_1v_"
+                fill="#ff8c00"
+                height="45.8"
+                opacity="1"
+                role="option"
+                rx="0"
+                tabindex="0"
+                transform="translate(0,-6.542857142857141)"
+                width="103.35714285714286"
+                x="103.21428571428572"
+                y="191.57142857142856"
               />
-              <div
-                class="fui-legend__text"
-              >
-                Product B
-              </div>
-            </button>
-            <button
-              aria-label="Product C"
-              aria-selected="false"
-              class="fui-Button fui-legend__legend"
-              data-overflow-item=""
+              <rect
+                aria-label="Q1. Product C, 8K."
+                aria-labelledby="toolTipcallout_r_1v_"
+                fill="#107c10"
+                height="45.8"
+                opacity="1"
+                role="option"
+                rx="0"
+                tabindex="0"
+                transform="translate(0,-6.542857142857141)"
+                width="168.57142857142858"
+                x="419.28571428571433"
+                y="191.57142857142856"
+              />
+              <text
+                aria-hidden="true"
+                class="fui-hbcwa__barLabel"
+                dominant-baseline="central"
+                style="direction: ltr; unicode-bidi: isolate;"
+                text-anchor="start"
+                transform="translate(4)"
+                x="587.8571428571429"
+                y="207.92857142857142"
+              >
+                13k
+              </text>
+            </g>
+            <g
+              aria-label="Q2, bar group 2 of 3, with 3 bars."
+              role="listbox"
+            >
+              <rect
+                aria-label="Q2. Product A, -7K."
+                aria-labelledby="toolTipcallout_r_1v_"
+                fill="#0078d4"
+                height="45.8"
+                opacity="1"
+                role="option"
+                rx="0"
+                tabindex="0"
+                transform="translate(0,-6.542857142857141)"
+                width="145.5"
+                x="61.07142857142857"
+                y="126.14285714285714"
+              />
+              <rect
+                aria-label="Q2. Product B, 12K."
+                aria-labelledby="toolTipcallout_r_1v_"
+                fill="#ff8c00"
+                height="45.8"
+                opacity="1"
+                role="option"
+                rx="0"
+                tabindex="0"
+                transform="translate(0,-6.542857142857141)"
+                width="250.85714285714286"
+                x="208.57142857142858"
+                y="126.14285714285714"
+              />
+              <rect
+                aria-label="Q2. Product C, 3K."
+                aria-labelledby="toolTipcallout_r_1v_"
+                fill="#107c10"
+                height="45.8"
+                opacity="1"
+                role="option"
+                rx="0"
+                tabindex="0"
+                transform="translate(0,-6.542857142857141)"
+                width="63.214285714285694"
+                x="461.42857142857144"
+                y="126.14285714285714"
+              />
+              <text
+                aria-hidden="true"
+                class="fui-hbcwa__barLabel"
+                dominant-baseline="central"
+                style="direction: ltr; unicode-bidi: isolate;"
+                text-anchor="start"
+                transform="translate(4)"
+                x="524.6428571428571"
+                y="142.5"
+              >
+                8k
+              </text>
+            </g>
+            <g
+              aria-label="Q3, bar group 3 of 3, with 3 bars."
+              role="listbox"
+            >
+              <rect
+                aria-label="Q3. Product A, 15K."
+                aria-labelledby="toolTipcallout_r_1v_"
+                fill="#0078d4"
+                height="45.8"
+                opacity="1"
+                role="option"
+                rx="0"
+                tabindex="0"
+                transform="translate(0,-6.542857142857141)"
+                width="314.07142857142856"
+                x="208.57142857142858"
+                y="60.71428571428571"
+              />
+              <rect
+                aria-label="Q3. Product B, -4K."
+                aria-labelledby="toolTipcallout_r_1v_"
+                fill="#ff8c00"
+                height="45.8"
+                opacity="1"
+                role="option"
+                rx="0"
+                tabindex="0"
+                transform="translate(0,-6.542857142857141)"
+                width="82.28571428571429"
+                x="124.28571428571429"
+                y="60.71428571428571"
+              />
+              <rect
+                aria-label="Q3. Product C, 5K."
+                aria-labelledby="toolTipcallout_r_1v_"
+                fill="#107c10"
+                height="45.8"
+                opacity="1"
+                role="option"
+                rx="0"
+                tabindex="0"
+                transform="translate(0,-6.542857142857141)"
+                width="105.35714285714286"
+                x="524.6428571428571"
+                y="60.71428571428571"
+              />
+              <text
+                aria-hidden="true"
+                class="fui-hbcwa__barLabel"
+                dominant-baseline="central"
+                style="direction: ltr; unicode-bidi: isolate;"
+                text-anchor="start"
+                transform="translate(4)"
+                x="630"
+                y="77.07142857142856"
+              >
+                16k
+              </text>
+            </g>
+          </g>
+        </svg>
+      </div>
+      <div
+        class="fui-cart__legendContainer"
+      >
+        <div
+          aria-label="Legends"
+          aria-multiselectable="false"
+          class="fui-legend__root"
+          data-tabster="{\\"mover\\":{\\"cyclic\\":false,\\"direction\\":2,\\"memorizeCurrent\\":true}}"
+          role="listbox"
+        >
+          <div
+            class="fui-Overflow fui-legend__resizableArea"
+            style="text-align: unset;"
+          >
+            <button
+              aria-label="Product A"
+              aria-selected="false"
+              class="fui-Button fui-legend__legend"
+              data-overflow-item=""
+              role="option"
+              style="--rect-height: 12px; --rect-backgroundColor: #0078d4; --rect-borderColor: #0078d4;"
+              type="button"
+            >
+              <div
+                class="fui-legend__rect"
+                style="height: 12px; background-color: rgb(0, 120, 212); border-color: rgb(0, 120, 212); --rect-content-high-contrast: linear-gradient(to right, #0078d4, #0078d4);"
+              />
+              <div
+                class="fui-legend__text"
+              >
+                Product A
+              </div>
+            </button>
+            <button
+              aria-label="Product B"
+              aria-selected="false"
+              class="fui-Button fui-legend__legend"
+              data-overflow-item=""
+              role="option"
+              style="--rect-height: 12px; --rect-backgroundColor: #ff8c00; --rect-borderColor: #ff8c00;"
+              type="button"
+            >
+              <div
+                class="fui-legend__rect"
+                style="height: 12px; background-color: rgb(255, 140, 0); border-color: rgb(255, 140, 0); --rect-content-high-contrast: linear-gradient(to right, #ff8c00, #ff8c00);"
+              />
+              <div
+                class="fui-legend__text"
+              >
+                Product B
+              </div>
+            </button>
+            <button
+              aria-label="Product C"
+              aria-selected="false"
+              class="fui-Button fui-legend__legend"
+              data-overflow-item=""
               role="option"
               style="--rect-height: 12px; --rect-backgroundColor: #107c10; --rect-borderColor: #107c10;"
               type="button"
@@ -5989,65 +6179,85 @@ Object {
               </g>
             </g>
             <g>
-              <rect
-                aria-label="2020/04/30. Oranges, 10%."
-                aria-labelledby="toolTipcallout_r_23_"
-                fill="#0078d4"
-                height="1"
-                opacity="1"
-                role="img"
-                rx="0"
-                tabindex="0"
-                width="147.5"
-                x="40"
-                y="8.200000000000001"
-              />
-              <rect
-                aria-label="2020/04/30. Bananas, 88%."
-                aria-labelledby="toolTipcallout_r_23_"
-                fill="#002050"
-                height="1"
-                opacity="1"
-                role="img"
-                rx="0"
-                tabindex="0"
-                width="590"
-                x="40"
-                y="11.719999999999999"
-              />
-              <rect
-                aria-label="2020/04/30. Apples, 37%."
-                aria-labelledby="toolTipcallout_r_23_"
-                fill="#00188f"
-                height="1"
-                opacity="1"
-                role="img"
-                rx="0"
-                tabindex="0"
-                width="368.75"
-                x="40"
-                y="19.2"
-              />
-              <rect
-                aria-label="2020/04/30. Grapes, 20%."
-                aria-labelledby="toolTipcallout_r_23_"
-                fill="#00bcf2"
-                height="1"
-                opacity="1"
-                role="img"
-                rx="0"
-                tabindex="0"
-                width="295"
-                x="40"
-                y="28"
-              />
-            </g>
-          </svg>
-        </div>
-      </div>
-    </div>
-  </body>,
-  "container": <div>
+              <g
+                aria-label="5000, bar group 1 of 4, with 1 bars."
+                role="listbox"
+              >
+                <rect
+                  aria-label="2020/04/30. Oranges, 10%."
+                  aria-labelledby="toolTipcallout_r_23_"
+                  fill="#0078d4"
+                  height="1"
+                  opacity="1"
+                  role="option"
+                  rx="0"
+                  tabindex="0"
+                  width="147.5"
+                  x="40"
+                  y="8.200000000000001"
+                />
+              </g>
+              <g
+                aria-label="13000, bar group 2 of 4, with 1 bars."
+                role="listbox"
+              >
+                <rect
+                  aria-label="2020/04/30. Bananas, 88%."
+                  aria-labelledby="toolTipcallout_r_23_"
+                  fill="#002050"
+                  height="1"
+                  opacity="1"
+                  role="option"
+                  rx="0"
+                  tabindex="0"
+                  width="590"
+                  x="40"
+                  y="11.719999999999999"
+                />
+              </g>
+              <g
+                aria-label="30000, bar group 3 of 4, with 1 bars."
+                role="listbox"
+              >
+                <rect
+                  aria-label="2020/04/30. Apples, 37%."
+                  aria-labelledby="toolTipcallout_r_23_"
+                  fill="#00188f"
+                  height="1"
+                  opacity="1"
+                  role="option"
+                  rx="0"
+                  tabindex="0"
+                  width="368.75"
+                  x="40"
+                  y="19.2"
+                />
+              </g>
+              <g
+                aria-label="50000, bar group 4 of 4, with 1 bars."
+                role="listbox"
+              >
+                <rect
+                  aria-label="2020/04/30. Grapes, 20%."
+                  aria-labelledby="toolTipcallout_r_23_"
+                  fill="#00bcf2"
+                  height="1"
+                  opacity="1"
+                  role="option"
+                  rx="0"
+                  tabindex="0"
+                  width="295"
+                  x="40"
+                  y="28"
+                />
+              </g>
+            </g>
+          </svg>
+        </div>
+      </div>
+    </div>
+  </body>,
+  "container": <div>
     <div
       class="fui-cart__root"
       id="chart_"
@@ -6375,58 +6585,78 @@ Object {
             </g>
           </g>
           <g>
-            <rect
-              aria-label="2020/04/30. Oranges, 10%."
-              aria-labelledby="toolTipcallout_r_23_"
-              fill="#0078d4"
-              height="1"
-              opacity="1"
-              role="img"
-              rx="0"
-              tabindex="0"
-              width="147.5"
-              x="40"
-              y="8.200000000000001"
-            />
-            <rect
-              aria-label="2020/04/30. Bananas, 88%."
-              aria-labelledby="toolTipcallout_r_23_"
-              fill="#002050"
-              height="1"
-              opacity="1"
-              role="img"
-              rx="0"
-              tabindex="0"
-              width="590"
-              x="40"
-              y="11.719999999999999"
-            />
-            <rect
-              aria-label="2020/04/30. Apples, 37%."
-              aria-labelledby="toolTipcallout_r_23_"
-              fill="#00188f"
-              height="1"
-              opacity="1"
-              role="img"
-              rx="0"
-              tabindex="0"
-              width="368.75"
-              x="40"
-              y="19.2"
-            />
-            <rect
-              aria-label="2020/04/30. Grapes, 20%."
-              aria-labelledby="toolTipcallout_r_23_"
-              fill="#00bcf2"
-              height="1"
-              opacity="1"
-              role="img"
-              rx="0"
-              tabindex="0"
-              width="295"
-              x="40"
-              y="28"
-            />
+            <g
+              aria-label="5000, bar group 1 of 4, with 1 bars."
+              role="listbox"
+            >
+              <rect
+                aria-label="2020/04/30. Oranges, 10%."
+                aria-labelledby="toolTipcallout_r_23_"
+                fill="#0078d4"
+                height="1"
+                opacity="1"
+                role="option"
+                rx="0"
+                tabindex="0"
+                width="147.5"
+                x="40"
+                y="8.200000000000001"
+              />
+            </g>
+            <g
+              aria-label="13000, bar group 2 of 4, with 1 bars."
+              role="listbox"
+            >
+              <rect
+                aria-label="2020/04/30. Bananas, 88%."
+                aria-labelledby="toolTipcallout_r_23_"
+                fill="#002050"
+                height="1"
+                opacity="1"
+                role="option"
+                rx="0"
+                tabindex="0"
+                width="590"
+                x="40"
+                y="11.719999999999999"
+              />
+            </g>
+            <g
+              aria-label="30000, bar group 3 of 4, with 1 bars."
+              role="listbox"
+            >
+              <rect
+                aria-label="2020/04/30. Apples, 37%."
+                aria-labelledby="toolTipcallout_r_23_"
+                fill="#00188f"
+                height="1"
+                opacity="1"
+                role="option"
+                rx="0"
+                tabindex="0"
+                width="368.75"
+                x="40"
+                y="19.2"
+              />
+            </g>
+            <g
+              aria-label="50000, bar group 4 of 4, with 1 bars."
+              role="listbox"
+            >
+              <rect
+                aria-label="2020/04/30. Grapes, 20%."
+                aria-labelledby="toolTipcallout_r_23_"
+                fill="#00bcf2"
+                height="1"
+                opacity="1"
+                role="option"
+                rx="0"
+                tabindex="0"
+                width="295"
+                x="40"
+                y="28"
+              />
+            </g>
           </g>
         </svg>
       </div>
@@ -6842,110 +7072,130 @@ Object {
               </g>
             </g>
             <g>
-              <rect
-                aria-label="String One. 1000."
-                aria-labelledby="toolTipcallout_r_26_"
-                fill="#0078d4"
-                height="32.714285714285715"
-                opacity="1"
-                role="img"
-                rx="0"
-                tabindex="0"
-                transform="translate(0,-3.634920634920636)"
-                width="118"
-                x="40"
-                y="206.11111111111111"
-              />
-              <text
-                aria-hidden="true"
-                class="fui-hbcwa__barLabel"
-                dominant-baseline="central"
-                style="direction: ltr; unicode-bidi: isolate;"
-                text-anchor="start"
-                transform="translate(4)"
-                x="158"
-                y="218.83333333333334"
-              >
-                1k
-              </text>
-              <rect
-                aria-label="String Two. 5000."
-                aria-labelledby="toolTipcallout_r_26_"
-                fill="#00bcf2"
-                height="32.714285714285715"
-                opacity="1"
-                role="img"
-                rx="0"
-                tabindex="0"
-                transform="translate(0,-3.634920634920636)"
-                width="590"
-                x="40"
-                y="155.22222222222223"
-              />
-              <text
-                aria-hidden="true"
-                class="fui-hbcwa__barLabel"
-                dominant-baseline="central"
-                style="direction: ltr; unicode-bidi: isolate;"
-                text-anchor="start"
-                transform="translate(4)"
-                x="630"
-                y="167.94444444444446"
-              >
-                5k
-              </text>
-              <rect
-                aria-label="String Three. 3000."
-                aria-labelledby="toolTipcallout_r_26_"
-                fill="#00188f"
-                height="32.714285714285715"
-                opacity="1"
-                role="img"
-                rx="0"
-                tabindex="0"
-                transform="translate(0,-3.634920634920636)"
-                width="354"
-                x="40"
-                y="104.33333333333334"
-              />
-              <text
-                aria-hidden="true"
-                class="fui-hbcwa__barLabel"
-                dominant-baseline="central"
-                style="direction: ltr; unicode-bidi: isolate;"
-                text-anchor="start"
-                transform="translate(4)"
-                x="394"
-                y="117.05555555555557"
-              >
-                3k
-              </text>
-              <rect
-                aria-label="String Four. 2000."
-                aria-labelledby="toolTipcallout_r_26_"
-                fill="#002050"
-                height="32.714285714285715"
-                opacity="1"
-                role="img"
-                rx="0"
-                tabindex="0"
-                transform="translate(0,-3.634920634920636)"
-                width="236"
-                x="40"
-                y="53.44444444444446"
-              />
-              <text
-                aria-hidden="true"
-                class="fui-hbcwa__barLabel"
-                dominant-baseline="central"
-                style="direction: ltr; unicode-bidi: isolate;"
-                text-anchor="start"
-                transform="translate(4)"
-                x="276"
-                y="66.16666666666669"
-              >
-                2k
-              </text>
+              <g
+                aria-label="String One, bar group 1 of 4, with 1 bars."
+                role="listbox"
+              >
+                <rect
+                  aria-label="String One. 1000."
+                  aria-labelledby="toolTipcallout_r_26_"
+                  fill="#0078d4"
+                  height="32.714285714285715"
+                  opacity="1"
+                  role="option"
+                  rx="0"
+                  tabindex="0"
+                  transform="translate(0,-3.634920634920636)"
+                  width="118"
+                  x="40"
+                  y="206.11111111111111"
+                />
+                <text
+                  aria-hidden="true"
+                  class="fui-hbcwa__barLabel"
+                  dominant-baseline="central"
+                  style="direction: ltr; unicode-bidi: isolate;"
+                  text-anchor="start"
+                  transform="translate(4)"
+                  x="158"
+                  y="218.83333333333334"
+                >
+                  1k
+                </text>
+              </g>
+              <g
+                aria-label="String Two, bar group 2 of 4, with 1 bars."
+                role="listbox"
+              >
+                <rect
+                  aria-label="String Two. 5000."
+                  aria-labelledby="toolTipcallout_r_26_"
+                  fill="#00bcf2"
+                  height="32.714285714285715"
+                  opacity="1"
+                  role="option"
+                  rx="0"
+                  tabindex="0"
+                  transform="translate(0,-3.634920634920636)"
+                  width="590"
+                  x="40"
+                  y="155.22222222222223"
+                />
+                <text
+                  aria-hidden="true"
+                  class="fui-hbcwa__barLabel"
+                  dominant-baseline="central"
+                  style="direction: ltr; unicode-bidi: isolate;"
+                  text-anchor="start"
+                  transform="translate(4)"
+                  x="630"
+                  y="167.94444444444446"
+                >
+                  5k
+                </text>
+              </g>
+              <g
+                aria-label="String Three, bar group 3 of 4, with 1 bars."
+                role="listbox"
+              >
+                <rect
+                  aria-label="String Three. 3000."
+                  aria-labelledby="toolTipcallout_r_26_"
+                  fill="#00188f"
+                  height="32.714285714285715"
+                  opacity="1"
+                  role="option"
+                  rx="0"
+                  tabindex="0"
+                  transform="translate(0,-3.634920634920636)"
+                  width="354"
+                  x="40"
+                  y="104.33333333333334"
+                />
+                <text
+                  aria-hidden="true"
+                  class="fui-hbcwa__barLabel"
+                  dominant-baseline="central"
+                  style="direction: ltr; unicode-bidi: isolate;"
+                  text-anchor="start"
+                  transform="translate(4)"
+                  x="394"
+                  y="117.05555555555557"
+                >
+                  3k
+                </text>
+              </g>
+              <g
+                aria-label="String Four, bar group 4 of 4, with 1 bars."
+                role="listbox"
+              >
+                <rect
+                  aria-label="String Four. 2000."
+                  aria-labelledby="toolTipcallout_r_26_"
+                  fill="#002050"
+                  height="32.714285714285715"
+                  opacity="1"
+                  role="option"
+                  rx="0"
+                  tabindex="0"
+                  transform="translate(0,-3.634920634920636)"
+                  width="236"
+                  x="40"
+                  y="53.44444444444446"
+                />
+                <text
+                  aria-hidden="true"
+                  class="fui-hbcwa__barLabel"
+                  dominant-baseline="central"
+                  style="direction: ltr; unicode-bidi: isolate;"
+                  text-anchor="start"
+                  transform="translate(4)"
+                  x="276"
+                  y="66.16666666666669"
+                >
+                  2k
+                </text>
+              </g>
             </g>
           </svg>
         </div>
@@ -7343,110 +7593,130 @@ Object {
             </g>
           </g>
           <g>
-            <rect
-              aria-label="String One. 1000."
-              aria-labelledby="toolTipcallout_r_26_"
-              fill="#0078d4"
-              height="32.714285714285715"
-              opacity="1"
-              role="img"
-              rx="0"
-              tabindex="0"
-              transform="translate(0,-3.634920634920636)"
-              width="118"
-              x="40"
-              y="206.11111111111111"
-            />
-            <text
-              aria-hidden="true"
-              class="fui-hbcwa__barLabel"
-              dominant-baseline="central"
-              style="direction: ltr; unicode-bidi: isolate;"
-              text-anchor="start"
-              transform="translate(4)"
-              x="158"
-              y="218.83333333333334"
+            <g
+              aria-label="String One, bar group 1 of 4, with 1 bars."
+              role="listbox"
             >
-              1k
-            </text>
-            <rect
-              aria-label="String Two. 5000."
-              aria-labelledby="toolTipcallout_r_26_"
-              fill="#00bcf2"
-              height="32.714285714285715"
-              opacity="1"
-              role="img"
-              rx="0"
-              tabindex="0"
-              transform="translate(0,-3.634920634920636)"
-              width="590"
-              x="40"
-              y="155.22222222222223"
-            />
-            <text
-              aria-hidden="true"
-              class="fui-hbcwa__barLabel"
-              dominant-baseline="central"
-              style="direction: ltr; unicode-bidi: isolate;"
-              text-anchor="start"
-              transform="translate(4)"
-              x="630"
-              y="167.94444444444446"
+              <rect
+                aria-label="String One. 1000."
+                aria-labelledby="toolTipcallout_r_26_"
+                fill="#0078d4"
+                height="32.714285714285715"
+                opacity="1"
+                role="option"
+                rx="0"
+                tabindex="0"
+                transform="translate(0,-3.634920634920636)"
+                width="118"
+                x="40"
+                y="206.11111111111111"
+              />
+              <text
+                aria-hidden="true"
+                class="fui-hbcwa__barLabel"
+                dominant-baseline="central"
+                style="direction: ltr; unicode-bidi: isolate;"
+                text-anchor="start"
+                transform="translate(4)"
+                x="158"
+                y="218.83333333333334"
+              >
+                1k
+              </text>
+            </g>
+            <g
+              aria-label="String Two, bar group 2 of 4, with 1 bars."
+              role="listbox"
             >
-              5k
-            </text>
-            <rect
-              aria-label="String Three. 3000."
-              aria-labelledby="toolTipcallout_r_26_"
-              fill="#00188f"
-              height="32.714285714285715"
-              opacity="1"
-              role="img"
-              rx="0"
-              tabindex="0"
-              transform="translate(0,-3.634920634920636)"
-              width="354"
-              x="40"
-              y="104.33333333333334"
-            />
-            <text
-              aria-hidden="true"
-              class="fui-hbcwa__barLabel"
-              dominant-baseline="central"
-              style="direction: ltr; unicode-bidi: isolate;"
-              text-anchor="start"
-              transform="translate(4)"
-              x="394"
-              y="117.05555555555557"
+              <rect
+                aria-label="String Two. 5000."
+                aria-labelledby="toolTipcallout_r_26_"
+                fill="#00bcf2"
+                height="32.714285714285715"
+                opacity="1"
+                role="option"
+                rx="0"
+                tabindex="0"
+                transform="translate(0,-3.634920634920636)"
+                width="590"
+                x="40"
+                y="155.22222222222223"
+              />
+              <text
+                aria-hidden="true"
+                class="fui-hbcwa__barLabel"
+                dominant-baseline="central"
+                style="direction: ltr; unicode-bidi: isolate;"
+                text-anchor="start"
+                transform="translate(4)"
+                x="630"
+                y="167.94444444444446"
+              >
+                5k
+              </text>
+            </g>
+            <g
+              aria-label="String Three, bar group 3 of 4, with 1 bars."
+              role="listbox"
             >
-              3k
-            </text>
-            <rect
-              aria-label="String Four. 2000."
-              aria-labelledby="toolTipcallout_r_26_"
-              fill="#002050"
-              height="32.714285714285715"
-              opacity="1"
-              role="img"
-              rx="0"
-              tabindex="0"
-              transform="translate(0,-3.634920634920636)"
-              width="236"
-              x="40"
-              y="53.44444444444446"
-            />
-            <text
-              aria-hidden="true"
-              class="fui-hbcwa__barLabel"
-              dominant-baseline="central"
-              style="direction: ltr; unicode-bidi: isolate;"
-              text-anchor="start"
-              transform="translate(4)"
-              x="276"
-              y="66.16666666666669"
+              <rect
+                aria-label="String Three. 3000."
+                aria-labelledby="toolTipcallout_r_26_"
+                fill="#00188f"
+                height="32.714285714285715"
+                opacity="1"
+                role="option"
+                rx="0"
+                tabindex="0"
+                transform="translate(0,-3.634920634920636)"
+                width="354"
+                x="40"
+                y="104.33333333333334"
+              />
+              <text
+                aria-hidden="true"
+                class="fui-hbcwa__barLabel"
+                dominant-baseline="central"
+                style="direction: ltr; unicode-bidi: isolate;"
+                text-anchor="start"
+                transform="translate(4)"
+                x="394"
+                y="117.05555555555557"
+              >
+                3k
+              </text>
+            </g>
+            <g
+              aria-label="String Four, bar group 4 of 4, with 1 bars."
+              role="listbox"
             >
-              2k
-            </text>
+              <rect
+                aria-label="String Four. 2000."
+                aria-labelledby="toolTipcallout_r_26_"
+                fill="#002050"
+                height="32.714285714285715"
+                opacity="1"
+                role="option"
+                rx="0"
+                tabindex="0"
+                transform="translate(0,-3.634920634920636)"
+                width="236"
+                x="40"
+                y="53.44444444444446"
+              />
+              <text
+                aria-hidden="true"
+                class="fui-hbcwa__barLabel"
+                dominant-baseline="central"
+                style="direction: ltr; unicode-bidi: isolate;"
+                text-anchor="start"
+                transform="translate(4)"
+                x="276"
+                y="66.16666666666669"
+              >
+                2k
+              </text>
+            </g>
           </g>
         </svg>
       </div>
@@ -7879,110 +8149,130 @@ Object {
               </g>
             </g>
             <g>
-              <rect
-                aria-label="String One. 1000."
-                aria-labelledby="toolTipcallout_r_2a_"
-                fill="#0078d4"
-                height="32.714285714285715"
-                opacity="1"
-                role="img"
-                rx="0"
-                tabindex="0"
-                transform="translate(0,-3.634920634920636)"
-                width="118"
-                x="40"
-                y="206.11111111111111"
-              />
-              <text
-                aria-hidden="true"
-                class="fui-hbcwa__barLabel"
-                dominant-baseline="central"
-                style="direction: ltr; unicode-bidi: isolate;"
-                text-anchor="start"
-                transform="translate(4)"
-                x="158"
-                y="218.83333333333334"
-              >
-                1k
-              </text>
-              <rect
-                aria-label="String Two. 5000."
-                aria-labelledby="toolTipcallout_r_2a_"
-                fill="#00bcf2"
-                height="32.714285714285715"
-                opacity="1"
-                role="img"
-                rx="0"
-                tabindex="0"
-                transform="translate(0,-3.634920634920636)"
-                width="590"
-                x="40"
-                y="155.22222222222223"
-              />
-              <text
-                aria-hidden="true"
-                class="fui-hbcwa__barLabel"
-                dominant-baseline="central"
-                style="direction: ltr; unicode-bidi: isolate;"
-                text-anchor="start"
-                transform="translate(4)"
-                x="630"
-                y="167.94444444444446"
-              >
-                5k
-              </text>
-              <rect
-                aria-label="String Three. 3000."
-                aria-labelledby="toolTipcallout_r_2a_"
-                fill="#00188f"
-                height="32.714285714285715"
-                opacity="1"
-                role="img"
-                rx="0"
-                tabindex="0"
-                transform="translate(0,-3.634920634920636)"
-                width="354"
-                x="40"
-                y="104.33333333333334"
-              />
-              <text
-                aria-hidden="true"
-                class="fui-hbcwa__barLabel"
-                dominant-baseline="central"
-                style="direction: ltr; unicode-bidi: isolate;"
-                text-anchor="start"
-                transform="translate(4)"
-                x="394"
-                y="117.05555555555557"
-              >
-                3k
-              </text>
-              <rect
-                aria-label="String Four. 2000."
-                aria-labelledby="toolTipcallout_r_2a_"
-                fill="#002050"
-                height="32.714285714285715"
-                opacity="1"
-                role="img"
-                rx="0"
-                tabindex="0"
-                transform="translate(0,-3.634920634920636)"
-                width="236"
-                x="40"
-                y="53.44444444444446"
-              />
-              <text
-                aria-hidden="true"
-                class="fui-hbcwa__barLabel"
-                dominant-baseline="central"
-                style="direction: ltr; unicode-bidi: isolate;"
-                text-anchor="start"
-                transform="translate(4)"
-                x="276"
-                y="66.16666666666669"
-              >
-                2k
-              </text>
+              <g
+                aria-label="String One, bar group 1 of 4, with 1 bars."
+                role="listbox"
+              >
+                <rect
+                  aria-label="String One. 1000."
+                  aria-labelledby="toolTipcallout_r_2a_"
+                  fill="#0078d4"
+                  height="32.714285714285715"
+                  opacity="1"
+                  role="option"
+                  rx="0"
+                  tabindex="0"
+                  transform="translate(0,-3.634920634920636)"
+                  width="118"
+                  x="40"
+                  y="206.11111111111111"
+                />
+                <text
+                  aria-hidden="true"
+                  class="fui-hbcwa__barLabel"
+                  dominant-baseline="central"
+                  style="direction: ltr; unicode-bidi: isolate;"
+                  text-anchor="start"
+                  transform="translate(4)"
+                  x="158"
+                  y="218.83333333333334"
+                >
+                  1k
+                </text>
+              </g>
+              <g
+                aria-label="String Two, bar group 2 of 4, with 1 bars."
+                role="listbox"
+              >
+                <rect
+                  aria-label="String Two. 5000."
+                  aria-labelledby="toolTipcallout_r_2a_"
+                  fill="#00bcf2"
+                  height="32.714285714285715"
+                  opacity="1"
+                  role="option"
+                  rx="0"
+                  tabindex="0"
+                  transform="translate(0,-3.634920634920636)"
+                  width="590"
+                  x="40"
+                  y="155.22222222222223"
+                />
+                <text
+                  aria-hidden="true"
+                  class="fui-hbcwa__barLabel"
+                  dominant-baseline="central"
+                  style="direction: ltr; unicode-bidi: isolate;"
+                  text-anchor="start"
+                  transform="translate(4)"
+                  x="630"
+                  y="167.94444444444446"
+                >
+                  5k
+                </text>
+              </g>
+              <g
+                aria-label="String Three, bar group 3 of 4, with 1 bars."
+                role="listbox"
+              >
+                <rect
+                  aria-label="String Three. 3000."
+                  aria-labelledby="toolTipcallout_r_2a_"
+                  fill="#00188f"
+                  height="32.714285714285715"
+                  opacity="1"
+                  role="option"
+                  rx="0"
+                  tabindex="0"
+                  transform="translate(0,-3.634920634920636)"
+                  width="354"
+                  x="40"
+                  y="104.33333333333334"
+                />
+                <text
+                  aria-hidden="true"
+                  class="fui-hbcwa__barLabel"
+                  dominant-baseline="central"
+                  style="direction: ltr; unicode-bidi: isolate;"
+                  text-anchor="start"
+                  transform="translate(4)"
+                  x="394"
+                  y="117.05555555555557"
+                >
+                  3k
+                </text>
+              </g>
+              <g
+                aria-label="String Four, bar group 4 of 4, with 1 bars."
+                role="listbox"
+              >
+                <rect
+                  aria-label="String Four. 2000."
+                  aria-labelledby="toolTipcallout_r_2a_"
+                  fill="#002050"
+                  height="32.714285714285715"
+                  opacity="1"
+                  role="option"
+                  rx="0"
+                  tabindex="0"
+                  transform="translate(0,-3.634920634920636)"
+                  width="236"
+                  x="40"
+                  y="53.44444444444446"
+                />
+                <text
+                  aria-hidden="true"
+                  class="fui-hbcwa__barLabel"
+                  dominant-baseline="central"
+                  style="direction: ltr; unicode-bidi: isolate;"
+                  text-anchor="start"
+                  transform="translate(4)"
+                  x="276"
+                  y="66.16666666666669"
+                >
+                  2k
+                </text>
+              </g>
             </g>
           </svg>
         </div>
@@ -8351,110 +8641,130 @@ Object {
             </g>
           </g>
           <g>
-            <rect
-              aria-label="String One. 1000."
-              aria-labelledby="toolTipcallout_r_2a_"
-              fill="#0078d4"
-              height="32.714285714285715"
-              opacity="1"
-              role="img"
-              rx="0"
-              tabindex="0"
-              transform="translate(0,-3.634920634920636)"
-              width="118"
-              x="40"
-              y="206.11111111111111"
-            />
-            <text
-              aria-hidden="true"
-              class="fui-hbcwa__barLabel"
-              dominant-baseline="central"
-              style="direction: ltr; unicode-bidi: isolate;"
-              text-anchor="start"
-              transform="translate(4)"
-              x="158"
-              y="218.83333333333334"
+            <g
+              aria-label="String One, bar group 1 of 4, with 1 bars."
+              role="listbox"
             >
-              1k
-            </text>
-            <rect
-              aria-label="String Two. 5000."
-              aria-labelledby="toolTipcallout_r_2a_"
-              fill="#00bcf2"
-              height="32.714285714285715"
-              opacity="1"
-              role="img"
-              rx="0"
-              tabindex="0"
-              transform="translate(0,-3.634920634920636)"
-              width="590"
-              x="40"
-              y="155.22222222222223"
-            />
-            <text
-              aria-hidden="true"
-              class="fui-hbcwa__barLabel"
-              dominant-baseline="central"
-              style="direction: ltr; unicode-bidi: isolate;"
-              text-anchor="start"
-              transform="translate(4)"
-              x="630"
-              y="167.94444444444446"
+              <rect
+                aria-label="String One. 1000."
+                aria-labelledby="toolTipcallout_r_2a_"
+                fill="#0078d4"
+                height="32.714285714285715"
+                opacity="1"
+                role="option"
+                rx="0"
+                tabindex="0"
+                transform="translate(0,-3.634920634920636)"
+                width="118"
+                x="40"
+                y="206.11111111111111"
+              />
+              <text
+                aria-hidden="true"
+                class="fui-hbcwa__barLabel"
+                dominant-baseline="central"
+                style="direction: ltr; unicode-bidi: isolate;"
+                text-anchor="start"
+                transform="translate(4)"
+                x="158"
+                y="218.83333333333334"
+              >
+                1k
+              </text>
+            </g>
+            <g
+              aria-label="String Two, bar group 2 of 4, with 1 bars."
+              role="listbox"
             >
-              5k
-            </text>
-            <rect
-              aria-label="String Three. 3000."
-              aria-labelledby="toolTipcallout_r_2a_"
-              fill="#00188f"
-              height="32.714285714285715"
-              opacity="1"
-              role="img"
-              rx="0"
-              tabindex="0"
-              transform="translate(0,-3.634920634920636)"
-              width="354"
-              x="40"
-              y="104.33333333333334"
-            />
-            <text
-              aria-hidden="true"
-              class="fui-hbcwa__barLabel"
-              dominant-baseline="central"
-              style="direction: ltr; unicode-bidi: isolate;"
-              text-anchor="start"
-              transform="translate(4)"
-              x="394"
-              y="117.05555555555557"
+              <rect
+                aria-label="String Two. 5000."
+                aria-labelledby="toolTipcallout_r_2a_"
+                fill="#00bcf2"
+                height="32.714285714285715"
+                opacity="1"
+                role="option"
+                rx="0"
+                tabindex="0"
+                transform="translate(0,-3.634920634920636)"
+                width="590"
+                x="40"
+                y="155.22222222222223"
+              />
+              <text
+                aria-hidden="true"
+                class="fui-hbcwa__barLabel"
+                dominant-baseline="central"
+                style="direction: ltr; unicode-bidi: isolate;"
+                text-anchor="start"
+                transform="translate(4)"
+                x="630"
+                y="167.94444444444446"
+              >
+                5k
+              </text>
+            </g>
+            <g
+              aria-label="String Three, bar group 3 of 4, with 1 bars."
+              role="listbox"
             >
-              3k
-            </text>
-            <rect
-              aria-label="String Four. 2000."
-              aria-labelledby="toolTipcallout_r_2a_"
-              fill="#002050"
-              height="32.714285714285715"
-              opacity="1"
-              role="img"
-              rx="0"
-              tabindex="0"
-              transform="translate(0,-3.634920634920636)"
-              width="236"
-              x="40"
-              y="53.44444444444446"
-            />
-            <text
-              aria-hidden="true"
-              class="fui-hbcwa__barLabel"
-              dominant-baseline="central"
-              style="direction: ltr; unicode-bidi: isolate;"
-              text-anchor="start"
-              transform="translate(4)"
-              x="276"
-              y="66.16666666666669"
+              <rect
+                aria-label="String Three. 3000."
+                aria-labelledby="toolTipcallout_r_2a_"
+                fill="#00188f"
+                height="32.714285714285715"
+                opacity="1"
+                role="option"
+                rx="0"
+                tabindex="0"
+                transform="translate(0,-3.634920634920636)"
+                width="354"
+                x="40"
+                y="104.33333333333334"
+              />
+              <text
+                aria-hidden="true"
+                class="fui-hbcwa__barLabel"
+                dominant-baseline="central"
+                style="direction: ltr; unicode-bidi: isolate;"
+                text-anchor="start"
+                transform="translate(4)"
+                x="394"
+                y="117.05555555555557"
+              >
+                3k
+              </text>
+            </g>
+            <g
+              aria-label="String Four, bar group 4 of 4, with 1 bars."
+              role="listbox"
             >
-              2k
-            </text>
+              <rect
+                aria-label="String Four. 2000."
+                aria-labelledby="toolTipcallout_r_2a_"
+                fill="#002050"
+                height="32.714285714285715"
+                opacity="1"
+                role="option"
+                rx="0"
+                tabindex="0"
+                transform="translate(0,-3.634920634920636)"
+                width="236"
+                x="40"
+                y="53.44444444444446"
+              />
+              <text
+                aria-hidden="true"
+                class="fui-hbcwa__barLabel"
+                dominant-baseline="central"
+                style="direction: ltr; unicode-bidi: isolate;"
+                text-anchor="start"
+                transform="translate(4)"
+                x="276"
+                y="66.16666666666669"
+              >
+                2k
+              </text>
+            </g>
           </g>
         </svg>
       </div>
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 cd8af79f37cdb7..a2a8c7c8f37249 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
@@ -240,7 +240,9 @@ exports[`VegaDeclarativeChart - Bar+Line Combo Rendering Bar + Line Combinations
             >
               <g>
                 <g
+                  aria-label="Jan. North, 100. South, 80. Line 1, 120. Line 1, 120."
                   id="0-singleBar"
+                  role="listbox"
                 >
                   <rect
                     aria-label="Jan. North, 100."
@@ -249,7 +251,7 @@ exports[`VegaDeclarativeChart - Bar+Line Combo Rendering Bar + Line Combinations
                     fill="#637cef"
                     height="NaN"
                     opacity="1"
-                    role="img"
+                    role="option"
                     rx="3"
                     tabindex="0"
                     transform="translate(0, 0)"
@@ -264,7 +266,7 @@ exports[`VegaDeclarativeChart - Bar+Line Combo Rendering Bar + Line Combinations
                     fill="#e3008c"
                     height="NaN"
                     opacity="1"
-                    role="img"
+                    role="option"
                     rx="3"
                     tabindex="0"
                     transform="translate(0, 0)"
@@ -276,7 +278,9 @@ exports[`VegaDeclarativeChart - Bar+Line Combo Rendering Bar + Line Combinations
               </g>
               <g>
                 <g
+                  aria-label="Feb. North, 120. South, 90. Line 1, 130. Line 1, 130."
                   id="1-singleBar"
+                  role="listbox"
                 >
                   <rect
                     aria-label="Feb. North, 120."
@@ -285,7 +289,7 @@ exports[`VegaDeclarativeChart - Bar+Line Combo Rendering Bar + Line Combinations
                     fill="#637cef"
                     height="NaN"
                     opacity="1"
-                    role="img"
+                    role="option"
                     rx="3"
                     tabindex="0"
                     transform="translate(0, 0)"
@@ -300,7 +304,7 @@ exports[`VegaDeclarativeChart - Bar+Line Combo Rendering Bar + Line Combinations
                     fill="#e3008c"
                     height="NaN"
                     opacity="1"
-                    role="img"
+                    role="option"
                     rx="3"
                     tabindex="0"
                     transform="translate(0, 0)"
@@ -312,7 +316,9 @@ exports[`VegaDeclarativeChart - Bar+Line Combo Rendering Bar + Line Combinations
               </g>
               <g>
                 <g
+                  aria-label="Mar. North, 110. South, 85. Line 1, 125. Line 1, 125."
                   id="2-singleBar"
+                  role="listbox"
                 >
                   <rect
                     aria-label="Mar. North, 110."
@@ -321,7 +327,7 @@ exports[`VegaDeclarativeChart - Bar+Line Combo Rendering Bar + Line Combinations
                     fill="#637cef"
                     height="NaN"
                     opacity="1"
-                    role="img"
+                    role="option"
                     rx="3"
                     tabindex="0"
                     transform="translate(0, 0)"
@@ -336,7 +342,7 @@ exports[`VegaDeclarativeChart - Bar+Line Combo Rendering Bar + Line Combinations
                     fill="#e3008c"
                     height="NaN"
                     opacity="1"
-                    role="img"
+                    role="option"
                     rx="3"
                     tabindex="0"
                     transform="translate(0, 0)"
@@ -348,139 +354,144 @@ exports[`VegaDeclarativeChart - Bar+Line Combo Rendering Bar + Line Combinations
               </g>
             </g>
             <g>
-              <line
-                opacity="1"
-                stroke="#2aa0a4"
-                stroke-linecap="round"
-                stroke-width="3"
-                transform="translate(5.428571428571429, 0)"
-                x1="37.14285714285714"
-                x2="37.14285714285714"
-                y1="NaN"
-                y2="NaN"
-              />
-              <line
-                opacity="1"
-                stroke="#2aa0a4"
-                stroke-linecap="round"
-                stroke-width="3"
-                transform="translate(5.428571428571429, 0)"
-                x1="37.14285714285714"
-                x2="4.571428571428569"
-                y1="NaN"
-                y2="NaN"
-              />
-              <line
-                opacity="1"
-                stroke="#2aa0a4"
-                stroke-linecap="round"
-                stroke-width="3"
-                transform="translate(5.428571428571429, 0)"
-                x1="4.571428571428569"
-                x2="4.571428571428569"
-                y1="NaN"
-                y2="NaN"
-              />
-              <line
-                opacity="1"
-                stroke="#2aa0a4"
-                stroke-linecap="round"
-                stroke-width="3"
-                transform="translate(5.428571428571429, 0)"
-                x1="4.571428571428569"
-                x2="-28"
-                y1="NaN"
-                y2="NaN"
-              />
-              <line
-                opacity="1"
-                stroke="#2aa0a4"
-                stroke-linecap="round"
-                stroke-width="3"
-                transform="translate(5.428571428571429, 0)"
-                x1="-28"
-                x2="-28"
-                y1="NaN"
-                y2="NaN"
-              />
-              <circle
-                aria-label="Jan. Line 1, 120."
-                cx="37.14285714285714"
-                cy="NaN"
-                fill="var(--colorNeutralBackground1)"
-                opacity="0"
-                r="8"
-                role="img"
-                stroke="#2aa0a4"
-                stroke-width="3"
-                tabindex="0"
-                transform="translate(5.428571428571429, 0)"
-              />
-              <circle
-                aria-label="Jan. Line 1, 120."
-                cx="37.14285714285714"
-                cy="NaN"
-                fill="var(--colorNeutralBackground1)"
-                opacity="0"
-                r="8"
-                role="img"
-                stroke="#2aa0a4"
-                stroke-width="3"
-                tabindex="0"
-                transform="translate(5.428571428571429, 0)"
-              />
-              <circle
-                aria-label="Feb. Line 1, 130."
-                cx="4.571428571428569"
-                cy="NaN"
-                fill="var(--colorNeutralBackground1)"
-                opacity="0"
-                r="8"
-                role="img"
-                stroke="#2aa0a4"
-                stroke-width="3"
-                tabindex="0"
-                transform="translate(5.428571428571429, 0)"
-              />
-              <circle
-                aria-label="Feb. Line 1, 130."
-                cx="4.571428571428569"
-                cy="NaN"
-                fill="var(--colorNeutralBackground1)"
-                opacity="0"
-                r="8"
-                role="img"
-                stroke="#2aa0a4"
-                stroke-width="3"
-                tabindex="0"
-                transform="translate(5.428571428571429, 0)"
-              />
-              <circle
-                aria-label="Mar. Line 1, 125."
-                cx="-28"
-                cy="NaN"
-                fill="var(--colorNeutralBackground1)"
-                opacity="0"
-                r="8"
-                role="img"
-                stroke="#2aa0a4"
-                stroke-width="3"
-                tabindex="0"
-                transform="translate(5.428571428571429, 0)"
-              />
-              <circle
-                aria-label="Mar. Line 1, 125."
-                cx="-28"
-                cy="NaN"
-                fill="var(--colorNeutralBackground1)"
-                opacity="0"
-                r="8"
-                role="img"
-                stroke="#2aa0a4"
-                stroke-width="3"
-                tabindex="0"
-                transform="translate(5.428571428571429, 0)"
-              />
+              <g
+                aria-label="Line 1, line with 6 data points."
+                role="listbox"
+              >
+                <line
+                  opacity="1"
+                  stroke="#2aa0a4"
+                  stroke-linecap="round"
+                  stroke-width="3"
+                  transform="translate(5.428571428571429, 0)"
+                  x1="37.14285714285714"
+                  x2="37.14285714285714"
+                  y1="NaN"
+                  y2="NaN"
+                />
+                <line
+                  opacity="1"
+                  stroke="#2aa0a4"
+                  stroke-linecap="round"
+                  stroke-width="3"
+                  transform="translate(5.428571428571429, 0)"
+                  x1="37.14285714285714"
+                  x2="4.571428571428569"
+                  y1="NaN"
+                  y2="NaN"
+                />
+                <line
+                  opacity="1"
+                  stroke="#2aa0a4"
+                  stroke-linecap="round"
+                  stroke-width="3"
+                  transform="translate(5.428571428571429, 0)"
+                  x1="4.571428571428569"
+                  x2="4.571428571428569"
+                  y1="NaN"
+                  y2="NaN"
+                />
+                <line
+                  opacity="1"
+                  stroke="#2aa0a4"
+                  stroke-linecap="round"
+                  stroke-width="3"
+                  transform="translate(5.428571428571429, 0)"
+                  x1="4.571428571428569"
+                  x2="-28"
+                  y1="NaN"
+                  y2="NaN"
+                />
+                <line
+                  opacity="1"
+                  stroke="#2aa0a4"
+                  stroke-linecap="round"
+                  stroke-width="3"
+                  transform="translate(5.428571428571429, 0)"
+                  x1="-28"
+                  x2="-28"
+                  y1="NaN"
+                  y2="NaN"
+                />
+                <circle
+                  aria-label="Jan. Line 1, 120."
+                  cx="37.14285714285714"
+                  cy="NaN"
+                  fill="var(--colorNeutralBackground1)"
+                  opacity="0"
+                  r="8"
+                  role="option"
+                  stroke="#2aa0a4"
+                  stroke-width="3"
+                  tabindex="0"
+                  transform="translate(5.428571428571429, 0)"
+                />
+                <circle
+                  aria-label="Jan. Line 1, 120."
+                  cx="37.14285714285714"
+                  cy="NaN"
+                  fill="var(--colorNeutralBackground1)"
+                  opacity="0"
+                  r="8"
+                  role="option"
+                  stroke="#2aa0a4"
+                  stroke-width="3"
+                  tabindex="0"
+                  transform="translate(5.428571428571429, 0)"
+                />
+                <circle
+                  aria-label="Feb. Line 1, 130."
+                  cx="4.571428571428569"
+                  cy="NaN"
+                  fill="var(--colorNeutralBackground1)"
+                  opacity="0"
+                  r="8"
+                  role="option"
+                  stroke="#2aa0a4"
+                  stroke-width="3"
+                  tabindex="0"
+                  transform="translate(5.428571428571429, 0)"
+                />
+                <circle
+                  aria-label="Feb. Line 1, 130."
+                  cx="4.571428571428569"
+                  cy="NaN"
+                  fill="var(--colorNeutralBackground1)"
+                  opacity="0"
+                  r="8"
+                  role="option"
+                  stroke="#2aa0a4"
+                  stroke-width="3"
+                  tabindex="0"
+                  transform="translate(5.428571428571429, 0)"
+                />
+                <circle
+                  aria-label="Mar. Line 1, 125."
+                  cx="-28"
+                  cy="NaN"
+                  fill="var(--colorNeutralBackground1)"
+                  opacity="0"
+                  r="8"
+                  role="option"
+                  stroke="#2aa0a4"
+                  stroke-width="3"
+                  tabindex="0"
+                  transform="translate(5.428571428571429, 0)"
+                />
+                <circle
+                  aria-label="Mar. Line 1, 125."
+                  cx="-28"
+                  cy="NaN"
+                  fill="var(--colorNeutralBackground1)"
+                  opacity="0"
+                  r="8"
+                  role="option"
+                  stroke="#2aa0a4"
+                  stroke-width="3"
+                  tabindex="0"
+                  transform="translate(5.428571428571429, 0)"
+                />
+              </g>
             </g>
           </svg>
         </div>
@@ -819,7 +830,9 @@ exports[`VegaDeclarativeChart - Bar+Line Combo Rendering Bar + Line Combinations
             >
               <g>
                 <g
+                  aria-label="2024-01-01. A, 100. Line 1, 30."
                   id="0-singleBar"
+                  role="listbox"
                 >
                   <rect
                     aria-label="2024-01-01. A, 100."
@@ -828,7 +841,7 @@ exports[`VegaDeclarativeChart - Bar+Line Combo Rendering Bar + Line Combinations
                     fill="#637cef"
                     height="NaN"
                     opacity="1"
-                    role="img"
+                    role="option"
                     rx="3"
                     tabindex="0"
                     transform="translate(0, 0)"
@@ -840,7 +853,9 @@ exports[`VegaDeclarativeChart - Bar+Line Combo Rendering Bar + Line Combinations
               </g>
               <g>
                 <g
+                  aria-label="2024-01-02. A, 120. Line 1, 35."
                   id="1-singleBar"
+                  role="listbox"
                 >
                   <rect
                     aria-label="2024-01-02. A, 120."
@@ -849,7 +864,7 @@ exports[`VegaDeclarativeChart - Bar+Line Combo Rendering Bar + Line Combinations
                     fill="#637cef"
                     height="NaN"
                     opacity="1"
-                    role="img"
+                    role="option"
                     rx="3"
                     tabindex="0"
                     transform="translate(0, 0)"
@@ -861,7 +876,9 @@ exports[`VegaDeclarativeChart - Bar+Line Combo Rendering Bar + Line Combinations
               </g>
               <g>
                 <g
+                  aria-label="2024-01-03. A, 110. Line 1, 32."
                   id="2-singleBar"
+                  role="listbox"
                 >
                   <rect
                     aria-label="2024-01-03. A, 110."
@@ -870,7 +887,7 @@ exports[`VegaDeclarativeChart - Bar+Line Combo Rendering Bar + Line Combinations
                     fill="#637cef"
                     height="NaN"
                     opacity="1"
-                    role="img"
+                    role="option"
                     rx="3"
                     tabindex="0"
                     transform="translate(0, 0)"
@@ -882,67 +899,72 @@ exports[`VegaDeclarativeChart - Bar+Line Combo Rendering Bar + Line Combinations
               </g>
             </g>
             <g>
-              <line
-                opacity="1"
-                stroke="#e3008c"
-                stroke-linecap="round"
-                stroke-width="3"
-                transform="translate(5.428571428571429, 0)"
-                x1="37.14285714285714"
-                x2="4.571428571428569"
-                y1="NaN"
-                y2="NaN"
-              />
-              <line
-                opacity="1"
-                stroke="#e3008c"
-                stroke-linecap="round"
-                stroke-width="3"
-                transform="translate(5.428571428571429, 0)"
-                x1="4.571428571428569"
-                x2="-28"
-                y1="NaN"
-                y2="NaN"
-              />
-              <circle
-                aria-label="2024-01-01. Line 1, 30."
-                cx="37.14285714285714"
-                cy="NaN"
-                fill="var(--colorNeutralBackground1)"
-                opacity="0"
-                r="8"
-                role="img"
-                stroke="#e3008c"
-                stroke-width="3"
-                tabindex="0"
-                transform="translate(5.428571428571429, 0)"
-              />
-              <circle
-                aria-label="2024-01-02. Line 1, 35."
-                cx="4.571428571428569"
-                cy="NaN"
-                fill="var(--colorNeutralBackground1)"
-                opacity="0"
-                r="8"
-                role="img"
-                stroke="#e3008c"
-                stroke-width="3"
-                tabindex="0"
-                transform="translate(5.428571428571429, 0)"
-              />
-              <circle
-                aria-label="2024-01-03. Line 1, 32."
-                cx="-28"
-                cy="NaN"
-                fill="var(--colorNeutralBackground1)"
-                opacity="0"
-                r="8"
-                role="img"
-                stroke="#e3008c"
-                stroke-width="3"
-                tabindex="0"
-                transform="translate(5.428571428571429, 0)"
-              />
+              <g
+                aria-label="Line 1, line with 3 data points."
+                role="listbox"
+              >
+                <line
+                  opacity="1"
+                  stroke="#e3008c"
+                  stroke-linecap="round"
+                  stroke-width="3"
+                  transform="translate(5.428571428571429, 0)"
+                  x1="37.14285714285714"
+                  x2="4.571428571428569"
+                  y1="NaN"
+                  y2="NaN"
+                />
+                <line
+                  opacity="1"
+                  stroke="#e3008c"
+                  stroke-linecap="round"
+                  stroke-width="3"
+                  transform="translate(5.428571428571429, 0)"
+                  x1="4.571428571428569"
+                  x2="-28"
+                  y1="NaN"
+                  y2="NaN"
+                />
+                <circle
+                  aria-label="2024-01-01. Line 1, 30."
+                  cx="37.14285714285714"
+                  cy="NaN"
+                  fill="var(--colorNeutralBackground1)"
+                  opacity="0"
+                  r="8"
+                  role="option"
+                  stroke="#e3008c"
+                  stroke-width="3"
+                  tabindex="0"
+                  transform="translate(5.428571428571429, 0)"
+                />
+                <circle
+                  aria-label="2024-01-02. Line 1, 35."
+                  cx="4.571428571428569"
+                  cy="NaN"
+                  fill="var(--colorNeutralBackground1)"
+                  opacity="0"
+                  r="8"
+                  role="option"
+                  stroke="#e3008c"
+                  stroke-width="3"
+                  tabindex="0"
+                  transform="translate(5.428571428571429, 0)"
+                />
+                <circle
+                  aria-label="2024-01-03. Line 1, 32."
+                  cx="-28"
+                  cy="NaN"
+                  fill="var(--colorNeutralBackground1)"
+                  opacity="0"
+                  r="8"
+                  role="option"
+                  stroke="#e3008c"
+                  stroke-width="3"
+                  tabindex="0"
+                  transform="translate(5.428571428571429, 0)"
+                />
+              </g>
             </g>
           </svg>
         </div>
@@ -1262,7 +1284,9 @@ exports[`VegaDeclarativeChart - Bar+Line Combo Rendering Bar + Line Combinations
             >
               <g>
                 <g
+                  aria-label="A. Bar, 10. Line 1, 15."
                   id="0-singleBar"
+                  role="listbox"
                 >
                   <rect
                     aria-label="A. Bar, 10."
@@ -1271,7 +1295,7 @@ exports[`VegaDeclarativeChart - Bar+Line Combo Rendering Bar + Line Combinations
                     fill="#637cef"
                     height="NaN"
                     opacity="1"
-                    role="img"
+                    role="option"
                     rx="3"
                     tabindex="0"
                     transform="translate(0, 0)"
@@ -1283,7 +1307,9 @@ exports[`VegaDeclarativeChart - Bar+Line Combo Rendering Bar + Line Combinations
               </g>
               <g>
                 <g
+                  aria-label="B. Bar, 20. Line 1, 18."
                   id="1-singleBar"
+                  role="listbox"
                 >
                   <rect
                     aria-label="B. Bar, 20."
@@ -1292,7 +1318,7 @@ exports[`VegaDeclarativeChart - Bar+Line Combo Rendering Bar + Line Combinations
                     fill="#637cef"
                     height="NaN"
                     opacity="1"
-                    role="img"
+                    role="option"
                     rx="3"
                     tabindex="0"
                     transform="translate(0, 0)"
@@ -1304,7 +1330,9 @@ exports[`VegaDeclarativeChart - Bar+Line Combo Rendering Bar + Line Combinations
               </g>
               <g>
                 <g
+                  aria-label="C. Bar, 15. Line 1, 22."
                   id="2-singleBar"
+                  role="listbox"
                 >
                   <rect
                     aria-label="C. Bar, 15."
@@ -1313,7 +1341,7 @@ exports[`VegaDeclarativeChart - Bar+Line Combo Rendering Bar + Line Combinations
                     fill="#637cef"
                     height="NaN"
                     opacity="1"
-                    role="img"
+                    role="option"
                     rx="3"
                     tabindex="0"
                     transform="translate(0, 0)"
@@ -1325,67 +1353,72 @@ exports[`VegaDeclarativeChart - Bar+Line Combo Rendering Bar + Line Combinations
               </g>
             </g>
             <g>
-              <line
-                opacity="1"
-                stroke="#e3008c"
-                stroke-linecap="round"
-                stroke-width="3"
-                transform="translate(5.428571428571429, 0)"
-                x1="37.14285714285714"
-                x2="4.571428571428569"
-                y1="NaN"
-                y2="NaN"
-              />
-              <line
-                opacity="1"
-                stroke="#e3008c"
-                stroke-linecap="round"
-                stroke-width="3"
-                transform="translate(5.428571428571429, 0)"
-                x1="4.571428571428569"
-                x2="-28"
-                y1="NaN"
-                y2="NaN"
-              />
-              <circle
-                aria-label="A. Line 1, 15."
-                cx="37.14285714285714"
-                cy="NaN"
-                fill="var(--colorNeutralBackground1)"
-                opacity="0"
-                r="8"
-                role="img"
-                stroke="#e3008c"
-                stroke-width="3"
-                tabindex="0"
-                transform="translate(5.428571428571429, 0)"
-              />
-              <circle
-                aria-label="B. Line 1, 18."
-                cx="4.571428571428569"
-                cy="NaN"
-                fill="var(--colorNeutralBackground1)"
-                opacity="0"
-                r="8"
-                role="img"
-                stroke="#e3008c"
-                stroke-width="3"
-                tabindex="0"
-                transform="translate(5.428571428571429, 0)"
-              />
-              <circle
-                aria-label="C. Line 1, 22."
-                cx="-28"
-                cy="NaN"
-                fill="var(--colorNeutralBackground1)"
-                opacity="0"
-                r="8"
-                role="img"
-                stroke="#e3008c"
-                stroke-width="3"
-                tabindex="0"
-                transform="translate(5.428571428571429, 0)"
-              />
+              <g
+                aria-label="Line 1, line with 3 data points."
+                role="listbox"
+              >
+                <line
+                  opacity="1"
+                  stroke="#e3008c"
+                  stroke-linecap="round"
+                  stroke-width="3"
+                  transform="translate(5.428571428571429, 0)"
+                  x1="37.14285714285714"
+                  x2="4.571428571428569"
+                  y1="NaN"
+                  y2="NaN"
+                />
+                <line
+                  opacity="1"
+                  stroke="#e3008c"
+                  stroke-linecap="round"
+                  stroke-width="3"
+                  transform="translate(5.428571428571429, 0)"
+                  x1="4.571428571428569"
+                  x2="-28"
+                  y1="NaN"
+                  y2="NaN"
+                />
+                <circle
+                  aria-label="A. Line 1, 15."
+                  cx="37.14285714285714"
+                  cy="NaN"
+                  fill="var(--colorNeutralBackground1)"
+                  opacity="0"
+                  r="8"
+                  role="option"
+                  stroke="#e3008c"
+                  stroke-width="3"
+                  tabindex="0"
+                  transform="translate(5.428571428571429, 0)"
+                />
+                <circle
+                  aria-label="B. Line 1, 18."
+                  cx="4.571428571428569"
+                  cy="NaN"
+                  fill="var(--colorNeutralBackground1)"
+                  opacity="0"
+                  r="8"
+                  role="option"
+                  stroke="#e3008c"
+                  stroke-width="3"
+                  tabindex="0"
+                  transform="translate(5.428571428571429, 0)"
+                />
+                <circle
+                  aria-label="C. Line 1, 22."
+                  cx="-28"
+                  cy="NaN"
+                  fill="var(--colorNeutralBackground1)"
+                  opacity="0"
+                  r="8"
+                  role="option"
+                  stroke="#e3008c"
+                  stroke-width="3"
+                  tabindex="0"
+                  transform="translate(5.428571428571429, 0)"
+                />
+              </g>
             </g>
           </svg>
         </div>
@@ -1782,7 +1815,9 @@ exports[`VegaDeclarativeChart - Bar+Line Combo Rendering Bar + Line Combinations
             >
               <g>
                 <g
+                  aria-label="2024-01. Bar, 45000. Line 1, 12000."
                   id="0-singleBar"
+                  role="listbox"
                 >
                   <rect
                     aria-label="2024-01. Bar, 45000."
@@ -1791,7 +1826,7 @@ exports[`VegaDeclarativeChart - Bar+Line Combo Rendering Bar + Line Combinations
                     fill="lightblue"
                     height="NaN"
                     opacity="1"
-                    role="img"
+                    role="option"
                     rx="3"
                     tabindex="0"
                     transform="translate(0, 0)"
@@ -1803,7 +1838,9 @@ exports[`VegaDeclarativeChart - Bar+Line Combo Rendering Bar + Line Combinations
               </g>
               <g>
                 <g
+                  aria-label="2024-02. Bar, 52000. Line 1, 15000."
                   id="1-singleBar"
+                  role="listbox"
                 >
                   <rect
                     aria-label="2024-02. Bar, 52000."
@@ -1812,7 +1849,7 @@ exports[`VegaDeclarativeChart - Bar+Line Combo Rendering Bar + Line Combinations
                     fill="lightblue"
                     height="NaN"
                     opacity="1"
-                    role="img"
+                    role="option"
                     rx="3"
                     tabindex="0"
                     transform="translate(0, 0)"
@@ -1824,7 +1861,9 @@ exports[`VegaDeclarativeChart - Bar+Line Combo Rendering Bar + Line Combinations
               </g>
               <g>
                 <g
+                  aria-label="2024-03. Bar, 48000. Line 1, 13500."
                   id="2-singleBar"
+                  role="listbox"
                 >
                   <rect
                     aria-label="2024-03. Bar, 48000."
@@ -1833,7 +1872,7 @@ exports[`VegaDeclarativeChart - Bar+Line Combo Rendering Bar + Line Combinations
                     fill="lightblue"
                     height="NaN"
                     opacity="1"
-                    role="img"
+                    role="option"
                     rx="3"
                     tabindex="0"
                     transform="translate(0, 0)"
@@ -1845,7 +1884,9 @@ exports[`VegaDeclarativeChart - Bar+Line Combo Rendering Bar + Line Combinations
               </g>
               <g>
                 <g
+                  aria-label="2024-04. Bar, 61000. Line 1, 18000."
                   id="3-singleBar"
+                  role="listbox"
                 >
                   <rect
                     aria-label="2024-04. Bar, 61000."
@@ -1854,7 +1895,7 @@ exports[`VegaDeclarativeChart - Bar+Line Combo Rendering Bar + Line Combinations
                     fill="lightblue"
                     height="NaN"
                     opacity="1"
-                    role="img"
+                    role="option"
                     rx="3"
                     tabindex="0"
                     transform="translate(0, 0)"
@@ -1866,7 +1907,9 @@ exports[`VegaDeclarativeChart - Bar+Line Combo Rendering Bar + Line Combinations
               </g>
               <g>
                 <g
+                  aria-label="2024-05. Bar, 58000. Line 1, 16500."
                   id="4-singleBar"
+                  role="listbox"
                 >
                   <rect
                     aria-label="2024-05. Bar, 58000."
@@ -1875,7 +1918,7 @@ exports[`VegaDeclarativeChart - Bar+Line Combo Rendering Bar + Line Combinations
                     fill="lightblue"
                     height="NaN"
                     opacity="1"
-                    role="img"
+                    role="option"
                     rx="3"
                     tabindex="0"
                     transform="translate(0, 0)"
@@ -1887,7 +1930,9 @@ exports[`VegaDeclarativeChart - Bar+Line Combo Rendering Bar + Line Combinations
               </g>
               <g>
                 <g
+                  aria-label="2024-06. Bar, 67000. Line 1, 20000."
                   id="5-singleBar"
+                  role="listbox"
                 >
                   <rect
                     aria-label="2024-06. Bar, 67000."
@@ -1896,7 +1941,7 @@ exports[`VegaDeclarativeChart - Bar+Line Combo Rendering Bar + Line Combinations
                     fill="lightblue"
                     height="NaN"
                     opacity="1"
-                    role="img"
+                    role="option"
                     rx="3"
                     tabindex="0"
                     transform="translate(0, 0)"
@@ -1908,139 +1953,144 @@ exports[`VegaDeclarativeChart - Bar+Line Combo Rendering Bar + Line Combinations
               </g>
             </g>
             <g>
-              <line
-                opacity="1"
-                stroke="red"
-                stroke-linecap="round"
-                stroke-width="3"
-                transform="translate(3.1250000000000004, 0)"
-                x1="65.75"
-                x2="47"
-                y1="NaN"
-                y2="NaN"
-              />
-              <line
-                opacity="1"
-                stroke="red"
-                stroke-linecap="round"
-                stroke-width="3"
-                transform="translate(3.1250000000000004, 0)"
-                x1="47"
-                x2="28.25"
-                y1="NaN"
-                y2="NaN"
-              />
-              <line
-                opacity="1"
-                stroke="red"
-                stroke-linecap="round"
-                stroke-width="3"
-                transform="translate(3.1250000000000004, 0)"
-                x1="28.25"
-                x2="9.5"
-                y1="NaN"
-                y2="NaN"
-              />
-              <line
-                opacity="1"
-                stroke="red"
-                stroke-linecap="round"
-                stroke-width="3"
-                transform="translate(3.1250000000000004, 0)"
-                x1="9.5"
-                x2="-9.25"
-                y1="NaN"
-                y2="NaN"
-              />
-              <line
-                opacity="1"
-                stroke="red"
-                stroke-linecap="round"
-                stroke-width="3"
-                transform="translate(3.1250000000000004, 0)"
-                x1="-9.25"
-                x2="-28"
-                y1="NaN"
-                y2="NaN"
-              />
-              <circle
-                aria-label="2024-01. Line 1, 12000."
-                cx="65.75"
-                cy="NaN"
-                fill="var(--colorNeutralBackground1)"
-                opacity="0"
-                r="8"
-                role="img"
-                stroke="red"
-                stroke-width="3"
-                tabindex="0"
-                transform="translate(3.1250000000000004, 0)"
-              />
-              <circle
-                aria-label="2024-02. Line 1, 15000."
-                cx="47"
-                cy="NaN"
-                fill="var(--colorNeutralBackground1)"
-                opacity="0"
-                r="8"
-                role="img"
-                stroke="red"
-                stroke-width="3"
-                tabindex="0"
-                transform="translate(3.1250000000000004, 0)"
-              />
-              <circle
-                aria-label="2024-03. Line 1, 13500."
-                cx="28.25"
-                cy="NaN"
-                fill="var(--colorNeutralBackground1)"
-                opacity="0"
-                r="8"
-                role="img"
-                stroke="red"
-                stroke-width="3"
-                tabindex="0"
-                transform="translate(3.1250000000000004, 0)"
-              />
-              <circle
-                aria-label="2024-04. Line 1, 18000."
-                cx="9.5"
-                cy="NaN"
-                fill="var(--colorNeutralBackground1)"
-                opacity="0"
-                r="8"
-                role="img"
-                stroke="red"
-                stroke-width="3"
-                tabindex="0"
-                transform="translate(3.1250000000000004, 0)"
-              />
-              <circle
-                aria-label="2024-05. Line 1, 16500."
-                cx="-9.25"
-                cy="NaN"
-                fill="var(--colorNeutralBackground1)"
-                opacity="0"
-                r="8"
-                role="img"
-                stroke="red"
-                stroke-width="3"
-                tabindex="0"
-                transform="translate(3.1250000000000004, 0)"
-              />
-              <circle
-                aria-label="2024-06. Line 1, 20000."
-                cx="-28"
-                cy="NaN"
-                fill="var(--colorNeutralBackground1)"
-                opacity="0"
-                r="8"
-                role="img"
-                stroke="red"
-                stroke-width="3"
-                tabindex="0"
-                transform="translate(3.1250000000000004, 0)"
-              />
+              <g
+                aria-label="Line 1, line with 6 data points."
+                role="listbox"
+              >
+                <line
+                  opacity="1"
+                  stroke="red"
+                  stroke-linecap="round"
+                  stroke-width="3"
+                  transform="translate(3.1250000000000004, 0)"
+                  x1="65.75"
+                  x2="47"
+                  y1="NaN"
+                  y2="NaN"
+                />
+                <line
+                  opacity="1"
+                  stroke="red"
+                  stroke-linecap="round"
+                  stroke-width="3"
+                  transform="translate(3.1250000000000004, 0)"
+                  x1="47"
+                  x2="28.25"
+                  y1="NaN"
+                  y2="NaN"
+                />
+                <line
+                  opacity="1"
+                  stroke="red"
+                  stroke-linecap="round"
+                  stroke-width="3"
+                  transform="translate(3.1250000000000004, 0)"
+                  x1="28.25"
+                  x2="9.5"
+                  y1="NaN"
+                  y2="NaN"
+                />
+                <line
+                  opacity="1"
+                  stroke="red"
+                  stroke-linecap="round"
+                  stroke-width="3"
+                  transform="translate(3.1250000000000004, 0)"
+                  x1="9.5"
+                  x2="-9.25"
+                  y1="NaN"
+                  y2="NaN"
+                />
+                <line
+                  opacity="1"
+                  stroke="red"
+                  stroke-linecap="round"
+                  stroke-width="3"
+                  transform="translate(3.1250000000000004, 0)"
+                  x1="-9.25"
+                  x2="-28"
+                  y1="NaN"
+                  y2="NaN"
+                />
+                <circle
+                  aria-label="2024-01. Line 1, 12000."
+                  cx="65.75"
+                  cy="NaN"
+                  fill="var(--colorNeutralBackground1)"
+                  opacity="0"
+                  r="8"
+                  role="option"
+                  stroke="red"
+                  stroke-width="3"
+                  tabindex="0"
+                  transform="translate(3.1250000000000004, 0)"
+                />
+                <circle
+                  aria-label="2024-02. Line 1, 15000."
+                  cx="47"
+                  cy="NaN"
+                  fill="var(--colorNeutralBackground1)"
+                  opacity="0"
+                  r="8"
+                  role="option"
+                  stroke="red"
+                  stroke-width="3"
+                  tabindex="0"
+                  transform="translate(3.1250000000000004, 0)"
+                />
+                <circle
+                  aria-label="2024-03. Line 1, 13500."
+                  cx="28.25"
+                  cy="NaN"
+                  fill="var(--colorNeutralBackground1)"
+                  opacity="0"
+                  r="8"
+                  role="option"
+                  stroke="red"
+                  stroke-width="3"
+                  tabindex="0"
+                  transform="translate(3.1250000000000004, 0)"
+                />
+                <circle
+                  aria-label="2024-04. Line 1, 18000."
+                  cx="9.5"
+                  cy="NaN"
+                  fill="var(--colorNeutralBackground1)"
+                  opacity="0"
+                  r="8"
+                  role="option"
+                  stroke="red"
+                  stroke-width="3"
+                  tabindex="0"
+                  transform="translate(3.1250000000000004, 0)"
+                />
+                <circle
+                  aria-label="2024-05. Line 1, 16500."
+                  cx="-9.25"
+                  cy="NaN"
+                  fill="var(--colorNeutralBackground1)"
+                  opacity="0"
+                  r="8"
+                  role="option"
+                  stroke="red"
+                  stroke-width="3"
+                  tabindex="0"
+                  transform="translate(3.1250000000000004, 0)"
+                />
+                <circle
+                  aria-label="2024-06. Line 1, 20000."
+                  cx="-28"
+                  cy="NaN"
+                  fill="var(--colorNeutralBackground1)"
+                  opacity="0"
+                  r="8"
+                  role="option"
+                  stroke="red"
+                  stroke-width="3"
+                  tabindex="0"
+                  transform="translate(3.1250000000000004, 0)"
+                />
+              </g>
             </g>
             <rect
               class="fui-cart_svgTooltip"
@@ -2419,7 +2469,7 @@ exports[`VegaDeclarativeChart - Chart Type Detection Snapshots for Chart Type De
                   fill="#637cef"
                   height="NaN"
                   opacity=""
-                  role="img"
+                  role="option"
                   rx="0"
                   tabindex="0"
                   width="16"
@@ -2432,7 +2482,7 @@ exports[`VegaDeclarativeChart - Chart Type Detection Snapshots for Chart Type De
                   fill="#e3008c"
                   height="NaN"
                   opacity=""
-                  role="img"
+                  role="option"
                   rx="0"
                   tabindex="0"
                   width="16"
@@ -3487,7 +3537,9 @@ exports[`VegaDeclarativeChart - Issue Fixes Issue 2: Line+Bar Combo (Now Support
             >
               <g>
                 <g
+                  aria-label="A. Bar, 10. Line 1, 20."
                   id="0-singleBar"
+                  role="listbox"
                 >
                   <rect
                     aria-label="A. Bar, 10."
@@ -3496,7 +3548,7 @@ exports[`VegaDeclarativeChart - Issue Fixes Issue 2: Line+Bar Combo (Now Support
                     fill="#637cef"
                     height="NaN"
                     opacity="1"
-                    role="img"
+                    role="option"
                     rx="3"
                     tabindex="0"
                     transform="translate(1.5, 0)"
@@ -3520,7 +3572,9 @@ exports[`VegaDeclarativeChart - Issue Fixes Issue 2: Line+Bar Combo (Now Support
               </g>
               <g>
                 <g
+                  aria-label="B. Bar, 15. Line 1, 25."
                   id="1-singleBar"
+                  role="listbox"
                 >
                   <rect
                     aria-label="B. Bar, 15."
@@ -3529,7 +3583,7 @@ exports[`VegaDeclarativeChart - Issue Fixes Issue 2: Line+Bar Combo (Now Support
                     fill="#637cef"
                     height="NaN"
                     opacity="1"
-                    role="img"
+                    role="option"
                     rx="3"
                     tabindex="0"
                     transform="translate(1.5, 0)"
@@ -3553,43 +3607,48 @@ exports[`VegaDeclarativeChart - Issue Fixes Issue 2: Line+Bar Combo (Now Support
               </g>
             </g>
             <g>
-              <line
-                opacity="1"
-                stroke="#e3008c"
-                stroke-linecap="round"
-                stroke-width="3"
-                transform="translate(9.5, 0)"
-                x1="28.999999999999993"
-                x2="-28"
-                y1="NaN"
-                y2="NaN"
-              />
-              <circle
-                aria-label="A. Line 1, 20."
-                cx="28.999999999999993"
-                cy="NaN"
-                fill="var(--colorNeutralBackground1)"
-                opacity="0"
-                r="8"
-                role="img"
-                stroke="#e3008c"
-                stroke-width="3"
-                tabindex="0"
-                transform="translate(9.5, 0)"
-              />
-              <circle
-                aria-label="B. Line 1, 25."
-                cx="-28"
-                cy="NaN"
-                fill="var(--colorNeutralBackground1)"
-                opacity="0"
-                r="8"
-                role="img"
-                stroke="#e3008c"
-                stroke-width="3"
-                tabindex="0"
-                transform="translate(9.5, 0)"
-              />
+              <g
+                aria-label="Line 1, line with 2 data points."
+                role="listbox"
+              >
+                <line
+                  opacity="1"
+                  stroke="#e3008c"
+                  stroke-linecap="round"
+                  stroke-width="3"
+                  transform="translate(9.5, 0)"
+                  x1="28.999999999999993"
+                  x2="-28"
+                  y1="NaN"
+                  y2="NaN"
+                />
+                <circle
+                  aria-label="A. Line 1, 20."
+                  cx="28.999999999999993"
+                  cy="NaN"
+                  fill="var(--colorNeutralBackground1)"
+                  opacity="0"
+                  r="8"
+                  role="option"
+                  stroke="#e3008c"
+                  stroke-width="3"
+                  tabindex="0"
+                  transform="translate(9.5, 0)"
+                />
+                <circle
+                  aria-label="B. Line 1, 25."
+                  cx="-28"
+                  cy="NaN"
+                  fill="var(--colorNeutralBackground1)"
+                  opacity="0"
+                  r="8"
+                  role="option"
+                  stroke="#e3008c"
+                  stroke-width="3"
+                  tabindex="0"
+                  transform="translate(9.5, 0)"
+                />
+              </g>
             </g>
           </svg>
         </div>
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 5db23b01126325..48835af680dd6c 100644
--- a/packages/charts/react-charts/library/src/components/VerticalBarChart/VerticalBarChart.tsx
+++ b/packages/charts/react-charts/library/src/components/VerticalBarChart/VerticalBarChart.tsx
@@ -262,10 +262,10 @@ export const VerticalBarChart: React.FunctionComponent<VerticalBarChartProps> =
     );
 
     return (
-      <>
+      <g role="listbox" aria-label={`${lineLegendText || 'Line'}, line with ${lineData.length} data points`}>
         {line}
         {dots}
-      </>
+      </g>
     );
   }
 
@@ -674,7 +674,7 @@ export const VerticalBarChart: React.FunctionComponent<VerticalBarChartProps> =
             onClick={point.onClick}
             onMouseOver={event => _onBarHover(point, colorScale(point.y), event)}
             aria-label={_getAriaLabel(point)}
-            role="img"
+            role="option"
             onMouseLeave={_onBarLeave}
             onFocus={event => _onBarFocus(event, point, index, colorScale(point.y))}
             onBlur={_onBarLeave}
@@ -732,7 +732,7 @@ export const VerticalBarChart: React.FunctionComponent<VerticalBarChartProps> =
             width={_barWidth}
             height={adjustedBarHeight}
             aria-label={_getAriaLabel(point)}
-            role="img"
+            role="option"
             ref={(e: SVGRectElement) => {
               _refCallback(e, point.legend!);
             }}
@@ -796,7 +796,7 @@ export const VerticalBarChart: React.FunctionComponent<VerticalBarChartProps> =
             onClick={point.onClick}
             onMouseOver={event => _onBarHover(point, colorScale(point.y), event)}
             aria-label={_getAriaLabel(point)}
-            role="img"
+            role="option"
             onMouseLeave={_onBarLeave}
             onFocus={event => _onBarFocus(event, point, index, colorScale(point.y))}
             onBlur={_onBarLeave}
@@ -1099,6 +1099,13 @@ export const VerticalBarChart: React.FunctionComponent<VerticalBarChartProps> =
     return categoryToValues;
   }
 
+  function _getBarsGroupLabel(): string {
+    // Calculate number of unique series and total data points for accessibility label
+    const uniqueSeries = new Set(_points.map(point => point.legend)).size;
+    const totalDataPoints = _points.length;
+    return `${uniqueSeries} series and ${totalDataPoints} bars`;
+  }
+
   function updatePosition(newX: number, newY: number) {
     const threshold = 1; // Set a threshold for movement
     const { x, y } = clickPosition;
@@ -1179,18 +1186,17 @@ export const VerticalBarChart: React.FunctionComponent<VerticalBarChartProps> =
       children={(props: ChildProps) => {
         return (
           <>
-            <g>{_bars}</g>
-            {_isHavingLine && (
-              <g>
-                {_createLine(
-                  props.xScale!,
-                  props.yScalePrimary!,
-                  props.containerHeight,
-                  props.containerWidth,
-                  props.yScaleSecondary,
-                )}
-              </g>
-            )}
+            <g role="listbox" aria-label={_getBarsGroupLabel()}>
+              {_bars}
+            </g>
+            {_isHavingLine &&
+              _createLine(
+                props.xScale!,
+                props.yScalePrimary!,
+                props.containerHeight,
+                props.containerWidth,
+                props.yScaleSecondary,
+              )}
           </>
         );
       }}
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 40c152a54aef51..9d2f7e5d27ac32 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
@@ -410,7 +410,10 @@ exports[`Screen resolution Should remain unchanged on zoom in 1`] = `
             </text>
           </g>
         </g>
-        <g>
+        <g
+          aria-label="3 series and 3 bars"
+          role="listbox"
+        >
           <g>
             <rect
               aria-label="2020/04/30. First, 10%."
@@ -418,7 +421,7 @@ exports[`Screen resolution Should remain unchanged on zoom in 1`] = `
               height="49"
               id="_VBC_bar__r_52_-0"
               opacity="1"
-              role="img"
+              role="option"
               rx="0"
               tabindex="0"
               width="16"
@@ -443,7 +446,7 @@ exports[`Screen resolution Should remain unchanged on zoom in 1`] = `
               height="245"
               id="_VBC_bar__r_52_-1"
               opacity="1"
-              role="img"
+              role="option"
               rx="0"
               tabindex="0"
               width="16"
@@ -468,7 +471,7 @@ exports[`Screen resolution Should remain unchanged on zoom in 1`] = `
               height="147"
               id="_VBC_bar__r_52_-2"
               opacity="1"
-              role="img"
+              role="option"
               rx="0"
               tabindex="0"
               width="16"
@@ -977,7 +980,10 @@ exports[`Screen resolution Should remain unchanged on zoom out 1`] = `
             </text>
           </g>
         </g>
-        <g>
+        <g
+          aria-label="3 series and 3 bars"
+          role="listbox"
+        >
           <g>
             <rect
               aria-label="2020/04/30. First, 10%."
@@ -985,7 +991,7 @@ exports[`Screen resolution Should remain unchanged on zoom out 1`] = `
               height="49"
               id="_VBC_bar__r_58_-0"
               opacity="1"
-              role="img"
+              role="option"
               rx="0"
               tabindex="0"
               width="16"
@@ -1010,7 +1016,7 @@ exports[`Screen resolution Should remain unchanged on zoom out 1`] = `
               height="245"
               id="_VBC_bar__r_58_-1"
               opacity="1"
-              role="img"
+              role="option"
               rx="0"
               tabindex="0"
               width="16"
@@ -1035,7 +1041,7 @@ exports[`Screen resolution Should remain unchanged on zoom out 1`] = `
               height="147"
               id="_VBC_bar__r_58_-2"
               opacity="1"
-              role="img"
+              role="option"
               rx="0"
               tabindex="0"
               width="16"
@@ -1548,7 +1554,10 @@ exports[`Theme Change Should reflect theme change 1`] = `
               </text>
             </g>
           </g>
-          <g>
+          <g
+            aria-label="3 series and 3 bars"
+            role="listbox"
+          >
             <g>
               <rect
                 aria-label="2020/04/30. First, 10%."
@@ -1556,7 +1565,7 @@ exports[`Theme Change Should reflect theme change 1`] = `
                 height="49"
                 id="_VBC_bar__r_5f_-0"
                 opacity="1"
-                role="img"
+                role="option"
                 rx="0"
                 tabindex="0"
                 width="16"
@@ -1581,7 +1590,7 @@ exports[`Theme Change Should reflect theme change 1`] = `
                 height="245"
                 id="_VBC_bar__r_5f_-1"
                 opacity="1"
-                role="img"
+                role="option"
                 rx="0"
                 tabindex="0"
                 width="16"
@@ -1606,7 +1615,7 @@ exports[`Theme Change Should reflect theme change 1`] = `
                 height="147"
                 id="_VBC_bar__r_5f_-2"
                 opacity="1"
-                role="img"
+                role="option"
                 rx="0"
                 tabindex="0"
                 width="16"
@@ -2127,7 +2136,10 @@ exports[`Vertical bar chart re-rendering Should re-render the vertical bar chart
             </text>
           </g>
         </g>
-        <g>
+        <g
+          aria-label="3 series and 3 bars"
+          role="listbox"
+        >
           <g>
             <rect
               aria-label="2020/04/30. First, 10%."
@@ -2135,7 +2147,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="option"
               rx="0"
               tabindex="0"
               width="16"
@@ -2160,7 +2172,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="option"
               rx="0"
               tabindex="0"
               width="16"
@@ -2185,7 +2197,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="option"
               rx="0"
               tabindex="0"
               width="16"
@@ -2694,7 +2706,10 @@ exports[`Vertical bar chart rendering Should render the vertical bar chart with
             </text>
           </g>
         </g>
-        <g>
+        <g
+          aria-label="3 series and 3 bars"
+          role="listbox"
+        >
           <g>
             <rect
               aria-label="2020/04/30. First, 10%."
@@ -2702,7 +2717,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="option"
               rx="0"
               tabindex="0"
               width="16"
@@ -2727,7 +2742,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="option"
               rx="0"
               tabindex="0"
               width="16"
@@ -2752,7 +2767,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="option"
               rx="0"
               tabindex="0"
               width="16"
@@ -3261,7 +3276,10 @@ exports[`Vertical bar chart rendering Should render the vertical bar chart with
             </text>
           </g>
         </g>
-        <g>
+        <g
+          aria-label="3 series and 3 bars"
+          role="listbox"
+        >
           <g>
             <rect
               aria-label="2020/04/30. First, 10%."
@@ -3269,7 +3287,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="option"
               rx="0"
               tabindex="0"
               width="16"
@@ -3294,7 +3312,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="option"
               rx="0"
               tabindex="0"
               width="16"
@@ -3319,7 +3337,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="option"
               rx="0"
               tabindex="0"
               width="16"
@@ -3638,7 +3656,10 @@ exports[`Vertical bar chart rendering Should render the vertical bar chart with
             </text>
           </g>
         </g>
-        <g>
+        <g
+          aria-label="1 series and 4 bars"
+          role="listbox"
+        >
           <g
             transform="translate(0, 0)"
           >
@@ -3648,7 +3669,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="option"
               rx="0"
               tabindex="0"
               width="16"
@@ -3675,7 +3696,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="option"
               rx="0"
               tabindex="0"
               width="16"
@@ -3702,7 +3723,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="option"
               rx="0"
               tabindex="0"
               width="16"
@@ -3729,7 +3750,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="option"
               rx="0"
               tabindex="0"
               width="16"
@@ -4219,7 +4240,10 @@ exports[`Vertical bar chart rendering should render the vertical bar chart with
             </text>
           </g>
         </g>
-        <g>
+        <g
+          aria-label="3 series and 3 bars"
+          role="listbox"
+        >
           <g>
             <rect
               aria-label="2020/04/30. First, 10%."
@@ -4227,7 +4251,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="option"
               rx="0"
               tabindex="0"
               width="16"
@@ -4252,7 +4276,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="option"
               rx="0"
               tabindex="0"
               width="16"
@@ -4277,7 +4301,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="option"
               rx="0"
               tabindex="0"
               width="16"
@@ -4786,7 +4810,10 @@ exports[`VerticalBarChart - mouse events Should render callout correctly on mous
             </text>
           </g>
         </g>
-        <g>
+        <g
+          aria-label="3 series and 3 bars"
+          role="listbox"
+        >
           <g>
             <rect
               aria-label="2020/04/30. First, 10%."
@@ -4794,7 +4821,7 @@ exports[`VerticalBarChart - mouse events Should render callout correctly on mous
               height="49"
               id="_VBC_bar__r_5r_-0"
               opacity="1"
-              role="img"
+              role="option"
               rx="0"
               tabindex="0"
               width="16"
@@ -4819,7 +4846,7 @@ exports[`VerticalBarChart - mouse events Should render callout correctly on mous
               height="245"
               id="_VBC_bar__r_5r_-1"
               opacity="1"
-              role="img"
+              role="option"
               rx="0"
               tabindex="0"
               width="16"
@@ -4844,7 +4871,7 @@ exports[`VerticalBarChart - mouse events Should render callout correctly on mous
               height="147"
               id="_VBC_bar__r_5r_-2"
               opacity="1"
-              role="img"
+              role="option"
               rx="0"
               tabindex="0"
               width="16"
@@ -5409,7 +5436,10 @@ exports[`VerticalBarChart - mouse events Should render customized callout on mou
             </text>
           </g>
         </g>
-        <g>
+        <g
+          aria-label="3 series and 3 bars"
+          role="listbox"
+        >
           <g>
             <rect
               aria-label="2020/04/30. First, 10%."
@@ -5417,7 +5447,7 @@ exports[`VerticalBarChart - mouse events Should render customized callout on mou
               height="49"
               id="_VBC_bar__r_62_-0"
               opacity="1"
-              role="img"
+              role="option"
               rx="0"
               tabindex="0"
               width="16"
@@ -5442,7 +5472,7 @@ exports[`VerticalBarChart - mouse events Should render customized callout on mou
               height="245"
               id="_VBC_bar__r_62_-1"
               opacity="1"
-              role="img"
+              role="option"
               rx="0"
               tabindex="0"
               width="16"
@@ -5467,7 +5497,7 @@ exports[`VerticalBarChart - mouse events Should render customized callout on mou
               height="147"
               id="_VBC_bar__r_62_-2"
               opacity="1"
-              role="img"
+              role="option"
               rx="0"
               tabindex="0"
               width="16"
@@ -6009,7 +6039,10 @@ exports[`VerticalBarChart snapShot testing Should not render bar labels 1`] = `
           </text>
         </g>
       </g>
-      <g>
+      <g
+        aria-label="3 series and 3 bars"
+        role="listbox"
+      >
         <g>
           <rect
             aria-label="2020/04/30. First, 10%."
@@ -6017,7 +6050,7 @@ exports[`VerticalBarChart snapShot testing Should not render bar labels 1`] = `
             height="49"
             id="_VBC_bar__r_7n_-0"
             opacity="1"
-            role="img"
+            role="option"
             rx="0"
             tabindex="0"
             width="16"
@@ -6032,7 +6065,7 @@ exports[`VerticalBarChart snapShot testing Should not render bar labels 1`] = `
             height="245"
             id="_VBC_bar__r_7n_-1"
             opacity="1"
-            role="img"
+            role="option"
             rx="0"
             tabindex="0"
             width="16"
@@ -6047,7 +6080,7 @@ exports[`VerticalBarChart snapShot testing Should not render bar labels 1`] = `
             height="147"
             id="_VBC_bar__r_7n_-2"
             opacity="1"
-            role="img"
+            role="option"
             rx="0"
             tabindex="0"
             width="16"
@@ -6544,7 +6577,10 @@ exports[`VerticalBarChart snapShot testing Should render gradients on bars 1`] =
           </text>
         </g>
       </g>
-      <g>
+      <g
+        aria-label="3 series and 3 bars"
+        role="listbox"
+      >
         <g>
           <rect
             aria-label="2020/04/30. First, 10%."
@@ -6552,7 +6588,7 @@ exports[`VerticalBarChart snapShot testing Should render gradients on bars 1`] =
             height="49"
             id="_VBC_bar__r_7t_-0"
             opacity="1"
-            role="img"
+            role="option"
             rx="0"
             tabindex="0"
             width="16"
@@ -6577,7 +6613,7 @@ exports[`VerticalBarChart snapShot testing Should render gradients on bars 1`] =
             height="245"
             id="_VBC_bar__r_7t_-1"
             opacity="1"
-            role="img"
+            role="option"
             rx="0"
             tabindex="0"
             width="16"
@@ -6602,7 +6638,7 @@ exports[`VerticalBarChart snapShot testing Should render gradients on bars 1`] =
             height="147"
             id="_VBC_bar__r_7t_-2"
             opacity="1"
-            role="img"
+            role="option"
             rx="0"
             tabindex="0"
             width="16"
@@ -7109,7 +7145,10 @@ exports[`VerticalBarChart snapShot testing Should render rounded corners on bars
           </text>
         </g>
       </g>
-      <g>
+      <g
+        aria-label="3 series and 3 bars"
+        role="listbox"
+      >
         <g>
           <rect
             aria-label="2020/04/30. First, 10%."
@@ -7117,7 +7156,7 @@ exports[`VerticalBarChart snapShot testing Should render rounded corners on bars
             height="49"
             id="_VBC_bar__r_83_-0"
             opacity="1"
-            role="img"
+            role="option"
             rx="3"
             tabindex="0"
             width="16"
@@ -7142,7 +7181,7 @@ exports[`VerticalBarChart snapShot testing Should render rounded corners on bars
             height="245"
             id="_VBC_bar__r_83_-1"
             opacity="1"
-            role="img"
+            role="option"
             rx="3"
             tabindex="0"
             width="16"
@@ -7167,7 +7206,7 @@ exports[`VerticalBarChart snapShot testing Should render rounded corners on bars
             height="147"
             id="_VBC_bar__r_83_-2"
             opacity="1"
-            role="img"
+            role="option"
             rx="3"
             tabindex="0"
             width="16"
@@ -7674,7 +7713,10 @@ exports[`VerticalBarChart snapShot testing renders VerticalBarChart correctly 1`
           </text>
         </g>
       </g>
-      <g>
+      <g
+        aria-label="3 series and 3 bars"
+        role="listbox"
+      >
         <g>
           <rect
             aria-label="2020/04/30. First, 10%."
@@ -7682,7 +7724,7 @@ exports[`VerticalBarChart snapShot testing renders VerticalBarChart correctly 1`
             height="49"
             id="_VBC_bar__r_6f_-0"
             opacity="1"
-            role="img"
+            role="option"
             rx="0"
             tabindex="0"
             width="16"
@@ -7707,7 +7749,7 @@ exports[`VerticalBarChart snapShot testing renders VerticalBarChart correctly 1`
             height="245"
             id="_VBC_bar__r_6f_-1"
             opacity="1"
-            role="img"
+            role="option"
             rx="0"
             tabindex="0"
             width="16"
@@ -7732,7 +7774,7 @@ exports[`VerticalBarChart snapShot testing renders VerticalBarChart correctly 1`
             height="147"
             id="_VBC_bar__r_6f_-2"
             opacity="1"
-            role="img"
+            role="option"
             rx="0"
             tabindex="0"
             width="16"
@@ -8239,7 +8281,10 @@ exports[`VerticalBarChart snapShot testing renders enabledLegendsWrapLines corre
           </text>
         </g>
       </g>
-      <g>
+      <g
+        aria-label="3 series and 3 bars"
+        role="listbox"
+      >
         <g>
           <rect
             aria-label="2020/04/30. First, 10%."
@@ -8247,7 +8292,7 @@ exports[`VerticalBarChart snapShot testing renders enabledLegendsWrapLines corre
             height="49"
             id="_VBC_bar__r_70_-0"
             opacity="1"
-            role="img"
+            role="option"
             rx="0"
             tabindex="0"
             width="16"
@@ -8272,7 +8317,7 @@ exports[`VerticalBarChart snapShot testing renders enabledLegendsWrapLines corre
             height="245"
             id="_VBC_bar__r_70_-1"
             opacity="1"
-            role="img"
+            role="option"
             rx="0"
             tabindex="0"
             width="16"
@@ -8297,7 +8342,7 @@ exports[`VerticalBarChart snapShot testing renders enabledLegendsWrapLines corre
             height="147"
             id="_VBC_bar__r_70_-2"
             opacity="1"
-            role="img"
+            role="option"
             rx="0"
             tabindex="0"
             width="16"
@@ -8814,7 +8859,10 @@ exports[`VerticalBarChart snapShot testing renders hideLegend correctly 1`] = `
           </text>
         </g>
       </g>
-      <g>
+      <g
+        aria-label="3 series and 3 bars"
+        role="listbox"
+      >
         <g>
           <rect
             aria-label="2020/04/30. First, 10%."
@@ -8822,7 +8870,7 @@ exports[`VerticalBarChart snapShot testing renders hideLegend correctly 1`] = `
             height="1"
             id="_VBC_bar__r_6l_-0"
             opacity="1"
-            role="img"
+            role="option"
             rx="0"
             tabindex="0"
             width="16"
@@ -8847,7 +8895,7 @@ exports[`VerticalBarChart snapShot testing renders hideLegend correctly 1`] = `
             height="5"
             id="_VBC_bar__r_6l_-1"
             opacity="1"
-            role="img"
+            role="option"
             rx="0"
             tabindex="0"
             width="16"
@@ -8872,7 +8920,7 @@ exports[`VerticalBarChart snapShot testing renders hideLegend correctly 1`] = `
             height="3"
             id="_VBC_bar__r_6l_-2"
             opacity="1"
-            role="img"
+            role="option"
             rx="0"
             tabindex="0"
             width="16"
@@ -9305,7 +9353,10 @@ exports[`VerticalBarChart snapShot testing renders hideTooltip correctly 1`] = `
           </text>
         </g>
       </g>
-      <g>
+      <g
+        aria-label="3 series and 3 bars"
+        role="listbox"
+      >
         <g>
           <rect
             aria-label="2020/04/30. First, 10%."
@@ -9313,7 +9364,7 @@ exports[`VerticalBarChart snapShot testing renders hideTooltip correctly 1`] = `
             height="49"
             id="_VBC_bar__r_6q_-0"
             opacity="1"
-            role="img"
+            role="option"
             rx="0"
             width="16"
             x="56"
@@ -9337,7 +9388,7 @@ exports[`VerticalBarChart snapShot testing renders hideTooltip correctly 1`] = `
             height="245"
             id="_VBC_bar__r_6q_-1"
             opacity="1"
-            role="img"
+            role="option"
             rx="0"
             width="16"
             x="264.46153846153845"
@@ -9361,7 +9412,7 @@ exports[`VerticalBarChart snapShot testing renders hideTooltip correctly 1`] = `
             height="147"
             id="_VBC_bar__r_6q_-2"
             opacity="1"
-            role="img"
+            role="option"
             rx="0"
             width="16"
             x="577.1538461538462"
@@ -9965,7 +10016,10 @@ exports[`VerticalBarChart snapShot testing renders showXAxisLablesTooltip correc
           </text>
         </g>
       </g>
-      <g>
+      <g
+        aria-label="3 series and 3 bars"
+        role="listbox"
+      >
         <g>
           <rect
             aria-label="2020/04/30. First, 10%."
@@ -9973,7 +10027,7 @@ exports[`VerticalBarChart snapShot testing renders showXAxisLablesTooltip correc
             height="49"
             id="_VBC_bar__r_75_-0"
             opacity="1"
-            role="img"
+            role="option"
             rx="0"
             tabindex="0"
             width="16"
@@ -9998,7 +10052,7 @@ exports[`VerticalBarChart snapShot testing renders showXAxisLablesTooltip correc
             height="245"
             id="_VBC_bar__r_75_-1"
             opacity="1"
-            role="img"
+            role="option"
             rx="0"
             tabindex="0"
             width="16"
@@ -10023,7 +10077,7 @@ exports[`VerticalBarChart snapShot testing renders showXAxisLablesTooltip correc
             height="147"
             id="_VBC_bar__r_75_-2"
             opacity="1"
-            role="img"
+            role="option"
             rx="0"
             tabindex="0"
             width="16"
@@ -10633,7 +10687,10 @@ exports[`VerticalBarChart snapShot testing renders wrapXAxisLables correctly 1`]
           </text>
         </g>
       </g>
-      <g>
+      <g
+        aria-label="3 series and 3 bars"
+        role="listbox"
+      >
         <g>
           <rect
             aria-label="2020/04/30. First, 10%."
@@ -10641,7 +10698,7 @@ exports[`VerticalBarChart snapShot testing renders wrapXAxisLables correctly 1`]
             height="49"
             id="_VBC_bar__r_7b_-0"
             opacity="1"
-            role="img"
+            role="option"
             rx="0"
             tabindex="0"
             width="16"
@@ -10666,7 +10723,7 @@ exports[`VerticalBarChart snapShot testing renders wrapXAxisLables correctly 1`]
             height="245"
             id="_VBC_bar__r_7b_-1"
             opacity="1"
-            role="img"
+            role="option"
             rx="0"
             tabindex="0"
             width="16"
@@ -10691,7 +10748,7 @@ exports[`VerticalBarChart snapShot testing renders wrapXAxisLables correctly 1`]
             height="147"
             id="_VBC_bar__r_7b_-2"
             opacity="1"
-            role="img"
+            role="option"
             rx="0"
             tabindex="0"
             width="16"
@@ -11205,7 +11262,10 @@ exports[`VerticalBarChart snapShot testing renders yAxisTickFormat correctly 1`]
           </text>
         </g>
       </g>
-      <g>
+      <g
+        aria-label="3 series and 3 bars"
+        role="listbox"
+      >
         <g>
           <rect
             aria-label="2020/04/30. First, 10%."
@@ -11213,7 +11273,7 @@ exports[`VerticalBarChart snapShot testing renders yAxisTickFormat correctly 1`]
             height="49"
             id="_VBC_bar__r_7h_-0"
             opacity="1"
-            role="img"
+            role="option"
             rx="0"
             tabindex="0"
             width="16"
@@ -11238,7 +11298,7 @@ exports[`VerticalBarChart snapShot testing renders yAxisTickFormat correctly 1`]
             height="245"
             id="_VBC_bar__r_7h_-1"
             opacity="1"
-            role="img"
+            role="option"
             rx="0"
             tabindex="0"
             width="16"
@@ -11263,7 +11323,7 @@ exports[`VerticalBarChart snapShot testing renders yAxisTickFormat correctly 1`]
             height="147"
             id="_VBC_bar__r_7h_-2"
             opacity="1"
-            role="img"
+            role="option"
             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 d277ad8d2f4b7f..41cd457e32ca68 100644
--- a/packages/charts/react-charts/library/src/components/VerticalStackedBarChart/VerticalStackedBarChart.tsx
+++ b/packages/charts/react-charts/library/src/components/VerticalStackedBarChart/VerticalStackedBarChart.tsx
@@ -561,15 +561,16 @@ export const VerticalStackedBarChart: React.FunctionComponent<VerticalStackedBar
     yScaleSecondary?: NumericScale,
   ): JSXElement {
     const lineObject: LineObject = _getFormattedLineData(props.data);
-    const lines: React.ReactNode[] = [];
-    const borderForLines: React.ReactNode[] = [];
-    const dots: React.ReactNode[] = [];
+    const lineSeriesGroups: React.ReactNode[] = [];
     //const { theme } = props;
     const lineBorderWidth = props.lineOptions?.lineBorderWidth
       ? Number.parseFloat(props.lineOptions!.lineBorderWidth!.toString())
       : 0;
     const xScaleBandwidthTranslate = _xAxisType !== XAxisTypes.StringAxis ? 0 : xScale.bandwidth() / 2;
     Object.keys(lineObject).forEach((item: string, index: number) => {
+      const lines: React.ReactNode[] = [];
+      const borderForLines: React.ReactNode[] = [];
+      const dots: React.ReactNode[] = [];
       const shouldHighlight = _isLegendHighlighted(item) || _noLegendHighlighted();
       for (let i = 1; i < lineObject[item].length; i++) {
         const x1 = xScale(lineObject[item][i - 1].xItem.xAxisPoint);
@@ -623,8 +624,6 @@ export const VerticalStackedBarChart: React.FunctionComponent<VerticalStackedBar
           />,
         );
       }
-    });
-    Object.keys(lineObject).forEach((item: string, index: number) => {
       lineObject[item].forEach((circlePoint: LinePoint, subIndex: number) => {
         const circleRef: { refElement: SVGCircleElement | null } = { refElement: null };
         const yScaleBandwidthTranslate =
@@ -658,19 +657,25 @@ export const VerticalStackedBarChart: React.FunctionComponent<VerticalStackedBar
             tabIndex={!props.hideTooltip && shouldHighlight ? 0 : undefined}
             onFocus={event => _lineFocus(event, circlePoint, circleRef)}
             onBlur={_handleMouseOut}
-            role="img"
+            role="option"
             aria-label={_getAriaLabel(circlePoint.xItem, circlePoint as VSChartDataPoint, true)}
           />,
         );
       });
+
+      lineSeriesGroups.push(
+        <g
+          role="listbox"
+          aria-label={`${item}, line with ${lineObject[item].length} data points.`}
+          key={`${item}-${index}-lineSeries`}
+        >
+          {borderForLines}
+          {lines}
+          {dots}
+        </g>,
+      );
     });
-    return (
-      <>
-        {borderForLines}
-        {lines}
-        {dots}
-      </>
-    );
+    return <>{lineSeriesGroups}</>;
   }
 
   function _getCircleOpacityAndRadius(
@@ -1042,7 +1047,7 @@ export const VerticalStackedBarChart: React.FunctionComponent<VerticalStackedBar
             onFocus: () => _onRectFocus(point, singleChartData.xAxisPoint as string, startColor, ref),
             onBlur: _handleMouseOut,
             onClick: (event: React.MouseEvent<SVGElement, MouseEvent>) => _onClick(point, event),
-            role: 'img',
+            role: 'option',
             tabIndex: !props.hideTooltip && shouldHighlight ? 0 : undefined,
           };
 
@@ -1145,7 +1150,6 @@ export const VerticalStackedBarChart: React.FunctionComponent<VerticalStackedBar
           onFocus: () => _onStackFocus(singleChartData, groupRef),
           onBlur: _handleMouseOut,
           onClick: (event: any) => _onClick(singleChartData, event),
-          role: 'img',
           tabIndex: !props.hideTooltip ? 0 : undefined,
         };
       let showLabel = false;
@@ -1183,6 +1187,8 @@ export const VerticalStackedBarChart: React.FunctionComponent<VerticalStackedBar
             ref={e => {
               groupRef.refElement = e;
             }}
+            role="listbox"
+            aria-label={_getAriaLabel(singleChartData)}
             {...stackFocusProps}
           >
             {singleBar}
@@ -1337,7 +1343,8 @@ export const VerticalStackedBarChart: React.FunctionComponent<VerticalStackedBar
     );
     const shouldFocusWholeStack = _toFocusWholeStack();
     _dataset = _createDataSetLayer();
-    const legendBars: JSXElement = _getLegendData(_points, _createLegendsForLine(props.data));
+    const lineLegends = _createLegendsForLine(props.data);
+    const legendBars: JSXElement = _getLegendData(_points, lineLegends);
     const calloutProps: ModifiedCartesianChartProps['calloutProps'] = {
       color,
       legend: calloutLegend,
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 9b908fbf33c8fb..b1e33f93d11a60 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
@@ -206,7 +206,9 @@ exports[`Vertical stacked bar chart - Screen resolution Should remain unchanged
         >
           <g>
             <g
+              aria-label="January. Metadata1, 2. Metadata2, 0.5. Metadata3, 0. Supported Builds, 42."
               id="0-singleBar"
+              role="listbox"
             >
               <rect
                 aria-label="January. Metadata1, 2."
@@ -215,7 +217,7 @@ exports[`Vertical stacked bar chart - Screen resolution Should remain unchanged
                 fill="#0078d4"
                 height="4.2"
                 opacity="1"
-                role="img"
+                role="option"
                 rx="0"
                 tabindex="0"
                 transform="translate(0, 0)"
@@ -230,7 +232,7 @@ exports[`Vertical stacked bar chart - Screen resolution Should remain unchanged
                 fill="#002050"
                 height="1.05"
                 opacity="1"
-                role="img"
+                role="option"
                 rx="0"
                 tabindex="0"
                 transform="translate(0, 0)"
@@ -254,7 +256,9 @@ exports[`Vertical stacked bar chart - Screen resolution Should remain unchanged
           </g>
           <g>
             <g
+              aria-label="February. Metadata1, 30. Metadata2, 3. Metadata3, 40. Supported Builds, 41."
               id="1-singleBar"
+              role="listbox"
             >
               <rect
                 aria-label="February. Metadata1, 30."
@@ -263,7 +267,7 @@ exports[`Vertical stacked bar chart - Screen resolution Should remain unchanged
                 fill="#0078d4"
                 height="62.999999999999986"
                 opacity="1"
-                role="img"
+                role="option"
                 rx="0"
                 tabindex="0"
                 transform="translate(0, 0)"
@@ -278,7 +282,7 @@ exports[`Vertical stacked bar chart - Screen resolution Should remain unchanged
                 fill="#002050"
                 height="6.299999999999999"
                 opacity="1"
-                role="img"
+                role="option"
                 rx="0"
                 tabindex="0"
                 transform="translate(0, 0)"
@@ -293,7 +297,7 @@ exports[`Vertical stacked bar chart - Screen resolution Should remain unchanged
                 fill="#00188f"
                 height="83.99999999999999"
                 opacity="1"
-                role="img"
+                role="option"
                 rx="0"
                 tabindex="0"
                 transform="translate(0, 0)"
@@ -317,7 +321,9 @@ exports[`Vertical stacked bar chart - Screen resolution Should remain unchanged
           </g>
           <g>
             <g
+              aria-label="March. Metadata1, 10. Metadata2, 60. Metadata3, 30. Supported Builds, 100."
               id="2-singleBar"
+              role="listbox"
             >
               <rect
                 aria-label="March. Metadata1, 10."
@@ -326,7 +332,7 @@ exports[`Vertical stacked bar chart - Screen resolution Should remain unchanged
                 fill="#0078d4"
                 height="21"
                 opacity="1"
-                role="img"
+                role="option"
                 rx="0"
                 tabindex="0"
                 transform="translate(0, 0)"
@@ -341,7 +347,7 @@ exports[`Vertical stacked bar chart - Screen resolution Should remain unchanged
                 fill="#002050"
                 height="126"
                 opacity="1"
-                role="img"
+                role="option"
                 rx="0"
                 tabindex="0"
                 transform="translate(0, 0)"
@@ -356,7 +362,7 @@ exports[`Vertical stacked bar chart - Screen resolution Should remain unchanged
                 fill="#00188f"
                 height="63"
                 opacity="1"
-                role="img"
+                role="option"
                 rx="0"
                 tabindex="0"
                 transform="translate(0, 0)"
@@ -380,67 +386,72 @@ exports[`Vertical stacked bar chart - Screen resolution Should remain unchanged
           </g>
         </g>
         <g>
-          <line
-            opacity="1"
-            stroke="#0078d4"
-            stroke-linecap="round"
-            stroke-width="3"
-            transform="translate(8, 0)"
-            x1="279"
-            x2="327"
-            y1="141.8"
-            y2="143.9"
-          />
-          <line
-            opacity="1"
-            stroke="#0078d4"
-            stroke-linecap="round"
-            stroke-width="3"
-            transform="translate(8, 0)"
-            x1="327"
-            x2="375"
-            y1="143.9"
-            y2="20"
-          />
-          <circle
-            aria-label="January. Supported Builds, 42."
-            cx="279"
-            cy="141.8"
-            fill="var(--colorNeutralBackground1)"
-            opacity="0"
-            r="8"
-            role="img"
-            stroke="#0078d4"
-            stroke-width="3"
-            tabindex="0"
-            transform="translate(8, 0)"
-          />
-          <circle
-            aria-label="February. Supported Builds, 41."
-            cx="327"
-            cy="143.9"
-            fill="var(--colorNeutralBackground1)"
-            opacity="0"
-            r="8"
-            role="img"
-            stroke="#0078d4"
-            stroke-width="3"
-            tabindex="0"
-            transform="translate(8, 0)"
-          />
-          <circle
-            aria-label="March. Supported Builds, 100."
-            cx="375"
-            cy="20"
-            fill="var(--colorNeutralBackground1)"
-            opacity="0"
-            r="8"
-            role="img"
-            stroke="#0078d4"
-            stroke-width="3"
-            tabindex="0"
-            transform="translate(8, 0)"
-          />
+          <g
+            aria-label="Supported Builds, line with 3 data points."
+            role="listbox"
+          >
+            <line
+              opacity="1"
+              stroke="#0078d4"
+              stroke-linecap="round"
+              stroke-width="3"
+              transform="translate(8, 0)"
+              x1="279"
+              x2="327"
+              y1="141.8"
+              y2="143.9"
+            />
+            <line
+              opacity="1"
+              stroke="#0078d4"
+              stroke-linecap="round"
+              stroke-width="3"
+              transform="translate(8, 0)"
+              x1="327"
+              x2="375"
+              y1="143.9"
+              y2="20"
+            />
+            <circle
+              aria-label="January. Supported Builds, 42."
+              cx="279"
+              cy="141.8"
+              fill="var(--colorNeutralBackground1)"
+              opacity="0"
+              r="8"
+              role="option"
+              stroke="#0078d4"
+              stroke-width="3"
+              tabindex="0"
+              transform="translate(8, 0)"
+            />
+            <circle
+              aria-label="February. Supported Builds, 41."
+              cx="327"
+              cy="143.9"
+              fill="var(--colorNeutralBackground1)"
+              opacity="0"
+              r="8"
+              role="option"
+              stroke="#0078d4"
+              stroke-width="3"
+              tabindex="0"
+              transform="translate(8, 0)"
+            />
+            <circle
+              aria-label="March. Supported Builds, 100."
+              cx="375"
+              cy="20"
+              fill="var(--colorNeutralBackground1)"
+              opacity="0"
+              r="8"
+              role="option"
+              stroke="#0078d4"
+              stroke-width="3"
+              tabindex="0"
+              transform="translate(8, 0)"
+            />
+          </g>
         </g>
       </svg>
     </div>
@@ -747,7 +758,9 @@ exports[`Vertical stacked bar chart - Screen resolution Should remain unchanged
         >
           <g>
             <g
+              aria-label="January. Metadata1, 2. Metadata2, 0.5. Metadata3, 0. Supported Builds, 42."
               id="0-singleBar"
+              role="listbox"
             >
               <rect
                 aria-label="January. Metadata1, 2."
@@ -756,7 +769,7 @@ exports[`Vertical stacked bar chart - Screen resolution Should remain unchanged
                 fill="#0078d4"
                 height="4.2"
                 opacity="1"
-                role="img"
+                role="option"
                 rx="0"
                 tabindex="0"
                 transform="translate(0, 0)"
@@ -771,7 +784,7 @@ exports[`Vertical stacked bar chart - Screen resolution Should remain unchanged
                 fill="#002050"
                 height="1.05"
                 opacity="1"
-                role="img"
+                role="option"
                 rx="0"
                 tabindex="0"
                 transform="translate(0, 0)"
@@ -795,7 +808,9 @@ exports[`Vertical stacked bar chart - Screen resolution Should remain unchanged
           </g>
           <g>
             <g
+              aria-label="February. Metadata1, 30. Metadata2, 3. Metadata3, 40. Supported Builds, 41."
               id="1-singleBar"
+              role="listbox"
             >
               <rect
                 aria-label="February. Metadata1, 30."
@@ -804,7 +819,7 @@ exports[`Vertical stacked bar chart - Screen resolution Should remain unchanged
                 fill="#0078d4"
                 height="62.999999999999986"
                 opacity="1"
-                role="img"
+                role="option"
                 rx="0"
                 tabindex="0"
                 transform="translate(0, 0)"
@@ -819,7 +834,7 @@ exports[`Vertical stacked bar chart - Screen resolution Should remain unchanged
                 fill="#002050"
                 height="6.299999999999999"
                 opacity="1"
-                role="img"
+                role="option"
                 rx="0"
                 tabindex="0"
                 transform="translate(0, 0)"
@@ -834,7 +849,7 @@ exports[`Vertical stacked bar chart - Screen resolution Should remain unchanged
                 fill="#00188f"
                 height="83.99999999999999"
                 opacity="1"
-                role="img"
+                role="option"
                 rx="0"
                 tabindex="0"
                 transform="translate(0, 0)"
@@ -858,7 +873,9 @@ exports[`Vertical stacked bar chart - Screen resolution Should remain unchanged
           </g>
           <g>
             <g
+              aria-label="March. Metadata1, 10. Metadata2, 60. Metadata3, 30. Supported Builds, 100."
               id="2-singleBar"
+              role="listbox"
             >
               <rect
                 aria-label="March. Metadata1, 10."
@@ -867,7 +884,7 @@ exports[`Vertical stacked bar chart - Screen resolution Should remain unchanged
                 fill="#0078d4"
                 height="21"
                 opacity="1"
-                role="img"
+                role="option"
                 rx="0"
                 tabindex="0"
                 transform="translate(0, 0)"
@@ -882,7 +899,7 @@ exports[`Vertical stacked bar chart - Screen resolution Should remain unchanged
                 fill="#002050"
                 height="126"
                 opacity="1"
-                role="img"
+                role="option"
                 rx="0"
                 tabindex="0"
                 transform="translate(0, 0)"
@@ -897,7 +914,7 @@ exports[`Vertical stacked bar chart - Screen resolution Should remain unchanged
                 fill="#00188f"
                 height="63"
                 opacity="1"
-                role="img"
+                role="option"
                 rx="0"
                 tabindex="0"
                 transform="translate(0, 0)"
@@ -921,67 +938,72 @@ exports[`Vertical stacked bar chart - Screen resolution Should remain unchanged
           </g>
         </g>
         <g>
-          <line
-            opacity="1"
-            stroke="#0078d4"
-            stroke-linecap="round"
-            stroke-width="3"
-            transform="translate(8, 0)"
-            x1="279"
-            x2="327"
-            y1="141.8"
-            y2="143.9"
-          />
-          <line
-            opacity="1"
-            stroke="#0078d4"
-            stroke-linecap="round"
-            stroke-width="3"
-            transform="translate(8, 0)"
-            x1="327"
-            x2="375"
-            y1="143.9"
-            y2="20"
-          />
-          <circle
-            aria-label="January. Supported Builds, 42."
-            cx="279"
-            cy="141.8"
-            fill="var(--colorNeutralBackground1)"
-            opacity="0"
-            r="8"
-            role="img"
-            stroke="#0078d4"
-            stroke-width="3"
-            tabindex="0"
-            transform="translate(8, 0)"
-          />
-          <circle
-            aria-label="February. Supported Builds, 41."
-            cx="327"
-            cy="143.9"
-            fill="var(--colorNeutralBackground1)"
-            opacity="0"
-            r="8"
-            role="img"
-            stroke="#0078d4"
-            stroke-width="3"
-            tabindex="0"
-            transform="translate(8, 0)"
-          />
-          <circle
-            aria-label="March. Supported Builds, 100."
-            cx="375"
-            cy="20"
-            fill="var(--colorNeutralBackground1)"
-            opacity="0"
-            r="8"
-            role="img"
-            stroke="#0078d4"
-            stroke-width="3"
-            tabindex="0"
-            transform="translate(8, 0)"
-          />
+          <g
+            aria-label="Supported Builds, line with 3 data points."
+            role="listbox"
+          >
+            <line
+              opacity="1"
+              stroke="#0078d4"
+              stroke-linecap="round"
+              stroke-width="3"
+              transform="translate(8, 0)"
+              x1="279"
+              x2="327"
+              y1="141.8"
+              y2="143.9"
+            />
+            <line
+              opacity="1"
+              stroke="#0078d4"
+              stroke-linecap="round"
+              stroke-width="3"
+              transform="translate(8, 0)"
+              x1="327"
+              x2="375"
+              y1="143.9"
+              y2="20"
+            />
+            <circle
+              aria-label="January. Supported Builds, 42."
+              cx="279"
+              cy="141.8"
+              fill="var(--colorNeutralBackground1)"
+              opacity="0"
+              r="8"
+              role="option"
+              stroke="#0078d4"
+              stroke-width="3"
+              tabindex="0"
+              transform="translate(8, 0)"
+            />
+            <circle
+              aria-label="February. Supported Builds, 41."
+              cx="327"
+              cy="143.9"
+              fill="var(--colorNeutralBackground1)"
+              opacity="0"
+              r="8"
+              role="option"
+              stroke="#0078d4"
+              stroke-width="3"
+              tabindex="0"
+              transform="translate(8, 0)"
+            />
+            <circle
+              aria-label="March. Supported Builds, 100."
+              cx="375"
+              cy="20"
+              fill="var(--colorNeutralBackground1)"
+              opacity="0"
+              r="8"
+              role="option"
+              stroke="#0078d4"
+              stroke-width="3"
+              tabindex="0"
+              transform="translate(8, 0)"
+            />
+          </g>
         </g>
       </svg>
     </div>
@@ -1440,7 +1462,9 @@ exports[`Vertical stacked bar chart rendering Should render the vertical stacked
         >
           <g>
             <g
+              aria-label="0. Metadata1, 40%. Metadata2, 5%."
               id="0-singleBar"
+              role="listbox"
             >
               <rect
                 aria-label="2020/04/30. Metadata1, 40%."
@@ -1449,7 +1473,7 @@ exports[`Vertical stacked bar chart rendering Should render the vertical stacked
                 fill="aqua"
                 height="188.46153846153845"
                 opacity="1"
-                role="img"
+                role="option"
                 rx="0"
                 tabindex="0"
                 transform="translate(-8, 0)"
@@ -1464,7 +1488,7 @@ exports[`Vertical stacked bar chart rendering Should render the vertical stacked
                 fill="navy"
                 height="23.557692307692307"
                 opacity="1"
-                role="img"
+                role="option"
                 rx="0"
                 tabindex="0"
                 transform="translate(-8, 0)"
@@ -1488,7 +1512,9 @@ exports[`Vertical stacked bar chart rendering Should render the vertical stacked
           </g>
           <g>
             <g
+              aria-label="20. Metadata1, 30%. Metadata2, 20%."
               id="1-singleBar"
+              role="listbox"
             >
               <rect
                 aria-label="2020/04/30. Metadata1, 30%."
@@ -1497,7 +1523,7 @@ exports[`Vertical stacked bar chart rendering Should render the vertical stacked
                 fill="aqua"
                 height="141.34615384615384"
                 opacity="1"
-                role="img"
+                role="option"
                 rx="0"
                 tabindex="0"
                 transform="translate(-8, 0)"
@@ -1512,7 +1538,7 @@ exports[`Vertical stacked bar chart rendering Should render the vertical stacked
                 fill="navy"
                 height="94.23076923076923"
                 opacity="1"
-                role="img"
+                role="option"
                 rx="0"
                 tabindex="0"
                 transform="translate(-8, 0)"
@@ -1955,7 +1981,9 @@ exports[`VerticalStackedBarChart - mouse events Should render callout correctly
         >
           <g>
             <g
+              aria-label="0. Metadata1, 40%. Metadata2, 5%."
               id="0-singleBar"
+              role="listbox"
             >
               <rect
                 aria-label="2020/04/30. Metadata1, 40%."
@@ -1964,7 +1992,7 @@ exports[`VerticalStackedBarChart - mouse events Should render callout correctly
                 fill="aqua"
                 height="188.46153846153845"
                 opacity="1"
-                role="img"
+                role="option"
                 rx="0"
                 tabindex="0"
                 transform="translate(-8, 0)"
@@ -1979,7 +2007,7 @@ exports[`VerticalStackedBarChart - mouse events Should render callout correctly
                 fill="navy"
                 height="23.557692307692307"
                 opacity="1"
-                role="img"
+                role="option"
                 rx="0"
                 tabindex="0"
                 transform="translate(-8, 0)"
@@ -2003,7 +2031,9 @@ exports[`VerticalStackedBarChart - mouse events Should render callout correctly
           </g>
           <g>
             <g
+              aria-label="20. Metadata1, 30%. Metadata2, 20%."
               id="1-singleBar"
+              role="listbox"
             >
               <rect
                 aria-label="2020/04/30. Metadata1, 30%."
@@ -2012,7 +2042,7 @@ exports[`VerticalStackedBarChart - mouse events Should render callout correctly
                 fill="aqua"
                 height="141.34615384615384"
                 opacity="1"
-                role="img"
+                role="option"
                 rx="0"
                 tabindex="0"
                 transform="translate(-8, 0)"
@@ -2027,7 +2057,7 @@ exports[`VerticalStackedBarChart - mouse events Should render callout correctly
                 fill="navy"
                 height="94.23076923076923"
                 opacity="1"
-                role="img"
+                role="option"
                 rx="0"
                 tabindex="0"
                 transform="translate(-8, 0)"
@@ -2523,7 +2553,9 @@ exports[`VerticalStackedBarChart - mouse events Should render customized callout
         >
           <g>
             <g
+              aria-label="0. Metadata1, 40%. Metadata2, 5%."
               id="0-singleBar"
+              role="listbox"
             >
               <rect
                 aria-label="2020/04/30. Metadata1, 40%."
@@ -2532,7 +2564,7 @@ exports[`VerticalStackedBarChart - mouse events Should render customized callout
                 fill="aqua"
                 height="188.46153846153845"
                 opacity="1"
-                role="img"
+                role="option"
                 rx="0"
                 tabindex="0"
                 transform="translate(-8, 0)"
@@ -2547,7 +2579,7 @@ exports[`VerticalStackedBarChart - mouse events Should render customized callout
                 fill="navy"
                 height="23.557692307692307"
                 opacity="1"
-                role="img"
+                role="option"
                 rx="0"
                 tabindex="0"
                 transform="translate(-8, 0)"
@@ -2571,7 +2603,9 @@ exports[`VerticalStackedBarChart - mouse events Should render customized callout
           </g>
           <g>
             <g
+              aria-label="20. Metadata1, 30%. Metadata2, 20%."
               id="1-singleBar"
+              role="listbox"
             >
               <rect
                 aria-label="2020/04/30. Metadata1, 30%."
@@ -2580,7 +2614,7 @@ exports[`VerticalStackedBarChart - mouse events Should render customized callout
                 fill="aqua"
                 height="141.34615384615384"
                 opacity="1"
-                role="img"
+                role="option"
                 rx="0"
                 tabindex="0"
                 transform="translate(-8, 0)"
@@ -2595,7 +2629,7 @@ exports[`VerticalStackedBarChart - mouse events Should render customized callout
                 fill="navy"
                 height="94.23076923076923"
                 opacity="1"
-                role="img"
+                role="option"
                 rx="0"
                 tabindex="0"
                 transform="translate(-8, 0)"
@@ -3068,7 +3102,9 @@ exports[`VerticalStackedBarChart - mouse events Should render customized callout
         >
           <g>
             <g
+              aria-label="0. Metadata1, 40%. Metadata2, 5%. Line1, 15."
               id="0-singleBar"
+              role="listbox"
             >
               <rect
                 aria-label="2020/04/30. Metadata1, 40%."
@@ -3077,7 +3113,7 @@ exports[`VerticalStackedBarChart - mouse events Should render customized callout
                 fill="aqua"
                 height="188.46153846153845"
                 opacity="1"
-                role="img"
+                role="option"
                 rx="0"
                 tabindex="0"
                 transform="translate(-8, 0)"
@@ -3092,7 +3128,7 @@ exports[`VerticalStackedBarChart - mouse events Should render customized callout
                 fill="navy"
                 height="23.557692307692307"
                 opacity="1"
-                role="img"
+                role="option"
                 rx="0"
                 tabindex="0"
                 transform="translate(-8, 0)"
@@ -3116,7 +3152,9 @@ exports[`VerticalStackedBarChart - mouse events Should render customized callout
           </g>
           <g>
             <g
+              aria-label="20. Metadata1, 30%. Metadata2, 20%. Line1, 30."
               id="1-singleBar"
+              role="listbox"
             >
               <rect
                 aria-label="2020/04/30. Metadata1, 30%."
@@ -3125,7 +3163,7 @@ exports[`VerticalStackedBarChart - mouse events Should render customized callout
                 fill="aqua"
                 height="141.34615384615384"
                 opacity="1"
-                role="img"
+                role="option"
                 rx="0"
                 tabindex="0"
                 transform="translate(-8, 0)"
@@ -3140,7 +3178,7 @@ exports[`VerticalStackedBarChart - mouse events Should render customized callout
                 fill="navy"
                 height="94.23076923076923"
                 opacity="1"
-                role="img"
+                role="option"
                 rx="0"
                 tabindex="0"
                 transform="translate(-8, 0)"
@@ -3164,43 +3202,48 @@ exports[`VerticalStackedBarChart - mouse events Should render customized callout
           </g>
         </g>
         <g>
-          <line
-            opacity="1"
-            stroke="yellow"
-            stroke-linecap="round"
-            stroke-width="3"
-            transform="translate(0, 0)"
-            x1="56"
-            x2="614"
-            y1="194.3269230769231"
-            y2="123.65384615384616"
-          />
-          <circle
-            aria-label="0. Line1, 15."
-            cx="56"
-            cy="194.3269230769231"
-            fill="var(--colorNeutralBackground1)"
-            opacity="0"
-            r="8"
-            role="img"
-            stroke="yellow"
-            stroke-width="3"
-            tabindex="0"
-            transform="translate(0, 0)"
-          />
-          <circle
-            aria-label="20. Line1, 30."
-            cx="614"
-            cy="123.65384615384616"
-            fill="var(--colorNeutralBackground1)"
-            opacity="0"
-            r="8"
-            role="img"
-            stroke="yellow"
-            stroke-width="3"
-            tabindex="0"
-            transform="translate(0, 0)"
-          />
+          <g
+            aria-label="Line1, line with 2 data points."
+            role="listbox"
+          >
+            <line
+              opacity="1"
+              stroke="yellow"
+              stroke-linecap="round"
+              stroke-width="3"
+              transform="translate(0, 0)"
+              x1="56"
+              x2="614"
+              y1="194.3269230769231"
+              y2="123.65384615384616"
+            />
+            <circle
+              aria-label="0. Line1, 15."
+              cx="56"
+              cy="194.3269230769231"
+              fill="var(--colorNeutralBackground1)"
+              opacity="0"
+              r="8"
+              role="option"
+              stroke="yellow"
+              stroke-width="3"
+              tabindex="0"
+              transform="translate(0, 0)"
+            />
+            <circle
+              aria-label="20. Line1, 30."
+              cx="614"
+              cy="123.65384615384616"
+              fill="var(--colorNeutralBackground1)"
+              opacity="0"
+              r="8"
+              role="option"
+              stroke="yellow"
+              stroke-width="3"
+              tabindex="0"
+              transform="translate(0, 0)"
+            />
+          </g>
         </g>
       </svg>
     </div>
@@ -3695,7 +3738,9 @@ exports[`VerticalStackedBarChart snapShot testing Should not render bar labels 1
       >
         <g>
           <g
+            aria-label="0. Metadata1, 40%. Metadata2, 5%."
             id="0-singleBar"
+            role="listbox"
           >
             <rect
               aria-label="2020/04/30. Metadata1, 40%."
@@ -3704,7 +3749,7 @@ exports[`VerticalStackedBarChart snapShot testing Should not render bar labels 1
               fill="aqua"
               height="188.46153846153845"
               opacity="1"
-              role="img"
+              role="option"
               rx="0"
               tabindex="0"
               transform="translate(-8, 0)"
@@ -3719,7 +3764,7 @@ exports[`VerticalStackedBarChart snapShot testing Should not render bar labels 1
               fill="navy"
               height="23.557692307692307"
               opacity="1"
-              role="img"
+              role="option"
               rx="0"
               tabindex="0"
               transform="translate(-8, 0)"
@@ -3731,7 +3776,9 @@ exports[`VerticalStackedBarChart snapShot testing Should not render bar labels 1
         </g>
         <g>
           <g
+            aria-label="20. Metadata1, 30%. Metadata2, 20%."
             id="1-singleBar"
+            role="listbox"
           >
             <rect
               aria-label="2020/04/30. Metadata1, 30%."
@@ -3740,7 +3787,7 @@ exports[`VerticalStackedBarChart snapShot testing Should not render bar labels 1
               fill="aqua"
               height="141.34615384615384"
               opacity="1"
-              role="img"
+              role="option"
               rx="0"
               tabindex="0"
               transform="translate(-8, 0)"
@@ -3755,7 +3802,7 @@ exports[`VerticalStackedBarChart snapShot testing Should not render bar labels 1
               fill="navy"
               height="94.23076923076923"
               opacity="1"
-              role="img"
+              role="option"
               rx="0"
               tabindex="0"
               transform="translate(-8, 0)"
@@ -4184,7 +4231,9 @@ exports[`VerticalStackedBarChart snapShot testing Should render gradients on bar
       >
         <g>
           <g
+            aria-label="0. Metadata1, 40%. Metadata2, 5%."
             id="0-singleBar"
+            role="listbox"
           >
             <rect
               aria-label="2020/04/30. Metadata1, 40%."
@@ -4193,7 +4242,7 @@ exports[`VerticalStackedBarChart snapShot testing Should render gradients on bar
               fill="aqua"
               height="188.46153846153845"
               opacity="1"
-              role="img"
+              role="option"
               rx="0"
               tabindex="0"
               transform="translate(-8, 0)"
@@ -4208,7 +4257,7 @@ exports[`VerticalStackedBarChart snapShot testing Should render gradients on bar
               fill="navy"
               height="23.557692307692307"
               opacity="1"
-              role="img"
+              role="option"
               rx="0"
               tabindex="0"
               transform="translate(-8, 0)"
@@ -4232,7 +4281,9 @@ exports[`VerticalStackedBarChart snapShot testing Should render gradients on bar
         </g>
         <g>
           <g
+            aria-label="20. Metadata1, 30%. Metadata2, 20%."
             id="1-singleBar"
+            role="listbox"
           >
             <rect
               aria-label="2020/04/30. Metadata1, 30%."
@@ -4241,7 +4292,7 @@ exports[`VerticalStackedBarChart snapShot testing Should render gradients on bar
               fill="aqua"
               height="141.34615384615384"
               opacity="1"
-              role="img"
+              role="option"
               rx="0"
               tabindex="0"
               transform="translate(-8, 0)"
@@ -4256,7 +4307,7 @@ exports[`VerticalStackedBarChart snapShot testing Should render gradients on bar
               fill="navy"
               height="94.23076923076923"
               opacity="1"
-              role="img"
+              role="option"
               rx="0"
               tabindex="0"
               transform="translate(-8, 0)"
@@ -4697,7 +4748,9 @@ exports[`VerticalStackedBarChart snapShot testing Should render rounded corners
       >
         <g>
           <g
+            aria-label="0. Metadata1, 40%. Metadata2, 5%."
             id="0-singleBar"
+            role="listbox"
           >
             <rect
               aria-label="2020/04/30. Metadata1, 40%."
@@ -4706,7 +4759,7 @@ exports[`VerticalStackedBarChart snapShot testing Should render rounded corners
               fill="aqua"
               height="188.46153846153845"
               opacity="1"
-              role="img"
+              role="option"
               rx="3"
               tabindex="0"
               transform="translate(-8, 0)"
@@ -4721,7 +4774,7 @@ exports[`VerticalStackedBarChart snapShot testing Should render rounded corners
               fill="navy"
               height="23.557692307692307"
               opacity="1"
-              role="img"
+              role="option"
               rx="3"
               tabindex="0"
               transform="translate(-8, 0)"
@@ -4745,7 +4798,9 @@ exports[`VerticalStackedBarChart snapShot testing Should render rounded corners
         </g>
         <g>
           <g
+            aria-label="20. Metadata1, 30%. Metadata2, 20%."
             id="1-singleBar"
+            role="listbox"
           >
             <rect
               aria-label="2020/04/30. Metadata1, 30%."
@@ -4754,7 +4809,7 @@ exports[`VerticalStackedBarChart snapShot testing Should render rounded corners
               fill="aqua"
               height="141.34615384615384"
               opacity="1"
-              role="img"
+              role="option"
               rx="3"
               tabindex="0"
               transform="translate(-8, 0)"
@@ -4769,7 +4824,7 @@ exports[`VerticalStackedBarChart snapShot testing Should render rounded corners
               fill="navy"
               height="94.23076923076923"
               opacity="1"
-              role="img"
+              role="option"
               rx="3"
               tabindex="0"
               transform="translate(-8, 0)"
@@ -5210,7 +5265,9 @@ exports[`VerticalStackedBarChart snapShot testing renders VerticalStackedBarChar
       >
         <g>
           <g
+            aria-label="0. Metadata1, 40%. Metadata2, 5%."
             id="0-singleBar"
+            role="listbox"
           >
             <rect
               aria-label="2020/04/30. Metadata1, 40%."
@@ -5219,7 +5276,7 @@ exports[`VerticalStackedBarChart snapShot testing renders VerticalStackedBarChar
               fill="aqua"
               height="188.46153846153845"
               opacity="1"
-              role="img"
+              role="option"
               rx="0"
               tabindex="0"
               transform="translate(-8, 0)"
@@ -5234,7 +5291,7 @@ exports[`VerticalStackedBarChart snapShot testing renders VerticalStackedBarChar
               fill="navy"
               height="23.557692307692307"
               opacity="1"
-              role="img"
+              role="option"
               rx="0"
               tabindex="0"
               transform="translate(-8, 0)"
@@ -5258,7 +5315,9 @@ exports[`VerticalStackedBarChart snapShot testing renders VerticalStackedBarChar
         </g>
         <g>
           <g
+            aria-label="20. Metadata1, 30%. Metadata2, 20%."
             id="1-singleBar"
+            role="listbox"
           >
             <rect
               aria-label="2020/04/30. Metadata1, 30%."
@@ -5267,7 +5326,7 @@ exports[`VerticalStackedBarChart snapShot testing renders VerticalStackedBarChar
               fill="aqua"
               height="141.34615384615384"
               opacity="1"
-              role="img"
+              role="option"
               rx="0"
               tabindex="0"
               transform="translate(-8, 0)"
@@ -5282,7 +5341,7 @@ exports[`VerticalStackedBarChart snapShot testing renders VerticalStackedBarChar
               fill="navy"
               height="94.23076923076923"
               opacity="1"
-              role="img"
+              role="option"
               rx="0"
               tabindex="0"
               transform="translate(-8, 0)"
@@ -5723,7 +5782,9 @@ exports[`VerticalStackedBarChart snapShot testing renders enabledLegendsWrapLine
       >
         <g>
           <g
+            aria-label="0. Metadata1, 40%. Metadata2, 5%."
             id="0-singleBar"
+            role="listbox"
           >
             <rect
               aria-label="2020/04/30. Metadata1, 40%."
@@ -5732,7 +5793,7 @@ exports[`VerticalStackedBarChart snapShot testing renders enabledLegendsWrapLine
               fill="aqua"
               height="188.46153846153845"
               opacity="1"
-              role="img"
+              role="option"
               rx="0"
               tabindex="0"
               transform="translate(-8, 0)"
@@ -5747,7 +5808,7 @@ exports[`VerticalStackedBarChart snapShot testing renders enabledLegendsWrapLine
               fill="navy"
               height="23.557692307692307"
               opacity="1"
-              role="img"
+              role="option"
               rx="0"
               tabindex="0"
               transform="translate(-8, 0)"
@@ -5771,7 +5832,9 @@ exports[`VerticalStackedBarChart snapShot testing renders enabledLegendsWrapLine
         </g>
         <g>
           <g
+            aria-label="20. Metadata1, 30%. Metadata2, 20%."
             id="1-singleBar"
+            role="listbox"
           >
             <rect
               aria-label="2020/04/30. Metadata1, 30%."
@@ -5780,7 +5843,7 @@ exports[`VerticalStackedBarChart snapShot testing renders enabledLegendsWrapLine
               fill="aqua"
               height="141.34615384615384"
               opacity="1"
-              role="img"
+              role="option"
               rx="0"
               tabindex="0"
               transform="translate(-8, 0)"
@@ -5795,7 +5858,7 @@ exports[`VerticalStackedBarChart snapShot testing renders enabledLegendsWrapLine
               fill="navy"
               height="94.23076923076923"
               opacity="1"
-              role="img"
+              role="option"
               rx="0"
               tabindex="0"
               transform="translate(-8, 0)"
@@ -6243,7 +6306,9 @@ exports[`VerticalStackedBarChart snapShot testing renders hideLegend correctly 1
       >
         <g>
           <g
+            aria-label="0. Metadata1, 40%. Metadata2, 5%."
             id="0-singleBar"
+            role="listbox"
           >
             <rect
               aria-label="2020/04/30. Metadata1, 40%."
@@ -6252,7 +6317,7 @@ exports[`VerticalStackedBarChart snapShot testing renders hideLegend correctly 1
               fill="aqua"
               height="3.846153846153846"
               opacity="1"
-              role="img"
+              role="option"
               rx="0"
               tabindex="0"
               transform="translate(-8, 0)"
@@ -6267,7 +6332,7 @@ exports[`VerticalStackedBarChart snapShot testing renders hideLegend correctly 1
               fill="navy"
               height="0.4807692307692307"
               opacity="1"
-              role="img"
+              role="option"
               rx="0"
               tabindex="0"
               transform="translate(-8, 0)"
@@ -6291,7 +6356,9 @@ exports[`VerticalStackedBarChart snapShot testing renders hideLegend correctly 1
         </g>
         <g>
           <g
+            aria-label="20. Metadata1, 30%. Metadata2, 20%."
             id="1-singleBar"
+            role="listbox"
           >
             <rect
               aria-label="2020/04/30. Metadata1, 30%."
@@ -6300,7 +6367,7 @@ exports[`VerticalStackedBarChart snapShot testing renders hideLegend correctly 1
               fill="aqua"
               height="2.884615384615384"
               opacity="1"
-              role="img"
+              role="option"
               rx="0"
               tabindex="0"
               transform="translate(-8, 0)"
@@ -6315,7 +6382,7 @@ exports[`VerticalStackedBarChart snapShot testing renders hideLegend correctly 1
               fill="navy"
               height="1.923076923076923"
               opacity="1"
-              role="img"
+              role="option"
               rx="0"
               tabindex="0"
               transform="translate(-8, 0)"
@@ -6701,7 +6768,9 @@ exports[`VerticalStackedBarChart snapShot testing renders hideTooltip correctly
       >
         <g>
           <g
+            aria-label="0. Metadata1, 40%. Metadata2, 5%."
             id="0-singleBar"
+            role="listbox"
           >
             <rect
               aria-label="2020/04/30. Metadata1, 40%."
@@ -6710,7 +6779,7 @@ exports[`VerticalStackedBarChart snapShot testing renders hideTooltip correctly
               fill="aqua"
               height="188.46153846153845"
               opacity="1"
-              role="img"
+              role="option"
               rx="0"
               transform="translate(-8, 0)"
               width="16"
@@ -6724,7 +6793,7 @@ exports[`VerticalStackedBarChart snapShot testing renders hideTooltip correctly
               fill="navy"
               height="23.557692307692307"
               opacity="1"
-              role="img"
+              role="option"
               rx="0"
               transform="translate(-8, 0)"
               width="16"
@@ -6747,7 +6816,9 @@ exports[`VerticalStackedBarChart snapShot testing renders hideTooltip correctly
         </g>
         <g>
           <g
+            aria-label="20. Metadata1, 30%. Metadata2, 20%."
             id="1-singleBar"
+            role="listbox"
           >
             <rect
               aria-label="2020/04/30. Metadata1, 30%."
@@ -6756,7 +6827,7 @@ exports[`VerticalStackedBarChart snapShot testing renders hideTooltip correctly
               fill="aqua"
               height="141.34615384615384"
               opacity="1"
-              role="img"
+              role="option"
               rx="0"
               transform="translate(-8, 0)"
               width="16"
@@ -6770,7 +6841,7 @@ exports[`VerticalStackedBarChart snapShot testing renders hideTooltip correctly
               fill="navy"
               height="94.23076923076923"
               opacity="1"
-              role="img"
+              role="option"
               rx="0"
               transform="translate(-8, 0)"
               width="16"
@@ -7212,7 +7283,7 @@ exports[`VerticalStackedBarChart snapShot testing renders isCalloutForStack corr
           <g
             aria-label="0. Metadata1, 40%. Metadata2, 5%."
             id="0-singleBar"
-            role="img"
+            role="listbox"
             tabindex="0"
           >
             <rect
@@ -7257,7 +7328,7 @@ exports[`VerticalStackedBarChart snapShot testing renders isCalloutForStack corr
           <g
             aria-label="20. Metadata1, 30%. Metadata2, 20%."
             id="1-singleBar"
-            role="img"
+            role="listbox"
             tabindex="0"
           >
             <rect
@@ -7794,7 +7865,9 @@ exports[`VerticalStackedBarChart snapShot testing renders showXAxisLablesTooltip
       >
         <g>
           <g
+            aria-label="0. Metadata1, 40%. Metadata2, 5%."
             id="0-singleBar"
+            role="listbox"
           >
             <rect
               aria-label="2020/04/30. Metadata1, 40%."
@@ -7803,7 +7876,7 @@ exports[`VerticalStackedBarChart snapShot testing renders showXAxisLablesTooltip
               fill="aqua"
               height="188.46153846153845"
               opacity="1"
-              role="img"
+              role="option"
               rx="0"
               tabindex="0"
               transform="translate(-8, 0)"
@@ -7818,7 +7891,7 @@ exports[`VerticalStackedBarChart snapShot testing renders showXAxisLablesTooltip
               fill="navy"
               height="23.557692307692307"
               opacity="1"
-              role="img"
+              role="option"
               rx="0"
               tabindex="0"
               transform="translate(-8, 0)"
@@ -7842,7 +7915,9 @@ exports[`VerticalStackedBarChart snapShot testing renders showXAxisLablesTooltip
         </g>
         <g>
           <g
+            aria-label="20. Metadata1, 30%. Metadata2, 20%."
             id="1-singleBar"
+            role="listbox"
           >
             <rect
               aria-label="2020/04/30. Metadata1, 30%."
@@ -7851,7 +7926,7 @@ exports[`VerticalStackedBarChart snapShot testing renders showXAxisLablesTooltip
               fill="aqua"
               height="141.34615384615384"
               opacity="1"
-              role="img"
+              role="option"
               rx="0"
               tabindex="0"
               transform="translate(-8, 0)"
@@ -7866,7 +7941,7 @@ exports[`VerticalStackedBarChart snapShot testing renders showXAxisLablesTooltip
               fill="navy"
               height="94.23076923076923"
               opacity="1"
-              role="img"
+              role="option"
               rx="0"
               tabindex="0"
               transform="translate(-8, 0)"
@@ -8389,7 +8464,9 @@ exports[`VerticalStackedBarChart snapShot testing renders wrapXAxisLables correc
       >
         <g>
           <g
+            aria-label="0. Metadata1, 40%. Metadata2, 5%."
             id="0-singleBar"
+            role="listbox"
           >
             <rect
               aria-label="2020/04/30. Metadata1, 40%."
@@ -8398,7 +8475,7 @@ exports[`VerticalStackedBarChart snapShot testing renders wrapXAxisLables correc
               fill="aqua"
               height="188.46153846153845"
               opacity="1"
-              role="img"
+              role="option"
               rx="0"
               tabindex="0"
               transform="translate(-8, 0)"
@@ -8413,7 +8490,7 @@ exports[`VerticalStackedBarChart snapShot testing renders wrapXAxisLables correc
               fill="navy"
               height="23.557692307692307"
               opacity="1"
-              role="img"
+              role="option"
               rx="0"
               tabindex="0"
               transform="translate(-8, 0)"
@@ -8437,7 +8514,9 @@ exports[`VerticalStackedBarChart snapShot testing renders wrapXAxisLables correc
         </g>
         <g>
           <g
+            aria-label="20. Metadata1, 30%. Metadata2, 20%."
             id="1-singleBar"
+            role="listbox"
           >
             <rect
               aria-label="2020/04/30. Metadata1, 30%."
@@ -8446,7 +8525,7 @@ exports[`VerticalStackedBarChart snapShot testing renders wrapXAxisLables correc
               fill="aqua"
               height="141.34615384615384"
               opacity="1"
-              role="img"
+              role="option"
               rx="0"
               tabindex="0"
               transform="translate(-8, 0)"
@@ -8461,7 +8540,7 @@ exports[`VerticalStackedBarChart snapShot testing renders wrapXAxisLables correc
               fill="navy"
               height="94.23076923076923"
               opacity="1"
-              role="img"
+              role="option"
               rx="0"
               tabindex="0"
               transform="translate(-8, 0)"
@@ -8909,7 +8988,9 @@ exports[`VerticalStackedBarChart snapShot testing renders yAxisTickFormat correc
       >
         <g>
           <g
+            aria-label="0. Metadata1, 40%. Metadata2, 5%."
             id="0-singleBar"
+            role="listbox"
           >
             <rect
               aria-label="2020/04/30. Metadata1, 40%."
@@ -8918,7 +8999,7 @@ exports[`VerticalStackedBarChart snapShot testing renders yAxisTickFormat correc
               fill="aqua"
               height="188.46153846153845"
               opacity="1"
-              role="img"
+              role="option"
               rx="0"
               tabindex="0"
               transform="translate(-8, 0)"
@@ -8933,7 +9014,7 @@ exports[`VerticalStackedBarChart snapShot testing renders yAxisTickFormat correc
               fill="navy"
               height="23.557692307692307"
               opacity="1"
-              role="img"
+              role="option"
               rx="0"
               tabindex="0"
               transform="translate(-8, 0)"
@@ -8957,7 +9038,9 @@ exports[`VerticalStackedBarChart snapShot testing renders yAxisTickFormat correc
         </g>
         <g>
           <g
+            aria-label="20. Metadata1, 30%. Metadata2, 20%."
             id="1-singleBar"
+            role="listbox"
           >
             <rect
               aria-label="2020/04/30. Metadata1, 30%."
@@ -8966,7 +9049,7 @@ exports[`VerticalStackedBarChart snapShot testing renders yAxisTickFormat correc
               fill="aqua"
               height="141.34615384615384"
               opacity="1"
-              role="img"
+              role="option"
               rx="0"
               tabindex="0"
               transform="translate(-8, 0)"
@@ -8981,7 +9064,7 @@ exports[`VerticalStackedBarChart snapShot testing renders yAxisTickFormat correc
               fill="navy"
               height="94.23076923076923"
               opacity="1"
-              role="img"
+              role="option"
               rx="0"
               tabindex="0"
               transform="translate(-8, 0)"