Accessibility fix for empty vertical bar chart

change/@fluentui-react-charting-9fc3fab7-e316-48f3-8b7b-1d07cd7c6853.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Accessibility bug fix",
+  "packageName": "@fluentui/react-charting",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react-charting/src/components/AreaChart/__snapshots__/AreaChart.test.tsx.snap

@@ -1599,6 +1599,7 @@ exports[`AreaChart snapShot testing Should not render circles when optimizeLarge
           >
             <div
               aria-label="Legends"
+              aria-multiselectable={false}
               className=
                   ms-FocusZone
                   &:focus {
@@ -1631,7 +1632,7 @@ exports[`AreaChart snapShot testing Should not render circles when optimizeLarge
                   role="none"
                 >
                   <button
-                    aria-label="metaData1 selected"
+                    aria-label="metaData1"
                     aria-posinset={1}
                     aria-selected={false}
                     aria-setsize={1}

packages/react-charting/src/components/VerticalBarChart/VerticalBarChart.base.tsx

@@ -53,6 +53,7 @@ export interface IVerticalBarChartState extends IBasestate {
   hoverXValue?: string | number | null;
   callOutAccessibilityData?: IAccessibilityProps;
   calloutLegend: string;
+  emptyChart?: boolean;
 }
 
 type ColorScale = (_p?: number) => string;
@@ -90,6 +91,7 @@ export class VerticalBarChartBase extends React.Component<IVerticalBarChartProps
       YValueHover: [],
       hoverXValue: '',
       calloutLegend: '',
+      emptyChart: false,
     };
     this._isHavingLine = this._checkForLine();
     this._calloutId = getId('callout');
@@ -102,6 +104,16 @@ export class VerticalBarChartBase extends React.Component<IVerticalBarChartProps
     this._domainMargin = MIN_DOMAIN_MARGIN;
   }
 
+  public componentDidMount(): void {
+    const isChartEmpty =
+      this.state.emptyChart ||
+      this._points.length === 0 ||
+      (d3Max(this._points, (point: IVerticalBarChartDataPoint) => point.y)! <= 0 && !this._isHavingLine);
+    if (this.state.emptyChart !== isChartEmpty) {
+      this.setState({ emptyChart: isChartEmpty });
+    }
+  }
+
   public render(): JSX.Element {
     this._adjustProps();
     this._xAxisLabels = this._points.map((point: IVerticalBarChartDataPoint) => point.x as string);
@@ -138,7 +150,7 @@ export class VerticalBarChartBase extends React.Component<IVerticalBarChartProps
       tickValues: this.props.tickValues,
       tickFormat: this.props.tickFormat,
     };
-    return (
+    return !this.state.emptyChart ? (
       <CartesianChart
         {...this.props}
         points={this._points}
@@ -171,6 +183,8 @@ export class VerticalBarChartBase extends React.Component<IVerticalBarChartProps
           );
         }}
       />
+    ) : (
+      <div id={getId('_VBC_')} role={'alert'} style={{ opacity: '0' }} aria-label={'Graph has no data to display'} />
     );
   }
 

packages/react-charting/src/components/VerticalBarChart/VerticalBarChart.test.tsx

@@ -233,3 +233,43 @@ describe('VerticalBarChart - mouse events', () => {
     expect(tree).toMatchSnapshot();
   });
 });
+
+describe('Render empty chart aria label div when chart is empty', () => {
+  it('No empty chart aria label div rendered', () => {
+    wrapper = mount(
+      <VerticalBarChart data={chartPoints} calloutProps={{ doNotLayer: true }} enabledLegendsWrapLines />,
+    );
+    const renderedDOM = wrapper.findWhere(node => node.prop('aria-label') === 'Graph has no data to display');
+    expect(renderedDOM!.length).toBe(0);
+  });
+
+  it('Empty chart aria label div rendered', () => {
+    wrapper = mount(<VerticalBarChart data={[]} calloutProps={{ doNotLayer: true }} enabledLegendsWrapLines />);
+    const renderedDOM = wrapper.findWhere(node => node.prop('aria-label') === 'Graph has no data to display');
+    expect(renderedDOM!.length).toBe(1);
+  });
+});
+
+describe('Render empty chart calling with respective to props', () => {
+  it('No prop changes', () => {
+    const renderMock = jest.spyOn(VerticalBarChartBase.prototype, 'render');
+    const props = {
+      data: chartPoints,
+    };
+    const component = mount(<VerticalBarChart {...props} />);
+    component.setProps({ ...props });
+    expect(renderMock).toHaveBeenCalledTimes(2);
+    renderMock.mockRestore();
+  });
+
+  it('Prop changes', () => {
+    const renderMock = jest.spyOn(VerticalBarChartBase.prototype, 'render');
+    const props = {
+      data: [],
+    };
+    const component = mount(<VerticalBarChart {...props} />);
+    component.setProps({ ...props });
+    expect(renderMock).toHaveBeenCalledTimes(3);
+    renderMock.mockRestore();
+  });
+});