[ACS-10886] Buttons under collapsed/expanded menu are coded as regions instead of list of items (#5005)

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>

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;

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';