From 3f3b35d16c7c26fa7a925252b54c6ce2835e573b Mon Sep 17 00:00:00 2001
From: DominikIwanek <141320833+DominikIwanek@users.noreply.github.com>
Date: Thu, 10 Aug 2023 16:38:48 +0200
Subject: [PATCH] [ACS-5692] - fix focus for sidenav options (#3379)

---
 .../components/sidenav/components/expand-menu.component.html | 5 ++---
 .../src/lib/components/sidenav/sidenav.component.scss        | 5 +++--
 projects/aca-content/src/lib/ui/overrides/ay11.scss          | 1 +
 3 files changed, 6 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 7b6168d911..6643acd88a 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
@@ -25,17 +25,16 @@
     <mat-expansion-panel-header expandedHeight="32px" collapsedHeight="32px" role="group">
       <mat-panel-title>
         <div class="item">
-          <button
+          <span
             [attr.aria-label]="item.title | translate"
             [id]="item.id"
             [attr.title]="item.description | translate"
             [attr.data-automation-id]="item.id"
-            mat-button
             class="action-button full-width"
           >
             <adf-icon *ngIf="item.icon" [value]="item.icon"></adf-icon>
             <span class="action-button__label">{{ item.title | translate }}</span>
-          </button>
+          </span>
         </div>
       </mat-panel-title>
     </mat-expansion-panel-header>
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 df72e2a53d..4b20f56e1f 100644
--- a/projects/aca-content/src/lib/components/sidenav/sidenav.component.scss
+++ b/projects/aca-content/src/lib/components/sidenav/sidenav.component.scss
@@ -97,8 +97,8 @@
       }
     }
 
-    .mat-expansion-panel:not(.mat-expanded) .mat-expansion-panel-header:not([aria-disabled='true']):hover {
-      background: none;
+    .mat-expansion-panel-header:hover {
+      background: var(--adf-theme-background-hover-color);
     }
 
     .item {
@@ -119,6 +119,7 @@
       height: 32px;
       padding: 0 24px;
       border-radius: 0;
+      line-height: 32px;
     }
 
     .full-width {
diff --git a/projects/aca-content/src/lib/ui/overrides/ay11.scss b/projects/aca-content/src/lib/ui/overrides/ay11.scss
index c45b36ef0e..3a82e99a3b 100644
--- a/projects/aca-content/src/lib/ui/overrides/ay11.scss
+++ b/projects/aca-content/src/lib/ui/overrides/ay11.scss
@@ -157,6 +157,7 @@
 
   .mat-expansion-panel .mat-expansion-panel-header {
     border: 2px solid transparent;
+    box-sizing: border-box;
 
     .mat-button-base.mat-button {
       outline: none;