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

This commit is contained in:
DominikIwanek 2023-08-10 16:38:48 +02:00 committed by GitHub
parent b790d3e81d
commit 3f3b35d16c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 6 additions and 5 deletions

View File

@ -25,17 +25,16 @@
<mat-expansion-panel-header expandedHeight="32px" collapsedHeight="32px" role="group"> <mat-expansion-panel-header expandedHeight="32px" collapsedHeight="32px" role="group">
<mat-panel-title> <mat-panel-title>
<div class="item"> <div class="item">
<button <span
[attr.aria-label]="item.title | translate" [attr.aria-label]="item.title | translate"
[id]="item.id" [id]="item.id"
[attr.title]="item.description | translate" [attr.title]="item.description | translate"
[attr.data-automation-id]="item.id" [attr.data-automation-id]="item.id"
mat-button
class="action-button full-width" class="action-button full-width"
> >
<adf-icon *ngIf="item.icon" [value]="item.icon"></adf-icon> <adf-icon *ngIf="item.icon" [value]="item.icon"></adf-icon>
<span class="action-button__label">{{ item.title | translate }}</span> <span class="action-button__label">{{ item.title | translate }}</span>
</button> </span>
</div> </div>
</mat-panel-title> </mat-panel-title>
</mat-expansion-panel-header> </mat-expansion-panel-header>

View File

@ -97,8 +97,8 @@
} }
} }
.mat-expansion-panel:not(.mat-expanded) .mat-expansion-panel-header:not([aria-disabled='true']):hover { .mat-expansion-panel-header:hover {
background: none; background: var(--adf-theme-background-hover-color);
} }
.item { .item {
@ -119,6 +119,7 @@
height: 32px; height: 32px;
padding: 0 24px; padding: 0 24px;
border-radius: 0; border-radius: 0;
line-height: 32px;
} }
.full-width { .full-width {

View File

@ -157,6 +157,7 @@
.mat-expansion-panel .mat-expansion-panel-header { .mat-expansion-panel .mat-expansion-panel-header {
border: 2px solid transparent; border: 2px solid transparent;
box-sizing: border-box;
.mat-button-base.mat-button { .mat-button-base.mat-button {
outline: none; outline: none;