fix 37866065: naming viewer chart title screen reader

Author: Siyu Chen

src/SfxWeb/src/app/modules/concurrent-events-visualization/timeseries/timeseries.component.html

@@ -9,8 +9,9 @@
               <span class="mif-info link"></span>
               Click to focus a point or click and drag to zoom
             </div>
-            <div *ngFor="let dataSet of data.series; let i = index" class="chart" data-cy="metric">
-              {{dataSet.name}}
+            <div *ngFor="let dataSet of data.series; let i = index" class="chart" data-cy="metric"
+              role="figure" [attr.aria-label]="dataSet.name + ' chart'" tabindex="0">
+              <span aria-hidden="true">{{dataSet.name}}</span>
 
               <div #container (mousemove)="interactionEvent($event, i)" class="chart-container"></div>
             </div>

src/SfxWeb/src/app/modules/concurrent-events-visualization/timeseries/timeseries.component.ts

@@ -276,6 +276,13 @@ export class TimeseriesComponent implements AfterViewInit, OnChanges, OnDestroy,
       }
       return {
             ...this.options, series: dataSet, yAxis,
+            title: { text: chartData.name, style: { color: 'white', opacity: 0 } },
+            accessibility: {
+              enabled: true,
+              description: chartData.name,
+              landmarkVerbosity: 'one' as const,
+              point: { valueDescriptionFormat: '{point.name}, {point.y}' }
+            },
         }
     })
   }