Merge branch 'charting/web-components' of https://github.com/microsof…

…t/fluentui into charting/web-components
microsoft · Nov 20, 2024 · 4f40ca8 · 4f40ca8
2 parents 2eda223 + 2022db6
commit 4f40ca8
Show file tree

Hide file tree

Showing 6 changed files with 75 additions and 50 deletions.
diff --git a/packages/charts/chart-web-components/src/donut-chart/donut-chart.template.ts b/packages/charts/chart-web-components/src/donut-chart/donut-chart.template.ts
@@ -11,7 +11,7 @@ export function donutChartTemplate<T extends DonutChart>(): ElementViewTemplate<
   return html<T>`
     <template ${ref('rootDiv')}>
       <div ${ref('chartWrapper')}>
-        <svg class="chart" width="${x => x.width}" height="${x => x.height}" aria-label="${x => x.data.chartTitle}">
+        <svg class="chart" width="${x => x.width}" height="${x => x.height}">
           <g ${ref('group')} transform="translate(${x => x.width / 2}, ${x => x.height / 2})"></g>
         </svg>
       </div>

diff --git a/packages/charts/chart-web-components/src/donut-chart/donut-chart.ts b/packages/charts/chart-web-components/src/donut-chart/donut-chart.ts
@@ -58,10 +58,17 @@ export class DonutChart extends FASTElement {
   public rootDiv!: HTMLDivElement;
   public chartWrapper!: HTMLDivElement;
   public group!: SVGGElement;
+  public elementInternals: ElementInternals = this.attachInternals();
 
   private _arcs: SVGPathElement[] = [];
   private _isRTL: boolean = false;
 
+  constructor() {
+    super();
+
+    this.elementInternals.role = 'region';
+  }
+
   connectedCallback() {
     super.connectedCallback();
 
@@ -77,6 +84,8 @@ export class DonutChart extends FASTElement {
 
     this.legends = this.getLegends();
     this._isRTL = getRTL(this);
+    this.elementInternals.ariaLabel =
+      this.data.chartTitle || `Donut chart with ${this.data.chartData.length} segments.`;
 
     this._render();
   }

diff --git a/...ages/charts/chart-web-components/src/horizontal-bar-chart/horizontal-bar-chart.options.ts b/...ages/charts/chart-web-components/src/horizontal-bar-chart/horizontal-bar-chart.options.ts
@@ -35,9 +35,9 @@ export interface ChartDataPoint {
 
 export interface ChartProps {
   /**
-   * chart title for the chart
+   * title for the data series
    */
-  chartTitle?: string;
+  chartSeriesTitle?: string;
 
   /**
    * data for the points in the chart

diff --git a/packages/charts/chart-web-components/src/horizontal-bar-chart/horizontal-bar-chart.spec.ts b/packages/charts/chart-web-components/src/horizontal-bar-chart/horizontal-bar-chart.spec.ts
@@ -73,22 +73,22 @@ const chartPoints3: ChartDataPoint[] = [
 
 const basicChartTestData: ChartProps[] = [
   {
-    chartTitle: 'Monitored First',
+    chartSeriesTitle: 'Monitored First',
     chartData: chartPoints1,
   },
   {
-    chartTitle: 'Monitored Second',
+    chartSeriesTitle: 'Monitored Second',
     chartData: chartPoints2,
   },
   {
-    chartTitle: 'Unmonitored',
+    chartSeriesTitle: 'Unmonitored',
     chartData: chartPoints3,
   },
 ];
 
 const singleBarHBCData = [
   {
-    chartTitle: 'one',
+    chartSeriesTitle: 'one',
     chartData: [
       {
         legend: 'one',
@@ -99,7 +99,7 @@ const singleBarHBCData = [
     ],
   },
   {
-    chartTitle: 'two',
+    chartSeriesTitle: 'two',
     chartData: [
       {
         legend: 'two',
@@ -110,7 +110,7 @@ const singleBarHBCData = [
     ],
   },
   {
-    chartTitle: 'three',
+    chartSeriesTitle: 'three',
     chartData: [
       {
         legend: 'three',
@@ -121,7 +121,7 @@ const singleBarHBCData = [
     ],
   },
   {
-    chartTitle: 'four',
+    chartSeriesTitle: 'four',
     chartData: [
       {
         legend: 'four',
@@ -132,7 +132,7 @@ const singleBarHBCData = [
     ],
   },
   {
-    chartTitle: 'five',
+    chartSeriesTitle: 'five',
     chartData: [
       {
         legend: 'five',
@@ -143,7 +143,7 @@ const singleBarHBCData = [
     ],
   },
   {
-    chartTitle: 'six',
+    chartSeriesTitle: 'six',
     chartData: [
       {
         legend: 'six',
@@ -154,7 +154,7 @@ const singleBarHBCData = [
     ],
   },
   {
-    chartTitle: 'seven',
+    chartSeriesTitle: 'seven',
     chartData: [
       {
         legend: 'seven',
@@ -165,7 +165,7 @@ const singleBarHBCData = [
     ],
   },
   {
-    chartTitle: 'eight',
+    chartSeriesTitle: 'eight',
     chartData: [
       {
         legend: 'eight',
@@ -179,7 +179,7 @@ const singleBarHBCData = [
 
 const singleBarNMVariantData = [
   {
-    chartTitle: 'one',
+    chartSeriesTitle: 'one',
     chartData: [
       {
         legend: 'one',
@@ -190,7 +190,7 @@ const singleBarNMVariantData = [
     ],
   },
   {
-    chartTitle: 'two',
+    chartSeriesTitle: 'two',
     chartData: [
       {
         legend: 'two',
@@ -201,7 +201,7 @@ const singleBarNMVariantData = [
     ],
   },
   {
-    chartTitle: 'three',
+    chartSeriesTitle: 'three',
     chartData: [
       {
         legend: 'three',
@@ -212,7 +212,7 @@ const singleBarNMVariantData = [
     ],
   },
   {
-    chartTitle: 'four',
+    chartSeriesTitle: 'four',
     chartData: [
       {
         legend: 'four',
@@ -223,7 +223,7 @@ const singleBarNMVariantData = [
     ],
   },
   {
-    chartTitle: 'five',
+    chartSeriesTitle: 'five',
     chartData: [
       {
         legend: 'five',
@@ -234,7 +234,7 @@ const singleBarNMVariantData = [
     ],
   },
   {
-    chartTitle: 'six',
+    chartSeriesTitle: 'six',
     chartData: [
       {
         legend: 'six',
@@ -245,7 +245,7 @@ const singleBarNMVariantData = [
     ],
   },
   {
-    chartTitle: 'seven',
+    chartSeriesTitle: 'seven',
     chartData: [
       {
         legend: 'seven',
@@ -256,7 +256,7 @@ const singleBarNMVariantData = [
     ],
   },
   {
-    chartTitle: 'eight',
+    chartSeriesTitle: 'eight',
     chartData: [
       {
         legend: 'eight',
@@ -270,7 +270,7 @@ const singleBarNMVariantData = [
 
 const singlePointData = [
   {
-    chartTitle: 'one',
+    chartSeriesTitle: 'one',
     chartData: [
       {
         legend: 'one',