[ACS-5342] Accessibility fixes for filters and facets (#8626)

This commit is contained in:
MichalKinas 2023-06-06 21:29:22 +02:00 committed by GitHub
parent 7eebdb8b11
commit 66b5ca90dc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 15 additions and 10 deletions

View File

@ -25,6 +25,7 @@
<div #menuContainer [attr.data-automation-id]="'search-field-' + field.label">
<adf-search-filter-menu-card (click)="$event.stopPropagation()"
(keydown.tab)="$event.stopPropagation();"
(keydown.shift.tab)="$event.stopPropagation()"
(close)="menuTrigger.closeMenu()">
<ng-container ngProjectAs="filter-title">
{{ field.label | translate }}

View File

@ -1,14 +1,16 @@
<div class="adf-search-filter-menu-card">
<div class="adf-search-filter-title">
<ng-content select="filter-title"></ng-content>
<mat-icon class="adf-search-filter-title-action"
role="button"
aria-hidden="false"
[attr.aria-label]="'SEARCH.FILTER.BUTTONS.CLOSE' | translate"
(click)="onClose()"
[matTooltip]="'SEARCH.FILTER.BUTTONS.CLOSE' | translate">
close
</mat-icon>
<button mat-icon-button
class="adf-search-filter-title-action"
aria-hidden="false"
[attr.aria-label]="'SEARCH.FILTER.BUTTONS.CLOSE' | translate"
(click)="onClose()"
[matTooltip]="'SEARCH.FILTER.BUTTONS.CLOSE' | translate">
<mat-icon>
close
</mat-icon>
</button>
</div>
<mat-divider></mat-divider>

View File

@ -3,12 +3,13 @@
background: var(--adf-theme-background-card-color);
.adf-search-filter-title {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 12px;
height: 32px;
flex: 1 1 auto;
font-size: var(--theme-body-1-font-size);
letter-spacing: 0.15px;
line-height: 24px;
font-weight: bold;
font-style: inherit;

View File

@ -23,6 +23,7 @@
<div #menuContainer [attr.data-automation-id]="'search-field-' + category.name">
<adf-search-filter-menu-card (click)="$event.stopPropagation()"
(keydown.tab)="$event.stopPropagation();"
(keydown.shift.tab)="$event.stopPropagation()"
(close)="menuTrigger.closeMenu()">
<ng-container ngProjectAs="filter-title">