From 39b497817d4a4909c205aedaaad9885173666b8d Mon Sep 17 00:00:00 2001
From: krkshitij <110246001+krkshitij@users.noreply.github.com>
Date: Fri, 27 Jan 2023 20:25:35 +0530
Subject: [PATCH] Fix duplicate-id accessibility issue in line chart (#26486)

* fix duplicate-id accessibility issue in line chart

* add change file
---
 ...-2f20f310-a538-4c9b-b93c-be8158fe1c65.json |  7 ++
 .../components/LineChart/LineChart.base.tsx   | 22 ++---
 .../__snapshots__/LineChart.test.tsx.snap     | 84 +++++++++----------
 3 files changed, 60 insertions(+), 53 deletions(-)
 create mode 100644 change/@fluentui-react-charting-2f20f310-a538-4c9b-b93c-be8158fe1c65.json

diff --git a/change/@fluentui-react-charting-2f20f310-a538-4c9b-b93c-be8158fe1c65.json b/change/@fluentui-react-charting-2f20f310-a538-4c9b-b93c-be8158fe1c65.json
new file mode 100644
index 00000000000000..9c394b8df7e91c
--- /dev/null
+++ b/change/@fluentui-react-charting-2f20f310-a538-4c9b-b93c-be8158fe1c65.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Fix duplicate-id accessibility issue in line chart",
+  "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 286b5746669600..1c93e3b9bd92fd 100644
--- a/packages/react-charting/src/components/LineChart/LineChart.base.tsx
+++ b/packages/react-charting/src/components/LineChart/LineChart.base.tsx
@@ -523,11 +523,11 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
       const verticaLineHeight = containerHeight - this.margins.bottom! + 6;
       if (this._points[i].data.length === 1) {
         const { x: x1, y: y1, xAxisCalloutData, xAxisCalloutAccessibilityData } = this._points[i].data[0];
-        const circleId = `${this._circleId}${i}`;
+        const circleId = `${this._circleId}_${i}`;
         pointsForLine.push(
           <circle
-            id={`${this._circleId}${i}`}
-            key={`${this._circleId}${i}`}
+            id={circleId}
+            key={circleId}
             r={activePoint === circleId ? 5.5 : 3.5}
             cx={this._xAxisScale(x1)}
             cy={this._yAxisScale(y1)}
@@ -569,8 +569,8 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
           .y((d: any) => this._yAxisScale(d[1]))
           .curve(d3curveLinear);
 
-        const lineId = `${this._lineId}${i}`;
-        const borderId = `${this._borderId}${i}`;
+        const lineId = `${this._lineId}_${i}`;
+        const borderId = `${this._borderId}_${i}`;
         const strokeWidth =
           this._points[i].lineOptions?.strokeWidth || this.props.strokeWidth || DEFAULT_LINE_STROKE_SIZE;
 
@@ -664,9 +664,9 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
           const isInGap = gapResult.isInGap;
           gapIndex = gapResult.gapIndex;
 
-          const lineId = `${this._lineId}${i}${j}`;
-          const borderId = `${this._borderId}${i}${j}`;
-          const circleId = `${this._circleId}${i}${j}`;
+          const lineId = `${this._lineId}_${i}_${j}`;
+          const borderId = `${this._borderId}_${i}_${j}`;
+          const circleId = `${this._circleId}_${i}_${j}`;
           const { x: x1, y: y1, xAxisCalloutData, xAxisCalloutAccessibilityData } = this._points[i].data[j - 1];
           const { x: x2, y: y2 } = this._points[i].data[j];
           let path = this._getPath(
@@ -916,7 +916,7 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
             : 0.1;
         colorFillBars.push(
           <rect
-            fill={colorFillBar.applyPattern ? `url(#${this._colorFillBarPatternId}${i})` : colorFillBar.color}
+            fill={colorFillBar.applyPattern ? `url(#${this._colorFillBarPatternId}_${i})` : colorFillBar.color}
             fillOpacity={opacity}
             x={this._xAxisScale(startX)}
             y={this._yAxisScale(yMinMaxValues.endValue) - FILL_Y_PADDING}
@@ -938,10 +938,10 @@ export class LineChartBase extends React.Component<ILineChartProps, ILineChartSt
     const stripePath = 'M-4,4 l8,-8 M0,16 l16,-16 M12,20 l8,-8';
     return (
       <pattern
-        id={`${this._colorFillBarPatternId}${id}`}
+        id={`${this._colorFillBarPatternId}_${id}`}
         width={16}
         height={16}
-        key={`${this._colorFillBarPatternId}${id}`}
+        key={`${this._colorFillBarPatternId}_${id}`}
         patternUnits={'userSpaceOnUse'}
       >
         <path d={stripePath} stroke={color} strokeWidth={1.25} />
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 db3e2e223ec4bf..13f54797d71c2a 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
@@ -111,8 +111,8 @@ exports[`LineChart - mouse events Should render callout correctly on mouseover 1
         />
         <g>
           <line
-            id="lineID101"
-            key="lineID101"
+            id="lineID1_0_1"
+            key="lineID1_0_1"
             onClick={[Function]}
             onMouseMove={[Function]}
             onMouseOut={[Function]}
@@ -134,8 +134,8 @@ exports[`LineChart - mouse events Should render callout correctly on mouseover 1
      "
             data-is-focusable={true}
             fill="#ffffff"
-            id="circle001"
-            key="circle001"
+            id="circle0_0_1"
+            key="circle0_0_1"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -154,8 +154,8 @@ exports[`LineChart - mouse events Should render callout correctly on mouseover 1
      "
             data-is-focusable={true}
             fill="red"
-            id="circle0011L"
-            key="circle0011L"
+            id="circle0_0_11L"
+            key="circle0_0_11L"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -364,7 +364,7 @@ exports[`LineChart - mouse events Should render callout correctly on mouseover 1
           }
       data-is-focusable={true}
       hidden={false}
-      id="toolTipcircle001"
+      id="toolTipcircle0_0_1"
       style={
         Object {
           "filter": "opacity(0)",
@@ -630,8 +630,8 @@ exports[`LineChart - mouse events Should render customized callout on mouseover
         />
         <g>
           <line
-            id="lineID101"
-            key="lineID101"
+            id="lineID1_0_1"
+            key="lineID1_0_1"
             onClick={[Function]}
             onMouseMove={[Function]}
             onMouseOut={[Function]}
@@ -653,8 +653,8 @@ exports[`LineChart - mouse events Should render customized callout on mouseover
      "
             data-is-focusable={true}
             fill="#ffffff"
-            id="circle001"
-            key="circle001"
+            id="circle0_0_1"
+            key="circle0_0_1"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -673,8 +673,8 @@ exports[`LineChart - mouse events Should render customized callout on mouseover
      "
             data-is-focusable={true}
             fill="red"
-            id="circle0011L"
-            key="circle0011L"
+            id="circle0_0_11L"
+            key="circle0_0_11L"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -883,7 +883,7 @@ exports[`LineChart - mouse events Should render customized callout on mouseover
           }
       data-is-focusable={true}
       hidden={false}
-      id="toolTipcircle001"
+      id="toolTipcircle0_0_1"
       style={
         Object {
           "filter": "opacity(0)",
@@ -1047,8 +1047,8 @@ exports[`LineChart - mouse events Should render customized callout per stack on
         />
         <g>
           <line
-            id="lineID101"
-            key="lineID101"
+            id="lineID1_0_1"
+            key="lineID1_0_1"
             onClick={[Function]}
             onMouseMove={[Function]}
             onMouseOut={[Function]}
@@ -1070,8 +1070,8 @@ exports[`LineChart - mouse events Should render customized callout per stack on
      "
             data-is-focusable={true}
             fill="#ffffff"
-            id="circle001"
-            key="circle001"
+            id="circle0_0_1"
+            key="circle0_0_1"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -1090,8 +1090,8 @@ exports[`LineChart - mouse events Should render customized callout per stack on
      "
             data-is-focusable={true}
             fill="red"
-            id="circle0011L"
-            key="circle0011L"
+            id="circle0_0_11L"
+            key="circle0_0_11L"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -1300,7 +1300,7 @@ exports[`LineChart - mouse events Should render customized callout per stack on
           }
       data-is-focusable={true}
       hidden={false}
-      id="toolTipcircle001"
+      id="toolTipcircle0_0_1"
       style={
         Object {
           "filter": "opacity(0)",
@@ -1464,7 +1464,7 @@ exports[`LineChart snapShot testing renders LineChart correctly 1`] = `
         />
         <g>
           <line
-            id="lineID101"
+            id="lineID1_0_1"
             onClick={[Function]}
             onMouseMove={[Function]}
             onMouseOut={[Function]}
@@ -1486,7 +1486,7 @@ exports[`LineChart snapShot testing renders LineChart correctly 1`] = `
      "
             data-is-focusable={true}
             fill="red"
-            id="circle001"
+            id="circle0_0_1"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -1505,7 +1505,7 @@ exports[`LineChart snapShot testing renders LineChart correctly 1`] = `
      "
             data-is-focusable={true}
             fill="red"
-            id="circle0011L"
+            id="circle0_0_11L"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -1796,7 +1796,7 @@ exports[`LineChart snapShot testing renders enabledLegendsWrapLines correctly 1`
         />
         <g>
           <line
-            id="lineID3301"
+            id="lineID33_0_1"
             onClick={[Function]}
             onMouseMove={[Function]}
             onMouseOut={[Function]}
@@ -1818,7 +1818,7 @@ exports[`LineChart snapShot testing renders enabledLegendsWrapLines correctly 1`
      "
             data-is-focusable={true}
             fill="red"
-            id="circle3201"
+            id="circle32_0_1"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -1837,7 +1837,7 @@ exports[`LineChart snapShot testing renders enabledLegendsWrapLines correctly 1`
      "
             data-is-focusable={true}
             fill="red"
-            id="circle32011L"
+            id="circle32_0_11L"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -2108,7 +2108,7 @@ exports[`LineChart snapShot testing renders hideLegend correctly 1`] = `
         />
         <g>
           <line
-            id="lineID1201"
+            id="lineID12_0_1"
             onClick={[Function]}
             onMouseMove={[Function]}
             onMouseOut={[Function]}
@@ -2130,7 +2130,7 @@ exports[`LineChart snapShot testing renders hideLegend correctly 1`] = `
      "
             data-is-focusable={true}
             fill="red"
-            id="circle1101"
+            id="circle11_0_1"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -2149,7 +2149,7 @@ exports[`LineChart snapShot testing renders hideLegend correctly 1`] = `
      "
             data-is-focusable={true}
             fill="red"
-            id="circle11011L"
+            id="circle11_0_11L"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -2281,7 +2281,7 @@ exports[`LineChart snapShot testing renders hideTooltip correctly 1`] = `
         />
         <g>
           <line
-            id="lineID2201"
+            id="lineID22_0_1"
             onClick={[Function]}
             onMouseMove={[Function]}
             onMouseOut={[Function]}
@@ -2303,7 +2303,7 @@ exports[`LineChart snapShot testing renders hideTooltip correctly 1`] = `
      "
             data-is-focusable={true}
             fill="red"
-            id="circle2101"
+            id="circle21_0_1"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -2322,7 +2322,7 @@ exports[`LineChart snapShot testing renders hideTooltip correctly 1`] = `
      "
             data-is-focusable={true}
             fill="red"
-            id="circle21011L"
+            id="circle21_0_11L"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -2613,7 +2613,7 @@ exports[`LineChart snapShot testing renders showXAxisLablesTooltip correctly 1`]
         />
         <g>
           <line
-            id="lineID4401"
+            id="lineID44_0_1"
             onClick={[Function]}
             onMouseMove={[Function]}
             onMouseOut={[Function]}
@@ -2635,7 +2635,7 @@ exports[`LineChart snapShot testing renders showXAxisLablesTooltip correctly 1`]
      "
             data-is-focusable={true}
             fill="red"
-            id="circle4301"
+            id="circle43_0_1"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -2654,7 +2654,7 @@ exports[`LineChart snapShot testing renders showXAxisLablesTooltip correctly 1`]
      "
             data-is-focusable={true}
             fill="red"
-            id="circle43011L"
+            id="circle43_0_11L"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -2945,7 +2945,7 @@ exports[`LineChart snapShot testing renders wrapXAxisLables correctly 1`] = `
         />
         <g>
           <line
-            id="lineID5501"
+            id="lineID55_0_1"
             onClick={[Function]}
             onMouseMove={[Function]}
             onMouseOut={[Function]}
@@ -2967,7 +2967,7 @@ exports[`LineChart snapShot testing renders wrapXAxisLables correctly 1`] = `
      "
             data-is-focusable={true}
             fill="red"
-            id="circle5401"
+            id="circle54_0_1"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -2986,7 +2986,7 @@ exports[`LineChart snapShot testing renders wrapXAxisLables correctly 1`] = `
      "
             data-is-focusable={true}
             fill="red"
-            id="circle54011L"
+            id="circle54_0_11L"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -3277,7 +3277,7 @@ exports[`LineChart snapShot testing renders yAxisTickFormat correctly 1`] = `
         />
         <g>
           <line
-            id="lineID6601"
+            id="lineID66_0_1"
             onClick={[Function]}
             onMouseMove={[Function]}
             onMouseOut={[Function]}
@@ -3299,7 +3299,7 @@ exports[`LineChart snapShot testing renders yAxisTickFormat correctly 1`] = `
      "
             data-is-focusable={true}
             fill="red"
-            id="circle6501"
+            id="circle65_0_1"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}
@@ -3318,7 +3318,7 @@ exports[`LineChart snapShot testing renders yAxisTickFormat correctly 1`] = `
      "
             data-is-focusable={true}
             fill="red"
-            id="circle65011L"
+            id="circle65_0_11L"
             onBlur={[Function]}
             onClick={[Function]}
             onFocus={[Function]}