Modify data and color codes for examples to fix accessibility issues

change/@fluentui-react-charting-07085de4-08a0-49db-91db-76677708e0e3.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Fix style issue for tree chart",
+  "packageName": "@fluentui/react-charting",
+  "email": "98592573+AtishayMsft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/react-charting/src/components/TreeChart/TreeChart.styles.ts

@@ -12,7 +12,7 @@ export const getStyles = (props: ITreeStyleProps): ITreeStyles => {
     ],
     link: {
       fill: 'none',
-      stroke: '#A1A1A1',
+      stroke: props.theme!.palette.neutralSecondary,
       strokeWidth: '2px',
     },
     rectNode: {

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

@@ -909,7 +909,7 @@ subText sub Parent info parentId: 13
               {
                 fill: none;
                 stroke-width: 2px;
-                stroke: #A1A1A1;
+                stroke: #605e5c;
               }
           d="M208.75,110 H1221.25 M715,110
     V85.21739130434783"
@@ -920,7 +920,7 @@ subText sub Parent info parentId: 13
               {
                 fill: none;
                 stroke-width: 2px;
-                stroke: #A1A1A1;
+                stroke: #605e5c;
               }
           d="M321.25,205.2173913043478 V230
     H208.75 H433.75"
@@ -931,7 +931,7 @@ subText sub Parent info parentId: 13
               {
                 fill: none;
                 stroke-width: 2px;
-                stroke: #A1A1A1;
+                stroke: #605e5c;
               }
           d="M583.75,205.2173913043478 V230
     H471.25 H696.25"
@@ -942,7 +942,7 @@ subText sub Parent info parentId: 13
               {
                 fill: none;
                 stroke-width: 2px;
-                stroke: #A1A1A1;
+                stroke: #605e5c;
               }
           d="M846.25,205.2173913043478 V230
     H733.75 H958.75"
@@ -953,7 +953,7 @@ subText sub Parent info parentId: 13
               {
                 fill: none;
                 stroke-width: 2px;
-                stroke: #A1A1A1;
+                stroke: #605e5c;
               }
           d="M1108.75,205.2173913043478 V230
     H996.25 H1221.25"
@@ -1873,7 +1873,7 @@ subText sub Parent info parentId: 13
               {
                 fill: none;
                 stroke-width: 2px;
-                stroke: #A1A1A1;
+                stroke: #605e5c;
               }
           d="M208.75,110 H1221.25 M715,110
     V85.21739130434783"
@@ -1884,7 +1884,7 @@ subText sub Parent info parentId: 13
               {
                 fill: none;
                 stroke-width: 2px;
-                stroke: #A1A1A1;
+                stroke: #605e5c;
               }
           d="M321.25,205.2173913043478 V230
     H208.75 H433.75"
@@ -1895,7 +1895,7 @@ subText sub Parent info parentId: 13
               {
                 fill: none;
                 stroke-width: 2px;
-                stroke: #A1A1A1;
+                stroke: #605e5c;
               }
           d="M583.75,205.2173913043478 V230
     H471.25 H696.25"
@@ -1906,7 +1906,7 @@ subText sub Parent info parentId: 13
               {
                 fill: none;
                 stroke-width: 2px;
-                stroke: #A1A1A1;
+                stroke: #605e5c;
               }
           d="M846.25,205.2173913043478 V230
     H733.75 H958.75"
@@ -1917,7 +1917,7 @@ subText sub Parent info parentId: 13
               {
                 fill: none;
                 stroke-width: 2px;
-                stroke: #A1A1A1;
+                stroke: #605e5c;
               }
           d="M1108.75,205.2173913043478 V230
     H996.25 H1221.25"
@@ -2837,7 +2837,7 @@ subText sub Parent info parentId: 13
               {
                 fill: none;
                 stroke-width: 2px;
-                stroke: #A1A1A1;
+                stroke: #605e5c;
               }
           d="M208.75,110 H1221.25 M715,110
     V85.21739130434783"
@@ -2848,7 +2848,7 @@ subText sub Parent info parentId: 13
               {
                 fill: none;
                 stroke-width: 2px;
-                stroke: #A1A1A1;
+                stroke: #605e5c;
               }
           d="M321.25,205.2173913043478 V230
     H208.75 H433.75"
@@ -2859,7 +2859,7 @@ subText sub Parent info parentId: 13
               {
                 fill: none;
                 stroke-width: 2px;
-                stroke: #A1A1A1;
+                stroke: #605e5c;
               }
           d="M583.75,205.2173913043478 V230
     H471.25 H696.25"
@@ -2870,7 +2870,7 @@ subText sub Parent info parentId: 13
               {
                 fill: none;
                 stroke-width: 2px;
-                stroke: #A1A1A1;
+                stroke: #605e5c;
               }
           d="M846.25,205.2173913043478 V230
     H733.75 H958.75"
@@ -2881,7 +2881,7 @@ subText sub Parent info parentId: 13
               {
                 fill: none;
                 stroke-width: 2px;
-                stroke: #A1A1A1;
+                stroke: #605e5c;
               }
           d="M1108.75,205.2173913043478 V230
     H996.25 H1221.25"
@@ -3233,7 +3233,7 @@ subText Subtext val is subtext Parent info parentId: 0
               {
                 fill: none;
                 stroke-width: 2px;
-                stroke: #A1A1A1;
+                stroke: #605e5c;
               }
           d="M208.75,110 H1221.25 M715,110
     V85.21739130434783"

packages/react-examples/src/react-charting/AreaChart/AreaChart.CustomAccessibility.Example.tsx

@@ -34,87 +34,107 @@ export class AreaChartCustomAccessibilityExample extends React.Component<{}, IAr
         x: 20,
         y: 9,
         xAxisCalloutAccessibilityData: { ariaLabel: 'x-Axis 20' },
-        callOutAccessibilityData: { ariaLabel: 'Line series 1 of 5 Point 1 First 9' },
+        callOutAccessibilityData: { ariaLabel: 'Point 1 of 5 in First series. X value 20 Y value $9' },
       },
       {
         x: 40,
         y: 20,
         xAxisCalloutAccessibilityData: { ariaLabel: 'x-Axis 40' },
-        callOutAccessibilityData: { ariaLabel: 'Line series 2 of 5 Point 1 First 20' },
+        callOutAccessibilityData: { ariaLabel: 'Point 2 of 5 in First series. X value 40 Y value $20' },
       },
       {
         x: 55,
         y: 27,
         xAxisCalloutAccessibilityData: { ariaLabel: 'x-Axis 55' },
-        callOutAccessibilityData: { ariaLabel: 'Line series 3 of 5 Point 1 First 27' },
+        callOutAccessibilityData: { ariaLabel: 'Point 3 of 5 in First series. X value 55 Y value $27' },
       },
       {
         x: 60,
         y: 37,
         xAxisCalloutAccessibilityData: { ariaLabel: 'x-Axis 60' },
-        callOutAccessibilityData: { ariaLabel: 'Line series 4 of 5 Point 1 First 37' },
+        callOutAccessibilityData: { ariaLabel: 'Point 4 of 5 in First series. X value 60 Y value $37' },
       },
       {
         x: 65,
         y: 51,
         xAxisCalloutAccessibilityData: { ariaLabel: 'x-Axis 65' },
-        callOutAccessibilityData: { ariaLabel: 'Line series 5 of 5 Point 1 First 51' },
+        callOutAccessibilityData: { ariaLabel: 'Point 5 of 5 in First series. X value 65 Y value $51' },
       },
     ];
 
     const chart2Points = [
       {
         x: 20,
         y: 21,
-        callOutAccessibilityData: { ariaLabel: 'Point 2 Second 21' },
+        callOutAccessibilityData: {
+          ariaLabel: 'First of 5 points in Second series. X coordinate is 20 and Y coordinate is $21',
+        },
       },
       {
         x: 40,
         y: 25,
-        callOutAccessibilityData: { ariaLabel: 'Point 2 Second 25' },
+        callOutAccessibilityData: {
+          ariaLabel: 'Second of 5 points in Second series. X coordinate is 40 and Y coordinate is $25',
+        },
       },
       {
         x: 55,
         y: 23,
-        callOutAccessibilityData: { ariaLabel: 'Point 2 Second 23' },
+        callOutAccessibilityData: {
+          ariaLabel: 'Third of 5 points in Second series. X coordinate is 55 and Y coordinate is $23',
+        },
       },
       {
         x: 60,
         y: 7,
-        callOutAccessibilityData: { ariaLabel: 'Point 2 Second 7' },
+        callOutAccessibilityData: {
+          ariaLabel: 'Fourth of 5 points in Second series. X coordinate is 60 and Y coordinate is $7',
+        },
       },
       {
         x: 65,
         y: 55,
-        callOutAccessibilityData: { ariaLabel: 'Point 2 Second 55' },
+        callOutAccessibilityData: {
+          ariaLabel: 'Fifth of 5 points in Second series. X coordinate is 65 and Y coordinate is $55',
+        },
       },
     ];
 
     const chart3Points = [
       {
         x: 20,
         y: 30,
-        callOutAccessibilityData: { ariaLabel: 'Point 3 Third 30' },
+        callOutAccessibilityData: {
+          ariaLabel: 'First of 5 points in Third series. X coordinate is 20 and Y coordinate is $30',
+        },
       },
       {
         x: 40,
         y: 35,
-        callOutAccessibilityData: { ariaLabel: 'Point 3 Third 35' },
+        callOutAccessibilityData: {
+          ariaLabel: 'Second of 5 points in Third series. X coordinate is 40 and Y coordinate is $35',
+        },
       },
       {
         x: 55,
         y: 33,
-        callOutAccessibilityData: { ariaLabel: 'Point 3 Third 33' },
+        callOutAccessibilityData: {
+          ariaLabel: 'Third of 5 points in Third series. X coordinate is 55 and Y coordinate is $33',
+        },
       },
       {
         x: 60,
         y: 40,
-        callOutAccessibilityData: { ariaLabel: 'Point 3 Third 40' },
+        callOutAccessibilityData: {
+          ariaLabel: 'Fourth of 5 points in Third series. X coordinate is 60 and Y coordinate is $40',
+        },
       },
       {
         x: 65,
         y: 10,
-        callOutAccessibilityData: { ariaLabel: 'Point 3 Third 10' },
+        callOutAccessibilityData: {
+          ariaLabel: 'Fifth of 5 points in Third series. X coordinate is 65 and Y coordinate is $10',
+        },
       },
     ];
 

packages/react-examples/src/react-charting/GroupedVerticalBarChart/GroupedVerticalBarChart.Styled.Example.tsx

@@ -39,21 +39,21 @@ export class GroupedVerticalBarChartStyledExample extends React.Component<{}, IG
           {
             key: 'series1',
             data: 66,
-            xAxisCalloutData: '2020/04/30',
+            xAxisCalloutData: 'Q1 2000',
             color: getColorFromToken(DataVizPalette.color5),
             legend: 'MetaData1',
           },
           {
             key: 'series2',
             data: 13,
-            xAxisCalloutData: '2020/04/30',
+            xAxisCalloutData: 'Q2 2000',
             color: getColorFromToken(DataVizPalette.color6),
             legend: 'MetaData2',
           },
           {
             key: 'series3',
             data: 34,
-            xAxisCalloutData: '2020/04/30',
+            xAxisCalloutData: 'Q3 2000',
             color: getColorFromToken(DataVizPalette.color7),
             legend: 'MetaData3',
           },
@@ -65,21 +65,21 @@ export class GroupedVerticalBarChartStyledExample extends React.Component<{}, IG
           {
             key: 'series1',
             data: 14,
-            xAxisCalloutData: '2020/04/30',
+            xAxisCalloutData: 'Q1 2010',
             color: getColorFromToken(DataVizPalette.color5),
             legend: 'MetaData1',
           },
           {
             key: 'series2',
             data: 90,
-            xAxisCalloutData: '2020/04/30',
+            xAxisCalloutData: 'Q2 2010',
             color: getColorFromToken(DataVizPalette.color6),
             legend: 'MetaData2',
           },
           {
             key: 'series3',
             data: 33,
-            xAxisCalloutData: '2020/04/30',
+            xAxisCalloutData: 'Q3 2010',
             color: getColorFromToken(DataVizPalette.color7),
             legend: 'MetaData3',
           },
@@ -91,21 +91,21 @@ export class GroupedVerticalBarChartStyledExample extends React.Component<{}, IG
           {
             key: 'series1',
             data: 54,
-            xAxisCalloutData: '2020/04/30',
+            xAxisCalloutData: 'Q1 2020',
             color: getColorFromToken(DataVizPalette.color5),
             legend: 'MetaData1',
           },
           {
             key: 'series2',
             data: 72,
-            xAxisCalloutData: '2020/04/30',
+            xAxisCalloutData: 'Q2 2020',
             color: getColorFromToken(DataVizPalette.color6),
             legend: 'MetaData2',
           },
           {
             key: 'series3',
             data: 18,
-            xAxisCalloutData: '2020/04/30',
+            xAxisCalloutData: 'Q3 2020',
             color: getColorFromToken(DataVizPalette.color7),
             legend: 'MetaData3',
           },

packages/react-examples/src/react-charting/HeatMapChart/HeatMapChartBasic.CustomAccessibility.Example.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { HeatMapChart, IHeatMapChartDataPoint, IHeatMapChartProps } from '@fluentui/react-charting';
+import { Label } from '@fluentui/react';
 import { formatPrefix as d3FormatPrefix } from 'd3-format';
 
 const yPoint: string[] = ['CHN', 'IND', 'USA', 'IDN', 'PAK'];
@@ -112,7 +113,7 @@ export class HeatMapChartCustomAccessibilityExample extends React.Component<{},
           onChange={this._onHeightChange}
           aria-valuetext={`ChangeHeightSlider${this.state.height}`}
         />
-        <p>Heat map showing population growth over decades</p>
+        <Label>Heat map showing population growth over decades</Label>
         <div style={rootStyle}>
           <HeatMapChart
             chartTitle="Heat map chart custom accessibility example"

packages/react-examples/src/react-charting/HeatMapChart/HeatMapChartBasic.Example.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { HeatMapChart, IHeatMapChartProps, DataVizPalette, getColorFromToken } from '@fluentui/react-charting';
+import { Label } from '@fluentui/react';
 
 interface IHeatMapChartBasicExampleState {
   width: number;
@@ -319,7 +320,7 @@ export class HeatMapChartBasicExample extends React.Component<{}, IHeatMapChartB
           onChange={this._onHeightChange}
           aria-valuetext={`ChangeHeightSlider${this.state.height}`}
         />
-        <p>Heat map explaining the Air Quality Index</p>
+        <Label>Heat map explaining the Air Quality Index</Label>
         <div style={rootStyle}>
           <HeatMapChart
             culture={window.navigator.language}