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

change/@fluentui-react-charts-50b75273-008f-4416-bf72-db392da9bdc5.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Accessibility bug fix",
+  "packageName": "@fluentui/react-charts",
+  "email": "132879294+v-baambati@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/charts/react-charts/library/src/components/GroupedVerticalBarChart/GroupedVerticalBarChart.tsx

@@ -31,6 +31,7 @@ import {
   calcBandwidth,
   calcTotalBandUnits,
   sortAxisCategories,
+  getAriaRole,
 } from '../../utilities/index';
 
 import type {
@@ -594,7 +595,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={getAriaRole(pointData.onClick)}
             />,
           );
 
@@ -871,7 +872,7 @@ export const GroupedVerticalBarChart: React.FC<GroupedVerticalBarChartProps> = R
             tabIndex={shouldHighlight ? 0 : undefined}
             onFocus={e => _onLineFocus(e, series, seriesIdx, pointIdx)}
             onBlur={_onBarLeave}
-            role="img"
+            role={getAriaRole(point.onClick)}
             aria-label={getAriaLabel(
               {
                 xAxisCalloutData: point.xAxisCalloutData,

packages/charts/react-charts/library/src/components/HorizontalBarChart/HorizontalBarChart.tsx

@@ -280,6 +280,8 @@ export const HorizontalBarChart: React.FunctionComponent<HorizontalBarChartProps
       const xValue = point.horizontalBarChartdata!.x;
       const placeholderIndex = 1;
       const isLegendSelected: boolean = _legendHighlighted(point.legend) || _noLegendHighlighted();
+      const chartBarAriaLabel = _getAriaLabel(point).trim();
+      const barAriaLabel = chartBarAriaLabel.length > 0 ? chartBarAriaLabel : 'Bar segment';
 
       // Render bar label instead of placeholder bar for absolute-scale variant
       if (index === placeholderIndex && props.variant === HorizontalBarChartVariant.AbsoluteScale) {
@@ -320,8 +322,9 @@ 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="option"
+          aria-selected={isLegendSelected}
+          aria-label={barAriaLabel}
           onBlur={_hoverOff}
           onMouseLeave={_hoverOff}
           className={classes.barWrapper}
@@ -417,6 +420,7 @@ export const HorizontalBarChart: React.FunctionComponent<HorizontalBarChartProps
           props.variant === HorizontalBarChartVariant.AbsoluteScale ? null : _getChartDataText(points!);
         const bars = _createBars(points!);
         const keyVal = _uniqLineText + '_' + index;
+        const chartGroupAriaLabel = points!.chartTitle?.trim() ? points!.chartTitle : 'Horizontal bar chart data';
         // 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 +444,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={chartGroupAriaLabel}
                   ref={(e: SVGGElement) => {
                     _refCallback(e, points!.chartData![0].legend);
                   }}