[ACS-5692] - fix focus for sidenav options (#3379)

Alfresco · Aug 10, 2023 · 3f3b35d · 3f3b35d
1 parent b790d3e
commit 3f3b35d
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 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
@@ -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
@@ -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
@@ -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;