From 89d68ae758f0512763eb0753bc0d61c9fffe5a96 Mon Sep 17 00:00:00 2001 From: v-baambati <132879294+v-baambati@users.noreply.github.com> Date: Tue, 9 Jun 2026 10:13:07 +0530 Subject: [PATCH 1/5] fixed voice controll accessibility issue --- .../GroupedVerticalBarChart.tsx | 21 +- .../GroupedVerticalBarChart.test.tsx.snap | 288 +++++++++----- .../HorizontalBarChart/HorizontalBarChart.tsx | 14 +- .../HorizontalBarChart.test.tsx.snap | 184 +++++---- .../HorizontalBarChartWithAxis.tsx | 10 +- .../HorizontalBarChartWithAxis.test.tsx.snap | 228 +++++++----- .../VegaDeclarativeChart.test.tsx.snap | 125 ++++--- .../VerticalBarChart/VerticalBarChart.tsx | 12 +- .../VerticalBarChart.test.tsx.snap | 222 +++++++---- .../VerticalStackedBarChart.tsx | 20 +- .../VerticalStackedBarChart.test.tsx.snap | 351 +++++++++++------- 11 files changed, 926 insertions(+), 549 deletions(-) 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..ad11e19ab6c98c 100644 --- a/packages/charts/react-charts/library/src/components/GroupedVerticalBarChart/GroupedVerticalBarChart.tsx +++ b/packages/charts/react-charts/library/src/components/GroupedVerticalBarChart/GroupedVerticalBarChart.tsx @@ -594,7 +594,7 @@ export const GroupedVerticalBarChart: React.FC = R onClick={pointData.onClick} aria-label={getAriaLabel(pointData, singleSet.xAxisPoint)} tabIndex={_legendHighlighted(pointData.legend) || _noLegendHighlighted() ? 0 : undefined} - role="img" + role="option" />, ); @@ -636,8 +636,15 @@ export const GroupedVerticalBarChart: React.FC = R } } }); + const legendVal = props.chartTitle?.trim() || singleSet.groupSeries?.[0]?.legend || 'Series'; + const chartGroupAriaLabel = `${legendVal}, bar ${singleSet.indexNum + 1} of ${_datasetForBars.length} with ${ + singleSet.groupSeries?.length || 0 + } data points.`; + return ( @@ -871,7 +878,7 @@ export const GroupedVerticalBarChart: React.FC = R tabIndex={shouldHighlight ? 0 : undefined} onFocus={e => _onLineFocus(e, series, seriesIdx, pointIdx)} onBlur={_onBarLeave} - role="img" + role="option" aria-label={getAriaLabel( { xAxisCalloutData: point.xAxisCalloutData, @@ -891,11 +898,19 @@ export const GroupedVerticalBarChart: React.FC = R dots.push({dotGroup}); }); + const legendVal = props.chartTitle?.trim() || _lineData[0]?.legend || 'Series'; + const chartGroupAriaLabel = `${legendVal}, line series with ${_lineData.length} groups and ${_lineData.reduce( + (sum, series) => sum + (series.data?.length || 0), + 0, + )} data points.`; + return dots.length > 0 ? ( {lineBorders.length > 0 ? {lineBorders} : null} {lines.length > 0 ? {lines} : null} - {dots} + + {dots} + ) : null; }; 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..700b91fbb5ef41 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 @@ -209,6 +209,8 @@ exports[`Grouped Vertical bar chart rendering Should render the grouped vertical /> _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,10 @@ export const HorizontalBarChart: React.FunctionComponent { _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..d888e968cf64a0 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" > ) => _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 +646,7 @@ export const HorizontalBarChartWithAxis: React.FunctionComponent { _refCallback(e, point.legend!); }} @@ -888,6 +888,8 @@ export const HorizontalBarChartWithAxis: React.FunctionComponent point.x)!, props.xMaxValue || 0); const legendBars: JSXElement = _getLegendData(_points); + const legendVal = props.chartTitle?.trim() || _points[0]?.legend || 'Series'; + const chartGroupAriaLabel = `${legendVal}, bar chart with ${_points.length} bars and ${_points.length} data points.`; return ( { return ( <> - {_bars} + + {_bars} + ); }} 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..031e5fa961ff8b 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 @@ -328,14 +328,17 @@ exports[`Horizontal bar chart with axis rendering Should render the Horizontal b - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + = 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 = 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 = 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} @@ -1116,6 +1116,8 @@ export const VerticalBarChart: React.FunctionComponent = _yMax = Math.max(d3Max(_points, (point: VerticalBarChartDataPoint) => point.y)!, props.yMaxValue || 0); _yMin = Math.min(d3Min(_points, (point: VerticalBarChartDataPoint) => point.y)!, props.yMinValue || 0); const legendBars: JSXElement = _getLegendData(_points); + const legendVal = props.chartTitle?.trim() || _points[0]?.legend || 'Series'; + const chartGroupAriaLabel = `${legendVal}, bar chart with ${_points.length} bars and ${_points.length} data points.`; const calloutProps = { ...(_isHavingLine && { YValueHover: hoveredYValues, @@ -1179,7 +1181,9 @@ export const VerticalBarChart: React.FunctionComponent = children={(props: ChildProps) => { return ( <> - {_bars} + + {_bars} + {_isHavingLine && ( {_createLine( 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..421caa40e4c71e 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`] = ` - + - + - + - + - + - + - + @@ -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 - + - + - + - + - + - + - + - + - + - + - + - + - + _lineFocus(event, circlePoint, circleRef)} onBlur={_handleMouseOut} - role="img" + role="option" aria-label={_getAriaLabel(circlePoint.xItem, circlePoint as VSChartDataPoint, true)} />, ); @@ -1042,7 +1042,7 @@ export const VerticalStackedBarChart: React.FunctionComponent _onRectFocus(point, singleChartData.xAxisPoint as string, startColor, ref), onBlur: _handleMouseOut, onClick: (event: React.MouseEvent) => _onClick(point, event), - role: 'img', + role: 'option', tabIndex: !props.hideTooltip && shouldHighlight ? 0 : undefined, }; @@ -1145,7 +1145,7 @@ export const VerticalStackedBarChart: React.FunctionComponent _onStackFocus(singleChartData, groupRef), onBlur: _handleMouseOut, onClick: (event: any) => _onClick(singleChartData, event), - role: 'img', + role: 'option', tabIndex: !props.hideTooltip ? 0 : undefined, }; let showLabel = false; @@ -1199,7 +1199,7 @@ export const VerticalStackedBarChart: React.FunctionComponent @@ -1337,7 +1337,8 @@ export const VerticalStackedBarChart: React.FunctionComponent { return ( <> - {_bars} - + + {_bars} + + {_isHavingLines && _createLines( props.xScale!, 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..652d8873e4cac8 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 @@ -202,7 +202,9 @@ exports[`Vertical stacked bar chart - Screen resolution Should remain unchanged - + - + - +
- +
- +
- + - +
- +
- +
- +
- +
- +
@@ -6697,7 +6757,9 @@ exports[`VerticalStackedBarChart snapShot testing renders hideTooltip correctly - +
- +
- +
- +
- +
Date: Wed, 10 Jun 2026 20:21:09 +0530 Subject: [PATCH 2/5] updated aria label --- .../GroupedVerticalBarChart.test.tsx | 22 +++++++++---------- .../GroupedVerticalBarChart.tsx | 4 ++-- .../GroupedVerticalBarChart.test.tsx.snap | 18 ++++++++++----- .../HorizontalBarChart/HorizontalBarChart.tsx | 2 +- .../HorizontalBarChartWithAxis.tsx | 2 +- .../VegaDeclarativeChart.test.tsx.snap | 4 ++-- .../VerticalBarChart/VerticalBarChart.tsx | 2 +- .../VerticalStackedBarChart.tsx | 2 +- 8 files changed, 31 insertions(+), 25 deletions(-) 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(); - 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(); - 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 ad11e19ab6c98c..038a8285c133c7 100644 --- a/packages/charts/react-charts/library/src/components/GroupedVerticalBarChart/GroupedVerticalBarChart.tsx +++ b/packages/charts/react-charts/library/src/components/GroupedVerticalBarChart/GroupedVerticalBarChart.tsx @@ -636,7 +636,7 @@ export const GroupedVerticalBarChart: React.FC = R } } }); - const legendVal = props.chartTitle?.trim() || singleSet.groupSeries?.[0]?.legend || 'Series'; + const legendVal = singleSet.groupSeries?.[0]?.legend || 'Series'; const chartGroupAriaLabel = `${legendVal}, bar ${singleSet.indexNum + 1} of ${_datasetForBars.length} with ${ singleSet.groupSeries?.length || 0 } data points.`; @@ -898,7 +898,7 @@ export const GroupedVerticalBarChart: React.FC = R dots.push({dotGroup}); }); - const legendVal = props.chartTitle?.trim() || _lineData[0]?.legend || 'Series'; + const legendVal = _lineData[0]?.legend || 'Series'; const chartGroupAriaLabel = `${legendVal}, line series with ${_lineData.length} groups and ${_lineData.reduce( (sum, series) => sum + (series.data?.length || 0), 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 700b91fbb5ef41..a90e625a3418ee 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 @@ -1068,6 +1068,8 @@ exports[`GroupedVerticalBarChart - mouse events Should render callout correctly /> point.x)!, props.xMaxValue || 0); const legendBars: JSXElement = _getLegendData(_points); - const legendVal = props.chartTitle?.trim() || _points[0]?.legend || 'Series'; + const legendVal = _points[0]?.legend || 'Series'; const chartGroupAriaLabel = `${legendVal}, bar chart with ${_points.length} bars and ${_points.length} data points.`; return ( @@ -1925,7 +1925,7 @@ exports[`VegaDeclarativeChart - Bar+Line Combo Rendering Bar + Line Combinations = _yMax = Math.max(d3Max(_points, (point: VerticalBarChartDataPoint) => point.y)!, props.yMaxValue || 0); _yMin = Math.min(d3Min(_points, (point: VerticalBarChartDataPoint) => point.y)!, props.yMinValue || 0); const legendBars: JSXElement = _getLegendData(_points); - const legendVal = props.chartTitle?.trim() || _points[0]?.legend || 'Series'; + const legendVal = _points[0]?.legend || 'Series'; const chartGroupAriaLabel = `${legendVal}, bar chart with ${_points.length} bars and ${_points.length} data points.`; const calloutProps = { ...(_isHavingLine && { 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 d1bf9dde625648..0ace1b470fac7e 100644 --- a/packages/charts/react-charts/library/src/components/VerticalStackedBarChart/VerticalStackedBarChart.tsx +++ b/packages/charts/react-charts/library/src/components/VerticalStackedBarChart/VerticalStackedBarChart.tsx @@ -1363,7 +1363,7 @@ export const VerticalStackedBarChart: React.FunctionComponent Date: Wed, 10 Jun 2026 20:35:43 +0530 Subject: [PATCH 3/5] added change file --- ...-react-charts-35c73142-960e-4539-8688-379264b9cc34.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@fluentui-react-charts-35c73142-960e-4539-8688-379264b9cc34.json 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" +} From 3c6207d7911de4bb45e03b46683329ca138eedfe Mon Sep 17 00:00:00 2001 From: v-baambati <132879294+v-baambati@users.noreply.github.com> Date: Wed, 10 Jun 2026 21:11:17 +0530 Subject: [PATCH 4/5] fixed duplicate aria label value --- .../components/HorizontalBarChart/HorizontalBarChart.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) 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 bcbff99efa5d86..df380481e3b28d 100644 --- a/packages/charts/react-charts/library/src/components/HorizontalBarChart/HorizontalBarChart.tsx +++ b/packages/charts/react-charts/library/src/components/HorizontalBarChart/HorizontalBarChart.tsx @@ -419,7 +419,12 @@ export const HorizontalBarChart: React.FunctionComponent segment.trim()) + .filter(Boolean)[0] || 'Series'; const chartGroupAriaLabel = `${legendVal}, bar ${index + 1} of ${data!.length} with ${ points!.chartData?.length || 0 } data points.`; From d3771a761a73b4a9605e97edcb1c127133500b62 Mon Sep 17 00:00:00 2001 From: v-baambati <132879294+v-baambati@users.noreply.github.com> Date: Wed, 17 Jun 2026 10:43:53 +0530 Subject: [PATCH 5/5] updated aria-label value as per the review comments --- .../GroupedVerticalBarChart.tsx | 23 +- .../GroupedVerticalBarChart.test.tsx.snap | 102 +- .../HorizontalBarChart/HorizontalBarChart.tsx | 12 +- .../HorizontalBarChart.test.tsx.snap | 58 +- .../HorizontalBarChartWithAxis.tsx | 30 +- .../HorizontalBarChartWithAxis.test.tsx.snap | 3872 +++++++++-------- .../VegaDeclarativeChart.test.tsx.snap | 946 ++-- .../VerticalBarChart/VerticalBarChart.tsx | 46 +- .../VerticalBarChart.test.tsx.snap | 393 +- .../VerticalStackedBarChart.tsx | 41 +- .../VerticalStackedBarChart.test.tsx.snap | 524 ++- 11 files changed, 3230 insertions(+), 2817 deletions(-) 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 038a8285c133c7..4565be3c935dd3 100644 --- a/packages/charts/react-charts/library/src/components/GroupedVerticalBarChart/GroupedVerticalBarChart.tsx +++ b/packages/charts/react-charts/library/src/components/GroupedVerticalBarChart/GroupedVerticalBarChart.tsx @@ -636,15 +636,14 @@ export const GroupedVerticalBarChart: React.FC = R } } }); - const legendVal = singleSet.groupSeries?.[0]?.legend || 'Series'; - const chartGroupAriaLabel = `${legendVal}, bar ${singleSet.indexNum + 1} of ${_datasetForBars.length} with ${ - singleSet.groupSeries?.length || 0 - } data points.`; - + const legendNames = presentLegends.join(', '); + const categoryGroupAriaLabel = `${singleSet.xAxisPoint}, category ${singleSet.indexNum + 1} of ${ + _datasetForBars.length + }, with bar series: ${legendNames}.`; return ( @@ -878,7 +877,7 @@ export const GroupedVerticalBarChart: React.FC = R tabIndex={shouldHighlight ? 0 : undefined} onFocus={e => _onLineFocus(e, series, seriesIdx, pointIdx)} onBlur={_onBarLeave} - role="option" + role="listbox" aria-label={getAriaLabel( { xAxisCalloutData: point.xAxisCalloutData, @@ -898,19 +897,11 @@ export const GroupedVerticalBarChart: React.FC = R dots.push({dotGroup}); }); - const legendVal = _lineData[0]?.legend || 'Series'; - const chartGroupAriaLabel = `${legendVal}, line series with ${_lineData.length} groups and ${_lineData.reduce( - (sum, series) => sum + (series.data?.length || 0), - 0, - )} data points.`; - return dots.length > 0 ? ( {lineBorders.length > 0 ? {lineBorders} : null} {lines.length > 0 ? {lines} : null} - - {dots} - + {dots} ) : null; }; 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 a90e625a3418ee..486d0d71aaddbe 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 @@ -209,7 +209,7 @@ exports[`Grouped Vertical bar chart rendering Should render the grouped vertical /> @@ -261,7 +261,7 @@ exports[`Grouped Vertical bar chart rendering Should render the grouped vertical @@ -313,7 +313,7 @@ exports[`Grouped Vertical bar chart rendering Should render the grouped vertical @@ -635,7 +635,7 @@ exports[`Grouped Vertical bar chart rendering Should render the grouped vertical /> @@ -687,7 +687,7 @@ exports[`Grouped Vertical bar chart rendering Should render the grouped vertical @@ -739,7 +739,7 @@ exports[`Grouped Vertical bar chart rendering Should render the grouped vertical @@ -1068,7 +1068,7 @@ exports[`GroupedVerticalBarChart - mouse events Should render callout correctly /> @@ -1120,7 +1120,7 @@ exports[`GroupedVerticalBarChart - mouse events Should render callout correctly @@ -1172,7 +1172,7 @@ exports[`GroupedVerticalBarChart - mouse events Should render callout correctly @@ -1566,7 +1566,7 @@ Object { /> @@ -1618,7 +1618,7 @@ Object { @@ -1670,7 +1670,7 @@ Object { @@ -1990,7 +1990,7 @@ Object { /> @@ -2042,7 +2042,7 @@ Object { @@ -2094,7 +2094,7 @@ Object { @@ -2473,7 +2473,7 @@ Object { /> @@ -2525,7 +2525,7 @@ Object { @@ -2577,7 +2577,7 @@ Object { @@ -2904,7 +2904,7 @@ Object { /> @@ -2956,7 +2956,7 @@ Object { @@ -3008,7 +3008,7 @@ Object { @@ -3394,7 +3394,7 @@ Object { /> @@ -3446,7 +3446,7 @@ Object { @@ -3498,7 +3498,7 @@ Object { @@ -3763,7 +3763,7 @@ Object { /> @@ -3815,7 +3815,7 @@ Object { @@ -3867,7 +3867,7 @@ Object { @@ -4191,7 +4191,7 @@ Object { /> @@ -4243,7 +4243,7 @@ Object { @@ -4295,7 +4295,7 @@ Object { @@ -4615,7 +4615,7 @@ Object { /> @@ -4667,7 +4667,7 @@ Object { @@ -4719,7 +4719,7 @@ Object { @@ -5119,7 +5119,7 @@ Object { /> @@ -5171,7 +5171,7 @@ Object { @@ -5223,7 +5223,7 @@ Object { @@ -5569,7 +5569,7 @@ Object { /> @@ -5621,7 +5621,7 @@ Object { @@ -5673,7 +5673,7 @@ Object { @@ -6134,7 +6134,7 @@ Object { /> @@ -6186,7 +6186,7 @@ Object { @@ -6238,7 +6238,7 @@ Object { @@ -6642,7 +6642,7 @@ Object { /> @@ -6694,7 +6694,7 @@ Object { @@ -6746,7 +6746,7 @@ Object { @@ -7132,7 +7132,7 @@ Object { /> @@ -7184,7 +7184,7 @@ Object { @@ -7236,7 +7236,7 @@ Object { @@ -7556,7 +7556,7 @@ Object { /> @@ -7608,7 +7608,7 @@ Object { @@ -7660,7 +7660,7 @@ Object { 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 df380481e3b28d..265796bdc317f7 100644 --- a/packages/charts/react-charts/library/src/components/HorizontalBarChart/HorizontalBarChart.tsx +++ b/packages/charts/react-charts/library/src/components/HorizontalBarChart/HorizontalBarChart.tsx @@ -419,15 +419,7 @@ export const HorizontalBarChart: React.FunctionComponent segment.trim()) - .filter(Boolean)[0] || 'Series'; - const chartGroupAriaLabel = `${legendVal}, bar ${index + 1} of ${data!.length} with ${ - points!.chartData?.length || 0 - } data points.`; + 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, @@ -453,7 +445,7 @@ export const HorizontalBarChart: React.FunctionComponent { _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 d888e968cf64a0..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,7 @@ exports[`Horizontal bar chart - Screen resolution Should remain unchanged on zoo class="fui-hbc__chart" > @@ -103,7 +103,7 @@ exports[`Horizontal bar chart - Screen resolution Should remain unchanged on zoo class="fui-hbc__chart" > @@ -167,7 +167,7 @@ exports[`Horizontal bar chart - Screen resolution Should remain unchanged on zoo class="fui-hbc__chart" > @@ -244,7 +244,7 @@ exports[`Horizontal bar chart - Screen resolution Should remain unchanged on zoo class="fui-hbc__chart" > @@ -308,7 +308,7 @@ exports[`Horizontal bar chart - Screen resolution Should remain unchanged on zoo class="fui-hbc__chart" > @@ -372,7 +372,7 @@ exports[`Horizontal bar chart - Screen resolution Should remain unchanged on zoo class="fui-hbc__chart" > @@ -453,7 +453,7 @@ exports[`Horizontal bar chart - Theme Should reflect theme change 1`] = ` class="fui-hbc__chart" > @@ -517,7 +517,7 @@ exports[`Horizontal bar chart - Theme Should reflect theme change 1`] = ` class="fui-hbc__chart" > @@ -581,7 +581,7 @@ exports[`Horizontal bar chart - Theme Should reflect theme change 1`] = ` class="fui-hbc__chart" > @@ -671,7 +671,7 @@ exports[`Horizontal bar chart re-rendering Should re-render the Horizontal bar c class="fui-hbc__chart" > @@ -735,7 +735,7 @@ exports[`Horizontal bar chart re-rendering Should re-render the Horizontal bar c class="fui-hbc__chart" > @@ -799,7 +799,7 @@ exports[`Horizontal bar chart re-rendering Should re-render the Horizontal bar c class="fui-hbc__chart" > @@ -869,7 +869,7 @@ exports[`Horizontal bar chart rendering Should render HorizontalBarChart for row class="fui-hbc__chart" > @@ -1015,7 +1015,7 @@ exports[`Horizontal bar chart rendering Should render HorizontalBarChart for row class="fui-hbc__chart" > @@ -1168,7 +1168,7 @@ exports[`Horizontal bar chart rendering Should render the Horizontal bar chart l class="fui-hbc__chart" > @@ -1232,7 +1232,7 @@ exports[`Horizontal bar chart rendering Should render the Horizontal bar chart l class="fui-hbc__chart" > @@ -1296,7 +1296,7 @@ exports[`Horizontal bar chart rendering Should render the Horizontal bar chart l class="fui-hbc__chart" > @@ -1371,7 +1371,7 @@ Object { class="fui-hbc__chart" > @@ -1419,7 +1419,7 @@ Object { class="fui-hbc__chart" > @@ -1467,7 +1467,7 @@ Object { class="fui-hbc__chart" > @@ -1574,7 +1574,7 @@ Object { class="fui-hbc__chart" > @@ -1622,7 +1622,7 @@ Object { class="fui-hbc__chart" > @@ -1670,7 +1670,7 @@ Object { class="fui-hbc__chart" > @@ -1788,7 +1788,7 @@ Object { class="fui-hbc__chart" > @@ -1845,7 +1845,7 @@ Object { class="fui-hbc__chart" > @@ -1902,7 +1902,7 @@ Object { class="fui-hbc__chart" > @@ -2018,7 +2018,7 @@ Object { class="fui-hbc__chart" > @@ -2075,7 +2075,7 @@ Object { class="fui-hbc__chart" > @@ -2132,7 +2132,7 @@ Object { class="fui-hbc__chart" > 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 82c7b92968f020..8b157a3163c680 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 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 + {groupBars} + + ); + }); } return (_bars = allBars); @@ -771,6 +780,11 @@ export const HorizontalBarChartWithAxis: React.FunctionComponent point.x)!, props.xMaxValue || 0); const legendBars: JSXElement = _getLegendData(_points); - const legendVal = _points[0]?.legend || 'Series'; - const chartGroupAriaLabel = `${legendVal}, bar chart with ${_points.length} bars and ${_points.length} data points.`; return ( { return ( <> - - {_bars} - + {_bars} ); }} 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 031e5fa961ff8b..ddda1fe773bb49 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 @@ -328,110 +328,127 @@ exports[`Horizontal bar chart with axis rendering Should render the Horizontal b - - - - - + - 40k - - - + - 25k - - - + - 20k - + + +
@@ -858,114 +875,131 @@ exports[`Horizontal bar chart with axis rendering Should render the Horizontal b - - - - - + - 5k - - - + - 3k - - - + - 2k - + + + @@ -1342,110 +1376,127 @@ Object { - - - - - - - - - + + + + + + + + + + + + + + + + + @@ -1872,110 +1923,127 @@ Object { - - - - - - - + - 25k - - - + - 20k - + + + + + + + @@ -2461,110 +2529,127 @@ Object { - - - - - - - - - + + + + + + + + + + + + + + + + + @@ -2991,110 +3076,127 @@ Object { - - - - - + - 40k - - - + - 25k - - - + - 20k - + + + @@ -3580,135 +3682,152 @@ Object { - + + + + + + + + + + + + + + + + + + + +
+
+
- - - - - - - - - - -
-
-
-
- -
+
+
+
+ +
+
+
+
- - - +
+
+ Product A +
+ +
-
-
-
- -
@@ -6407,62 +6584,79 @@ Object { - - - - - + + + + + + + + + + + + +
@@ -6877,114 +7071,131 @@ Object { - - - - - - - - - + + + + + + + + + + + + + + + + +
@@ -7381,114 +7592,131 @@ Object { - - - - - + - 5k - - - + - 3k - - - + - 2k - + + +
@@ -7920,114 +8148,131 @@ Object { - - - - - - - - - + + + + + + + + + + + + + + + + +
@@ -8395,114 +8640,131 @@ Object { - - - - - + - 5k - - - + - 3k - - - + - 2k - + + +
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 d1ad8a036508f8..6214416573489b 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 @@ -236,13 +236,13 @@ exports[`VegaDeclarativeChart - Bar+Line Combo Rendering Bar + Line Combinations - - - - - - - - - - - - + + + + + + + + + + + + + +
@@ -820,13 +826,13 @@ exports[`VegaDeclarativeChart - Bar+Line Combo Rendering Bar + Line Combinations - - - - - - + + + + + + + +
@@ -1268,13 +1280,13 @@ exports[`VegaDeclarativeChart - Bar+Line Combo Rendering Bar + Line Combinations - - - - - - + + + + + + + +
@@ -1793,13 +1811,13 @@ exports[`VegaDeclarativeChart - Bar+Line Combo Rendering Bar + Line Combinations - - - - - - - - - - - - + + + + + + + + + + + + + + @@ -3505,13 +3535,13 @@ exports[`VegaDeclarativeChart - Issue Fixes Issue 2: Line+Bar Combo (Now Support - - - - + + + + + +
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 63a8aea5a6e372..755d60e929d4a5 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 = ); return ( - <> + {line} {dots} - + ); } @@ -661,7 +661,7 @@ export const VerticalBarChart: React.FunctionComponent = yBarScale(yReferencePoint); const baselineHeight = containerHeight - margins.bottom! - yBarScale(yReferencePoint); return ( - + = return ( = yBarScale(yReferencePoint); const baselineHeight = containerHeight - margins.bottom! - yBarScale(yReferencePoint); return ( - + = 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} data points`; + } + function updatePosition(newX: number, newY: number) { const threshold = 1; // Set a threshold for movement const { x, y } = clickPosition; @@ -1116,8 +1129,6 @@ export const VerticalBarChart: React.FunctionComponent = _yMax = Math.max(d3Max(_points, (point: VerticalBarChartDataPoint) => point.y)!, props.yMaxValue || 0); _yMin = Math.min(d3Min(_points, (point: VerticalBarChartDataPoint) => point.y)!, props.yMinValue || 0); const legendBars: JSXElement = _getLegendData(_points); - const legendVal = _points[0]?.legend || 'Series'; - const chartGroupAriaLabel = `${legendVal}, bar chart with ${_points.length} bars and ${_points.length} data points.`; const calloutProps = { ...(_isHavingLine && { YValueHover: hoveredYValues, @@ -1181,20 +1192,15 @@ export const VerticalBarChart: React.FunctionComponent = children={(props: ChildProps) => { return ( <> - - {_bars} - - {_isHavingLine && ( - - {_createLine( - props.xScale!, - props.yScalePrimary!, - props.containerHeight, - props.containerWidth, - props.yScaleSecondary, - )} - - )} + {_bars} + {_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 421caa40e4c71e..d39c687f7ac35d 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,11 +410,11 @@ exports[`Screen resolution Should remain unchanged on zoom in 1`] = ` - - + + - + - + - - + + - + - + - - + + - + - + - - + + - + - + - - + + - + - + - - + + - + - + - + - - + + - + - + - - + + - + - + - - + + - + - + - - + + - + - + - - + + - + - + - - + + - + - + - - + + - + - + - - + + - + - + - - + + - + - + - - + + - + - + - - + + - + - + - - + + - + - + - - + + - + - + { + 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, ); } - }); - Object.keys(lineObject).forEach((item: string, index: number) => { lineObject[item].forEach((circlePoint: LinePoint, subIndex: number) => { const circleRef: { refElement: SVGCircleElement | null } = { refElement: null }; const yScaleBandwidthTranslate = @@ -663,14 +662,20 @@ export const VerticalStackedBarChart: React.FunctionComponent, ); }); + + lineSeriesGroups.push( + + {borderForLines} + {lines} + {dots} + , + ); }); - return ( - <> - {borderForLines} - {lines} - {dots} - - ); + return <>{lineSeriesGroups}; } function _getCircleOpacityAndRadius( @@ -1145,7 +1150,6 @@ export const VerticalStackedBarChart: React.FunctionComponent _onStackFocus(singleChartData, groupRef), onBlur: _handleMouseOut, onClick: (event: any) => _onClick(singleChartData, event), - role: 'option', tabIndex: !props.hideTooltip ? 0 : undefined, }; let showLabel = false; @@ -1183,6 +1187,8 @@ export const VerticalStackedBarChart: React.FunctionComponent { groupRef.refElement = e; }} + role="listbox" + aria-label={_getAriaLabel(singleChartData)} {...stackFocusProps} > {singleBar} @@ -1363,9 +1369,6 @@ export const VerticalStackedBarChart: React.FunctionComponent { return ( <> - - {_bars} - - + {_bars} + {_isHavingLines && _createLines( props.xScale!, 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 652d8873e4cac8..19183ecfa53547 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 @@ -202,13 +202,13 @@ exports[`Vertical stacked bar chart - Screen resolution Should remain unchanged - - - - - - + + + + + + + +
@@ -748,13 +754,13 @@ exports[`Vertical stacked bar chart - Screen resolution Should remain unchanged - - - - - - + + + + + + + +
@@ -1446,13 +1458,13 @@ exports[`Vertical stacked bar chart rendering Should render the vertical stacked - +
- +
- +
- - - - + + + + + +
@@ -3721,13 +3734,13 @@ exports[`VerticalStackedBarChart snapShot testing Should not render bar labels 1 - +
- +
- +
- +
- +
- +
@@ -6757,13 +6764,13 @@ exports[`VerticalStackedBarChart snapShot testing renders hideTooltip correctly - +
- +
- +
- +
- +