From 046c9396678e43b711f1862d35f6360769f0eef7 Mon Sep 17 00:00:00 2001
From: Dominik Iwanek <141320833+dominikiwanekhyland@users.noreply.github.com>
Date: Mon, 26 Jan 2026 13:04:21 +0100
Subject: [PATCH] [ACS-10886] Buttons under collapsed/expanded menu are coded
 as regions instead of list of items (#5005)

---
 .../sidenav/components/expand-menu.component.html         | 8 ++++----
 .../src/lib/components/sidenav/sidenav.component.scss     | 8 +++++++-
 projects/aca-content/src/lib/ui/mat-selectors.scss        | 1 +
 3 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/projects/aca-content/src/lib/components/sidenav/components/expand-menu.component.html b/projects/aca-content/src/lib/components/sidenav/components/expand-menu.component.html
index a9db52e16..fb539a1b6 100644
--- a/projects/aca-content/src/lib/components/sidenav/components/expand-menu.component.html
+++ b/projects/aca-content/src/lib/components/sidenav/components/expand-menu.component.html
@@ -38,8 +38,8 @@
         </div>
       </mat-panel-title>
     </mat-expansion-panel-header>
-    <div class="aca-expansion-panel-body">
-      <div *ngFor="let child of item.children; trackBy: trackById" class="aca-expansion-panel-item">
+    <ul class="aca-expansion-panel-body" [attr.aria-label]="item.title | translate">
+      <li *ngFor="let child of item.children; trackBy: trackById" class="aca-expansion-panel-item">
         <button
           acaActiveLink="aca-action-button--active"
           [action]="child"
@@ -54,7 +54,7 @@
           <adf-icon *ngIf="child.icon" [value]="child.icon" />
           <span class="aca-action-button__label">{{ child.title | translate }}</span>
         </button>
-      </div>
-    </div>
+      </li>
+    </ul>
   </mat-expansion-panel>
 </ng-container>
diff --git a/projects/aca-content/src/lib/components/sidenav/sidenav.component.scss b/projects/aca-content/src/lib/components/sidenav/sidenav.component.scss
index cf02bdd17..8452c0164 100644
--- a/projects/aca-content/src/lib/components/sidenav/sidenav.component.scss
+++ b/projects/aca-content/src/lib/components/sidenav/sidenav.component.scss
@@ -46,6 +46,10 @@
   .aca-sidenav__section {
     overflow-y: auto;
 
+    #{mat.$mat-expansion-panel-body} {
+      padding: 0;
+    }
+
     .aca-expansion-panel {
       width: 100%;
       background-color: unset;
@@ -103,8 +107,9 @@
       }
 
       &-body {
-        margin: 0 -24px 16px;
         font-size: var(--theme-body-1-font-size);
+        padding: 0;
+        margin: 0;
 
         button {
           line-height: 32px;
@@ -137,6 +142,7 @@
       &__item:has(span) {
         padding: 0;
         height: 100%;
+        margin-bottom: 32px;
 
         span {
           pointer-events: auto;
diff --git a/projects/aca-content/src/lib/ui/mat-selectors.scss b/projects/aca-content/src/lib/ui/mat-selectors.scss
index 76117ee42..dddd725c9 100644
--- a/projects/aca-content/src/lib/ui/mat-selectors.scss
+++ b/projects/aca-content/src/lib/ui/mat-selectors.scss
@@ -99,3 +99,4 @@ $mat-select-disabled: '.mat-mdc-select-disabled';
 $mat-select-value: '.mat-mdc-select-value';
 $mat-checkbox-native-control: '.mdc-checkbox__native-control';
 $mat-card-header: '.mat-mdc-card-header';
+$mat-expansion-panel-body: '.mat-expansion-panel-body';