feat(microchart-line): improve accessibility

Author: akashsonune

projects/native-charts-ng/microchart-line/si-microchart-line.component.ts

@@ -19,7 +19,10 @@ export interface MicrochartLineSeries {
 @Component({
   selector: 'si-microchart-line',
   templateUrl: './si-microchart-line.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    role: 'img'
+  }
 })
 export class SiMicrochartLineComponent {
   /**

src/app/examples/si-ncharts/si-micro-charts.html

@@ -2,13 +2,18 @@
   <div class="card">
     <div class="card-header">Line micro chart</div>
     <div class="card-body d-flex flex-row gap-8 align-items-center">
-      <si-microchart-line [series]="lineSeries" />
+      <si-microchart-line aria-label="Sales growth: increasing trend" [series]="lineSeries" />
       <si-microchart-line
         markerColor="element-data-2"
+        aria-label="Performance metrics showing upward trend"
         [showMarkers]="true"
         [series]="lineMarkerSeries"
       />
-      <si-microchart-line [showArea]="true" [series]="lineAreaSeries" />
+      <si-microchart-line
+        aria-label="Revenue growth over time"
+        [showArea]="true"
+        [series]="lineAreaSeries"
+      />
     </div>
   </div>