Fix wrong screen reader output for Sparkline Chart example (microsoft…

…#30952)
Shubhabrata08 · Apr 17, 2024 · 8d4bd64 · 8d4bd64
1 parent 45fb4d4
commit 8d4bd64
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 6 deletions.
diff --git a/change/@fluentui-react-charting-61811db0-2341-482a-90db-5d55391aa75e.json b/change/@fluentui-react-charting-61811db0-2341-482a-90db-5d55391aa75e.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Fix wrong aria label placement in SparklineChart",
+  "packageName": "@fluentui/react-charting",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-charting/src/components/Sparkline/Sparkline.base.tsx b/packages/react-charting/src/components/Sparkline/Sparkline.base.tsx
@@ -101,7 +101,7 @@ export class SparklineBase extends React.Component<ISparklineProps, ISparklineSt
           fillOpacity={0.2}
           fill={this.props.data!.lineChartData![0].color!}
           role="img"
-          aria-label={`Sparkline with label ${this.props.data!.lineChartData![0].legend!}`}
+          aria-hidden
         />
       </>
     );
@@ -119,7 +119,12 @@ export class SparklineBase extends React.Component<ISparklineProps, ISparklineSt
       >
         <div className={classNames.inlineBlock}>
           {this.state._width >= 50 && this.state._height >= 16 ? (
-            <svg width={this.state._width} height={this.state._height} data-is-focusable={true}>
+            <svg
+              width={this.state._width}
+              height={this.state._height}
+              data-is-focusable={true}
+              aria-label={`Sparkline with label ${this.props.data!.lineChartData![0].legend!}`}
+            >
               {this.state._points ? this.drawSparkline() : null}
             </svg>
           ) : (

diff --git a/packages/react-charting/src/components/Sparkline/__snapshots__/Sparkline.test.tsx.snap b/packages/react-charting/src/components/Sparkline/__snapshots__/Sparkline.test.tsx.snap
@@ -24,6 +24,7 @@ exports[`Sparkline snapShot testing renders Sparkline correctly 1`] = `
         }
   >
     <svg
+      aria-label="Sparkline with label 19.64"
       data-is-focusable={true}
       height={20}
       width={80}
@@ -37,7 +38,7 @@ exports[`Sparkline snapShot testing renders Sparkline correctly 1`] = `
         strokeWidth={2}
       />
       <path
-        aria-label="Sparkline with label 19.64"
+        aria-hidden={true}
         className="area"
         d="M0,12.578L11.429,2L22.857,17.446L34.286,8.547L45.714,7.36L57.143,18.304L68.571,16.001L80,18.696L80,20L68.571,20L57.143,20L45.714,20L34.286,20L22.857,20L11.429,20L0,20Z"
         fill="#00AA00"
@@ -99,6 +100,7 @@ exports[`Sparkline snapShot testing renders Sparkline correctly with no legend 1
         }
   >
     <svg
+      aria-label="Sparkline with label 131.33"
       data-is-focusable={true}
       height={20}
       width={80}
@@ -112,7 +114,7 @@ exports[`Sparkline snapShot testing renders Sparkline correctly with no legend 1
         strokeWidth={2}
       />
       <path
-        aria-label="Sparkline with label 131.33"
+        aria-hidden={true}
         className="area"
         d="M0,14.155L16,5.757L32,7.96L48,2L64,16.187L80,10.079L80,20L64,20L48,20L32,20L16,20L0,20Z"
         fill="#E60000"

diff --git a/packages/react-charting/src/components/Sparkline/__snapshots__/SparklineRTL.test.tsx.snap b/packages/react-charting/src/components/Sparkline/__snapshots__/SparklineRTL.test.tsx.snap
@@ -33,6 +33,7 @@ exports[`Sparkline chart rendering Should re-render the Sparkline chart with dat
           }
     >
       <svg
+        aria-label="Sparkline with label 19.64"
         data-is-focusable="true"
         height="20"
         tabindex="0"
@@ -67,6 +68,7 @@ exports[`Sparkline snapShot testing renders Sparkline correctly 1`] = `
         }
   >
     <svg
+      aria-label="Sparkline with label 19.64"
       data-is-focusable={true}
       height={20}
       width={80}
@@ -80,7 +82,7 @@ exports[`Sparkline snapShot testing renders Sparkline correctly 1`] = `
         strokeWidth={2}
       />
       <path
-        aria-label="Sparkline with label 19.64"
+        aria-hidden={true}
         className="area"
         d="M0,12.578L11.429,2L22.857,17.446L34.286,8.547L45.714,7.36L57.143,18.304L68.571,16.001L80,18.696L80,20L68.571,20L57.143,20L45.714,20L34.286,20L22.857,20L11.429,20L0,20Z"
         fill="#00AA00"
@@ -142,6 +144,7 @@ exports[`Sparkline snapShot testing renders Sparkline correctly with no legend 1
         }
   >
     <svg
+      aria-label="Sparkline with label 131.33"
       data-is-focusable={true}
       height={20}
       width={80}
@@ -155,7 +158,7 @@ exports[`Sparkline snapShot testing renders Sparkline correctly with no legend 1
         strokeWidth={2}
       />
       <path
-        aria-label="Sparkline with label 131.33"
+        aria-hidden={true}
         className="area"
         d="M0,14.155L16,5.757L32,7.96L48,2L64,16.187L80,10.079L80,20L64,20L48,20L32,20L16,20L0,20Z"
         fill="#E60000"