From 0c9d2953be9b51394039ab776ea57103b4265c16 Mon Sep 17 00:00:00 2001
From: Anton Ramanovich <90370279+rmnvch@users.noreply.github.com>
Date: Wed, 5 Nov 2025 11:26:12 +0100
Subject: [PATCH] [ACS-10198]: adds role and label (#4877)

* [ACS-10198]: adds role and label

* [ACS-10198]: migrates to nav tag
---
 .../components/sidenav/sidenav.component.html | 28 +++++++++++--------
 .../components/sidenav/sidenav.component.ts   |  3 +-
 2 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/projects/aca-content/src/lib/components/sidenav/sidenav.component.html b/projects/aca-content/src/lib/components/sidenav/sidenav.component.html
index 300877327..324ce8a8b 100644
--- a/projects/aca-content/src/lib/components/sidenav/sidenav.component.html
+++ b/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>
diff --git a/projects/aca-content/src/lib/components/sidenav/sidenav.component.ts b/projects/aca-content/src/lib/components/sidenav/sidenav.component.ts
index cf02067e6..f7f0506c8 100755
--- a/projects/aca-content/src/lib/components/sidenav/sidenav.component.ts
+++ b/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'],