From 948b5bf9871303d1742f1b9a17a3bd4006ce2fea Mon Sep 17 00:00:00 2001
From: krkshitij <110246001+krkshitij@users.noreply.github.com>
Date: Mon, 24 Apr 2023 11:44:03 +0530
Subject: [PATCH] Make line chart screen reader accessible (#27632)

* make line chart screen reader accessible

* add change file

* add function
---
 ...-2cf73f57-767c-4339-bfb6-152caf82ad6c.json |  7 ++
 .../components/LineChart/LineChart.base.tsx   | 61 +++++++++++----
 .../__snapshots__/LineChart.test.tsx.snap     | 77 +++++++++++--------
 3 files changed, 97 insertions(+), 48 deletions(-)
 create mode 100644 change/@fluentui-react-charting-2cf73f57-767c-4339-bfb6-152caf82ad6c.json

diff --git a/change/@fluentui-react-charting-2cf73f57-767c-4339-bfb6-152caf82ad6c.json b/change/@fluentui-react-charting-2cf73f57-767c-4339-bfb6-152caf82ad6c.json
new file mode 100644
index 00000000000000..ec5ce7878a6747
--- /dev/null
+++ b/change/@fluentui-react-charting-2cf73f57-767c-4339-bfb6-152caf82ad6c.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Make line chart screen reader accessible",
+  "packageName": "@fluentui/react-charting",
+  "email": "kumarkshitij@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-charting/src/components/LineChart/LineChart.base.tsx b/packages/react-charting/src/components/LineChart/LineChart.base.tsx
index 86a5db5dbcd80a..9d9d55a360231b 100644
--- a/packages/react-charting/src/components/LineChart/LineChart.base.tsx
+++ b/packages/react-charting/src/components/LineChart/LineChart.base.tsx
@@ -568,6 +568,15 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
             onMouseOut={this._handleMouseOut}
             strokeWidth={activePoint === circleId ? DEFAULT_LINE_STROKE_SIZE : 0}
             stroke={activePoint === circleId ? lineColor : ''}
+            role="img"
+            aria-label={this._getAriaLabel(i, 0)}
+            data-is-focusable={true}
+            ref={(e: SVGCircleElement | null) => {
+              this._refCallback(e!, circleId);
+            }}
+            onFocus={() => this._handleFocus(circleId, x1, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData)}
+            onBlur={this._handleMouseOut}
+            {...this._getClickHandler(this._points[i].data[0].onDataPointClick)}
           />,
         );
       }
@@ -576,7 +585,7 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
       const gaps = this._points[i].gaps?.sort((a, b) => a.startIndex - b.startIndex) ?? [];
 
       // Use path rendering technique for larger datasets to optimize performance.
-      if (this.props.optimizeLargeData!) {
+      if (this.props.optimizeLargeData && this._points[i].data.length > 1) {
         const line = d3Line()
           // eslint-disable-next-line @typescript-eslint/no-explicit-any
           .x((d: any) => this._xAxisScale(d[0]))
@@ -634,8 +643,12 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
               onMouseMove={this._onMouseOverLargeDataset.bind(this, i, verticaLineHeight)}
               onMouseOver={this._onMouseOverLargeDataset.bind(this, i, verticaLineHeight)}
               onMouseOut={this._handleMouseOut}
-              onClick={this._onLineClick.bind(this, this._points[i].onLineClick)}
+              {...this._getClickHandler(this._points[i].onLineClick)}
               opacity={1}
+              role="img"
+              aria-label={`${legendVal}, series ${i + 1} of ${this._points.length} with ${
+                this._points[i].data.length
+              } data points.`}
             />,
           );
         } else {
@@ -650,6 +663,10 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
               strokeWidth={strokeWidth}
               strokeLinecap={this._points[i].lineOptions?.strokeLinecap ?? 'round'}
               opacity={0.1}
+              role="img"
+              aria-label={`${legendVal}, series ${i + 1} of ${this._points.length} with ${
+                this._points[i].data.length
+              } data points.`}
             />,
           );
         }
@@ -664,7 +681,6 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
             cx={0}
             cy={0}
             fill={theme!.palette.white}
-            data-is-focusable={true}
             strokeWidth={DEFAULT_LINE_STROKE_SIZE}
             stroke={lineColor}
             visibility={isPointHighlighted ? 'visibility' : 'hidden'}
@@ -673,7 +689,7 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
             onMouseOut={this._handleMouseOut}
           />,
         );
-      } else {
+      } else if (!this.props.optimizeLargeData) {
         for (let j = 1; j < this._points[i].data.length; j++) {
           const gapResult = this._checkInGap(j, gaps, gapIndex);
           const isInGap = gapResult.isInGap;
@@ -726,11 +742,13 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
               onMouseOut={this._handleMouseOut}
               onFocus={() => this._handleFocus(lineId, x1, xAxisCalloutData, circleId, xAxisCalloutAccessibilityData)}
               onBlur={this._handleMouseOut}
-              onClick={this._onDataPointClick.bind(this, this._points[i].data[j - 1].onDataPointClick)}
+              {...this._getClickHandler(this._points[i].data[j - 1].onDataPointClick)}
               opacity={isLegendSelected && !currentPointHidden ? 1 : 0.01}
               fill={this._getPointFill(lineColor, circleId, j, false)}
               stroke={lineColor}
               strokeWidth={strokeWidth}
+              role="img"
+              aria-label={this._getAriaLabel(i, j - 1)}
             />,
           );
           if (j + 1 === this._points[i].data.length) {
@@ -778,11 +796,13 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
                   this._handleFocus(lineId, x2, lastCirlceXCallout, lastCircleId, lastCirlceXCalloutAccessibilityData)
                 }
                 onBlur={this._handleMouseOut}
-                onClick={this._onDataPointClick.bind(this, this._points[i].data[j].onDataPointClick)}
+                {...this._getClickHandler(this._points[i].data[j].onDataPointClick)}
                 opacity={isLegendSelected && !lastPointHidden ? 1 : 0.01}
                 fill={this._getPointFill(lineColor, lastCircleId, j, true)}
                 stroke={lineColor}
                 strokeWidth={strokeWidth}
+                role="img"
+                aria-label={this._getAriaLabel(i, j)}
               />,
             );
             /* eslint-enable react/jsx-no-bind */
@@ -847,7 +867,7 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
                   strokeDasharray={this._points[i].lineOptions?.strokeDasharray}
                   strokeDashoffset={this._points[i].lineOptions?.strokeDashoffset}
                   opacity={1}
-                  onClick={this._onLineClick.bind(this, this._points[i].onLineClick)}
+                  {...this._getClickHandler(this._points[i].onLineClick)}
                 />,
               );
             }
@@ -1103,7 +1123,6 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
 
     if (found) {
       const _this = this;
-      d3Select('#' + circleId).attr('aria-labelledby', `toolTip${this._uniqueCallOutID}`);
       d3Select(`#${this._verticalLine}`)
         .attr('transform', () => `translate(${_this._xAxisScale(x)}, 0)`)
         .attr('visibility', 'visibility');
@@ -1173,16 +1192,18 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
     }
   };
 
-  private _onLineClick = (func: () => void) => {
+  /**
+   * Screen readers announce an element as clickable if the onClick attribute is set.
+   * This function sets the attribute only when a click event handler is provided.
+   */
+  private _getClickHandler = (func?: () => void): { onClick?: () => void } => {
     if (func) {
-      func();
+      return {
+        onClick: func,
+      };
     }
-  };
 
-  private _onDataPointClick = (func: () => void) => {
-    if (func) {
-      func();
-    }
+    return {};
   };
 
   private _handleMouseOut = () => {
@@ -1326,4 +1347,14 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
   private _getColorFillBarOpacity = (colorFillBar: IColorFillBarsProps) => {
     return colorFillBar.applyPattern ? 1 : 0.4;
   };
+
+  private _getAriaLabel = (lineIndex: number, pointIndex: number): string => {
+    const line = this._points[lineIndex];
+    const point = line.data[pointIndex];
+    const formattedDate = point.x instanceof Date ? point.x.toLocaleString() : point.x;
+    const xValue = point.xAxisCalloutData || formattedDate;
+    const legend = line.legend;
+    const yValue = point.yAxisCalloutData || point.y;
+    return point.callOutAccessibilityData?.ariaLabel || `${xValue}. ${legend}, ${yValue}.`;
+  };
 }
diff --git a/packages/react-charting/src/components/LineChart/__snapshots__/LineChart.test.tsx.snap b/packages/react-charting/src/components/LineChart/__snapshots__/LineChart.test.tsx.snap
index 80ca284639e148..4afb2190e3cc48 100644
--- a/packages/react-charting/src/components/LineChart/__snapshots__/LineChart.test.tsx.snap
+++ b/packages/react-charting/src/components/LineChart/__snapshots__/LineChart.test.tsx.snap
@@ -113,7 +113,6 @@ exports[`LineChart - mouse events Should render callout correctly on mouseover 1
           <line
             id="lineID1_0_1"
             key="lineID1_0_1"
-            onClick={[Function]}
             onMouseMove={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -127,6 +126,7 @@ exports[`LineChart - mouse events Should render callout correctly on mouseover 1
             y2={20}
           />
           <path
+            aria-label="20. metaData1, 50."
             d="M34.5 -0.625
      A5.5 5.5 0 1 0 45.5 -0.625
      M34.5 -0.625
@@ -137,16 +137,17 @@ exports[`LineChart - mouse events Should render callout correctly on mouseover 1
             id="circle0_0_1"
             key="circle0_0_1"
             onBlur={[Function]}
-            onClick={[Function]}
             onFocus={[Function]}
             onMouseMove={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
             opacity={1}
+            role="img"
             stroke="red"
             strokeWidth={4}
           />
           <path
+            aria-label="40. metaData1, 80."
             d="M-20.5 20
      A0.5 0.5 0 1 0 -19.5 20
      M-20.5 20
@@ -157,12 +158,12 @@ exports[`LineChart - mouse events Should render callout correctly on mouseover 1
             id="circle0_0_11L"
             key="circle0_0_11L"
             onBlur={[Function]}
-            onClick={[Function]}
             onFocus={[Function]}
             onMouseMove={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
             opacity={1}
+            role="img"
             stroke="red"
             strokeWidth={4}
           />
@@ -633,7 +634,6 @@ exports[`LineChart - mouse events Should render customized callout on mouseover
           <line
             id="lineID1_0_1"
             key="lineID1_0_1"
-            onClick={[Function]}
             onMouseMove={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -647,6 +647,7 @@ exports[`LineChart - mouse events Should render customized callout on mouseover
             y2={20}
           />
           <path
+            aria-label="20. metaData1, 50."
             d="M34.5 -0.625
      A5.5 5.5 0 1 0 45.5 -0.625
      M34.5 -0.625
@@ -657,16 +658,17 @@ exports[`LineChart - mouse events Should render customized callout on mouseover
             id="circle0_0_1"
             key="circle0_0_1"
             onBlur={[Function]}
-            onClick={[Function]}
             onFocus={[Function]}
             onMouseMove={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
             opacity={1}
+            role="img"
             stroke="red"
             strokeWidth={4}
           />
           <path
+            aria-label="40. metaData1, 80."
             d="M-20.5 20
      A0.5 0.5 0 1 0 -19.5 20
      M-20.5 20
@@ -677,12 +679,12 @@ exports[`LineChart - mouse events Should render customized callout on mouseover
             id="circle0_0_11L"
             key="circle0_0_11L"
             onBlur={[Function]}
-            onClick={[Function]}
             onFocus={[Function]}
             onMouseMove={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
             opacity={1}
+            role="img"
             stroke="red"
             strokeWidth={4}
           />
@@ -1051,7 +1053,6 @@ exports[`LineChart - mouse events Should render customized callout per stack on
           <line
             id="lineID1_0_1"
             key="lineID1_0_1"
-            onClick={[Function]}
             onMouseMove={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -1065,6 +1066,7 @@ exports[`LineChart - mouse events Should render customized callout per stack on
             y2={20}
           />
           <path
+            aria-label="20. metaData1, 50."
             d="M34.5 -0.625
      A5.5 5.5 0 1 0 45.5 -0.625
      M34.5 -0.625
@@ -1075,16 +1077,17 @@ exports[`LineChart - mouse events Should render customized callout per stack on
             id="circle0_0_1"
             key="circle0_0_1"
             onBlur={[Function]}
-            onClick={[Function]}
             onFocus={[Function]}
             onMouseMove={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
             opacity={1}
+            role="img"
             stroke="red"
             strokeWidth={4}
           />
           <path
+            aria-label="40. metaData1, 80."
             d="M-20.5 20
      A0.5 0.5 0 1 0 -19.5 20
      M-20.5 20
@@ -1095,12 +1098,12 @@ exports[`LineChart - mouse events Should render customized callout per stack on
             id="circle0_0_11L"
             key="circle0_0_11L"
             onBlur={[Function]}
-            onClick={[Function]}
             onFocus={[Function]}
             onMouseMove={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
             opacity={1}
+            role="img"
             stroke="red"
             strokeWidth={4}
           />
@@ -1468,7 +1471,6 @@ exports[`LineChart snapShot testing Should render with default colors when line
         <g>
           <line
             id="lineID77_0_1"
-            onClick={[Function]}
             onMouseMove={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -1482,6 +1484,7 @@ exports[`LineChart snapShot testing Should render with default colors when line
             y2={20}
           />
           <path
+            aria-label="20. metaData1, 50."
             d="M39.5 -0.625
      A0.5 0.5 0 1 0 40.5 -0.625
      M39.5 -0.625
@@ -1491,16 +1494,17 @@ exports[`LineChart snapShot testing Should render with default colors when line
             fill="#637cef"
             id="circle76_0_1"
             onBlur={[Function]}
-            onClick={[Function]}
             onFocus={[Function]}
             onMouseMove={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
             opacity={1}
+            role="img"
             stroke="#637cef"
             strokeWidth={4}
           />
           <path
+            aria-label="40. metaData1, 80."
             d="M-20.5 20
      A0.5 0.5 0 1 0 -19.5 20
      M-20.5 20
@@ -1510,12 +1514,12 @@ exports[`LineChart snapShot testing Should render with default colors when line
             fill="#637cef"
             id="circle76_0_11L"
             onBlur={[Function]}
-            onClick={[Function]}
             onFocus={[Function]}
             onMouseMove={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
             opacity={1}
+            role="img"
             stroke="#637cef"
             strokeWidth={4}
           />
@@ -1801,7 +1805,6 @@ exports[`LineChart snapShot testing renders LineChart correctly 1`] = `
         <g>
           <line
             id="lineID1_0_1"
-            onClick={[Function]}
             onMouseMove={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -1815,6 +1818,7 @@ exports[`LineChart snapShot testing renders LineChart correctly 1`] = `
             y2={20}
           />
           <path
+            aria-label="20. metaData1, 50."
             d="M39.5 -0.625
      A0.5 0.5 0 1 0 40.5 -0.625
      M39.5 -0.625
@@ -1824,16 +1828,17 @@ exports[`LineChart snapShot testing renders LineChart correctly 1`] = `
             fill="red"
             id="circle0_0_1"
             onBlur={[Function]}
-            onClick={[Function]}
             onFocus={[Function]}
             onMouseMove={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
             opacity={1}
+            role="img"
             stroke="red"
             strokeWidth={4}
           />
           <path
+            aria-label="40. metaData1, 80."
             d="M-20.5 20
      A0.5 0.5 0 1 0 -19.5 20
      M-20.5 20
@@ -1843,12 +1848,12 @@ exports[`LineChart snapShot testing renders LineChart correctly 1`] = `
             fill="red"
             id="circle0_0_11L"
             onBlur={[Function]}
-            onClick={[Function]}
             onFocus={[Function]}
             onMouseMove={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
             opacity={1}
+            role="img"
             stroke="red"
             strokeWidth={4}
           />
@@ -2134,7 +2139,6 @@ exports[`LineChart snapShot testing renders enabledLegendsWrapLines correctly 1`
         <g>
           <line
             id="lineID33_0_1"
-            onClick={[Function]}
             onMouseMove={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -2148,6 +2152,7 @@ exports[`LineChart snapShot testing renders enabledLegendsWrapLines correctly 1`
             y2={20}
           />
           <path
+            aria-label="20. metaData1, 50."
             d="M39.5 -0.625
      A0.5 0.5 0 1 0 40.5 -0.625
      M39.5 -0.625
@@ -2157,16 +2162,17 @@ exports[`LineChart snapShot testing renders enabledLegendsWrapLines correctly 1`
             fill="red"
             id="circle32_0_1"
             onBlur={[Function]}
-            onClick={[Function]}
             onFocus={[Function]}
             onMouseMove={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
             opacity={1}
+            role="img"
             stroke="red"
             strokeWidth={4}
           />
           <path
+            aria-label="40. metaData1, 80."
             d="M-20.5 20
      A0.5 0.5 0 1 0 -19.5 20
      M-20.5 20
@@ -2176,12 +2182,12 @@ exports[`LineChart snapShot testing renders enabledLegendsWrapLines correctly 1`
             fill="red"
             id="circle32_0_11L"
             onBlur={[Function]}
-            onClick={[Function]}
             onFocus={[Function]}
             onMouseMove={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
             opacity={1}
+            role="img"
             stroke="red"
             strokeWidth={4}
           />
@@ -2447,7 +2453,6 @@ exports[`LineChart snapShot testing renders hideLegend correctly 1`] = `
         <g>
           <line
             id="lineID12_0_1"
-            onClick={[Function]}
             onMouseMove={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -2461,6 +2466,7 @@ exports[`LineChart snapShot testing renders hideLegend correctly 1`] = `
             y2={20}
           />
           <path
+            aria-label="20. metaData1, 50."
             d="M39.5 -0.625
      A0.5 0.5 0 1 0 40.5 -0.625
      M39.5 -0.625
@@ -2470,16 +2476,17 @@ exports[`LineChart snapShot testing renders hideLegend correctly 1`] = `
             fill="red"
             id="circle11_0_1"
             onBlur={[Function]}
-            onClick={[Function]}
             onFocus={[Function]}
             onMouseMove={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
             opacity={1}
+            role="img"
             stroke="red"
             strokeWidth={4}
           />
           <path
+            aria-label="40. metaData1, 80."
             d="M-20.5 20
      A0.5 0.5 0 1 0 -19.5 20
      M-20.5 20
@@ -2489,12 +2496,12 @@ exports[`LineChart snapShot testing renders hideLegend correctly 1`] = `
             fill="red"
             id="circle11_0_11L"
             onBlur={[Function]}
-            onClick={[Function]}
             onFocus={[Function]}
             onMouseMove={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
             opacity={1}
+            role="img"
             stroke="red"
             strokeWidth={4}
           />
@@ -2620,7 +2627,6 @@ exports[`LineChart snapShot testing renders hideTooltip correctly 1`] = `
         <g>
           <line
             id="lineID22_0_1"
-            onClick={[Function]}
             onMouseMove={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -2634,6 +2640,7 @@ exports[`LineChart snapShot testing renders hideTooltip correctly 1`] = `
             y2={20}
           />
           <path
+            aria-label="20. metaData1, 50."
             d="M39.5 -0.625
      A0.5 0.5 0 1 0 40.5 -0.625
      M39.5 -0.625
@@ -2643,16 +2650,17 @@ exports[`LineChart snapShot testing renders hideTooltip correctly 1`] = `
             fill="red"
             id="circle21_0_1"
             onBlur={[Function]}
-            onClick={[Function]}
             onFocus={[Function]}
             onMouseMove={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
             opacity={1}
+            role="img"
             stroke="red"
             strokeWidth={4}
           />
           <path
+            aria-label="40. metaData1, 80."
             d="M-20.5 20
      A0.5 0.5 0 1 0 -19.5 20
      M-20.5 20
@@ -2662,12 +2670,12 @@ exports[`LineChart snapShot testing renders hideTooltip correctly 1`] = `
             fill="red"
             id="circle21_0_11L"
             onBlur={[Function]}
-            onClick={[Function]}
             onFocus={[Function]}
             onMouseMove={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
             opacity={1}
+            role="img"
             stroke="red"
             strokeWidth={4}
           />
@@ -2953,7 +2961,6 @@ exports[`LineChart snapShot testing renders showXAxisLablesTooltip correctly 1`]
         <g>
           <line
             id="lineID44_0_1"
-            onClick={[Function]}
             onMouseMove={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -2967,6 +2974,7 @@ exports[`LineChart snapShot testing renders showXAxisLablesTooltip correctly 1`]
             y2={20}
           />
           <path
+            aria-label="20. metaData1, 50."
             d="M39.5 -0.625
      A0.5 0.5 0 1 0 40.5 -0.625
      M39.5 -0.625
@@ -2976,16 +2984,17 @@ exports[`LineChart snapShot testing renders showXAxisLablesTooltip correctly 1`]
             fill="red"
             id="circle43_0_1"
             onBlur={[Function]}
-            onClick={[Function]}
             onFocus={[Function]}
             onMouseMove={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
             opacity={1}
+            role="img"
             stroke="red"
             strokeWidth={4}
           />
           <path
+            aria-label="40. metaData1, 80."
             d="M-20.5 20
      A0.5 0.5 0 1 0 -19.5 20
      M-20.5 20
@@ -2995,12 +3004,12 @@ exports[`LineChart snapShot testing renders showXAxisLablesTooltip correctly 1`]
             fill="red"
             id="circle43_0_11L"
             onBlur={[Function]}
-            onClick={[Function]}
             onFocus={[Function]}
             onMouseMove={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
             opacity={1}
+            role="img"
             stroke="red"
             strokeWidth={4}
           />
@@ -3286,7 +3295,6 @@ exports[`LineChart snapShot testing renders wrapXAxisLables correctly 1`] = `
         <g>
           <line
             id="lineID55_0_1"
-            onClick={[Function]}
             onMouseMove={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -3300,6 +3308,7 @@ exports[`LineChart snapShot testing renders wrapXAxisLables correctly 1`] = `
             y2={20}
           />
           <path
+            aria-label="20. metaData1, 50."
             d="M39.5 -0.625
      A0.5 0.5 0 1 0 40.5 -0.625
      M39.5 -0.625
@@ -3309,16 +3318,17 @@ exports[`LineChart snapShot testing renders wrapXAxisLables correctly 1`] = `
             fill="red"
             id="circle54_0_1"
             onBlur={[Function]}
-            onClick={[Function]}
             onFocus={[Function]}
             onMouseMove={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
             opacity={1}
+            role="img"
             stroke="red"
             strokeWidth={4}
           />
           <path
+            aria-label="40. metaData1, 80."
             d="M-20.5 20
      A0.5 0.5 0 1 0 -19.5 20
      M-20.5 20
@@ -3328,12 +3338,12 @@ exports[`LineChart snapShot testing renders wrapXAxisLables correctly 1`] = `
             fill="red"
             id="circle54_0_11L"
             onBlur={[Function]}
-            onClick={[Function]}
             onFocus={[Function]}
             onMouseMove={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
             opacity={1}
+            role="img"
             stroke="red"
             strokeWidth={4}
           />
@@ -3619,7 +3629,6 @@ exports[`LineChart snapShot testing renders yAxisTickFormat correctly 1`] = `
         <g>
           <line
             id="lineID66_0_1"
-            onClick={[Function]}
             onMouseMove={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
@@ -3633,6 +3642,7 @@ exports[`LineChart snapShot testing renders yAxisTickFormat correctly 1`] = `
             y2={20}
           />
           <path
+            aria-label="20. metaData1, 50."
             d="M39.5 -0.625
      A0.5 0.5 0 1 0 40.5 -0.625
      M39.5 -0.625
@@ -3642,16 +3652,17 @@ exports[`LineChart snapShot testing renders yAxisTickFormat correctly 1`] = `
             fill="red"
             id="circle65_0_1"
             onBlur={[Function]}
-            onClick={[Function]}
             onFocus={[Function]}
             onMouseMove={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
             opacity={1}
+            role="img"
             stroke="red"
             strokeWidth={4}
           />
           <path
+            aria-label="40. metaData1, 80."
             d="M-20.5 20
      A0.5 0.5 0 1 0 -19.5 20
      M-20.5 20
@@ -3661,12 +3672,12 @@ exports[`LineChart snapShot testing renders yAxisTickFormat correctly 1`] = `
             fill="red"
             id="circle65_0_11L"
             onBlur={[Function]}
-            onClick={[Function]}
             onFocus={[Function]}
             onMouseMove={[Function]}
             onMouseOut={[Function]}
             onMouseOver={[Function]}
             opacity={1}
+            role="img"
             stroke="red"
             strokeWidth={4}
           />