[ACS-10198]: adds role and label (#4877)

* [ACS-10198]: adds role and label

* [ACS-10198]: migrates to nav tag

Author: rmnvch

projects/aca-content/src/lib/components/sidenav/sidenav.component.html

@@ -1,16 +1,20 @@
 <div class="aca-sidenav">
-    <app-sidenav-header (toggleNavBar)="toggleClick()" />
+  <app-sidenav-header (toggleNavBar)="toggleClick()" />
 
-    <div class="aca-sidenav__section">
-      <div *ngFor="let group of groups; trackBy: trackByGroupId" class="aca-sidenav__section__actions">
-          <mat-list-item class="aca-sidenav__section__actions__item" *ngFor="let item of group.items; trackBy: trackByLinkId">
-            <ng-container *ngIf="!item.component">
-              <app-expand-menu [item]="item" />
-            </ng-container>
-            <ng-container *ngIf="item.component">
-              <adf-dynamic-component [data]="{ item: item, state: 'expanded' }" [id]="item.component" />
-            </ng-container>
-          </mat-list-item>
-      </div>
+  <div class="aca-sidenav__section">
+    <div *ngFor="let group of groups; trackBy: trackByGroupId" class="aca-sidenav__section__actions">
+      <nav
+        [attr.aria-label]="item.title | translate"
+        class="aca-sidenav__section__actions__item"
+        *ngFor="let item of group.items; trackBy: trackByLinkId"
+      >
+        <ng-container *ngIf="!item.component">
+          <app-expand-menu [item]="item" />
+        </ng-container>
+        <ng-container *ngIf="item.component">
+          <adf-dynamic-component [data]="{ item: item, state: 'expanded' }" [id]="item.component" />
+        </ng-container>
+      </nav>
     </div>
+  </div>
 </div>

projects/aca-content/src/lib/components/sidenav/sidenav.component.ts

@@ -35,9 +35,10 @@ import { MatListModule } from '@angular/material/list';
 import { ExpandMenuComponent } from './components/expand-menu.component';
 import { NavigationEnd } from '@angular/router';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { TranslatePipe } from '@ngx-translate/core';
 
 @Component({
-  imports: [CommonModule, SidenavHeaderComponent, MatListModule, ExpandMenuComponent, DynamicExtensionComponent],
+  imports: [CommonModule, SidenavHeaderComponent, MatListModule, ExpandMenuComponent, DynamicExtensionComponent, TranslatePipe],
   selector: 'app-sidenav',
   templateUrl: './sidenav.component.html',
   styleUrls: ['./sidenav.component.scss'],