inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-05-26 17:24:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
lib/content-services/src/lib/search/components/search-filter-chips/search-facet-chip/search-facet-chip.component.html
View File

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

18
lib/content-services/src/lib/search/components/search-filter-chips/search-filter-menu-card/search-filter-menu-card.component.html
View File

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

5
lib/content-services/src/lib/search/components/search-filter-chips/search-filter-menu-card/search-filter-menu-card.component.scss
View File

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

1
lib/content-services/src/lib/search/components/search-filter-chips/search-widget-chip/search-widget-chip.component.html
View File

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