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

[ACS-3552] Fix accessibility issues from CSV file (#7887)

Browse Source
This commit is contained in:
MichalKinas
2022-10-18 15:00:49 +02:00
committed by GitHub
parent 122aa805a2
commit 031f00be31
22 changed files with 71 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
lib/content-services/src/lib/content-node-share/content-node-share.dialog.html
View File

@@ -1,5 +1,5 @@
<div class="adf-share-link__dialog-content">
<div data-automation-id="adf-share-dialog-title" class="adf-share-link__title">
<div data-automation-id="adf-share-dialog-title" class="adf-share-link__title" role="heading" aria-level="1">
{{ 'SHARE.DIALOG-TITLE' | translate }} {{ fileName }}
</div>
@@ -28,12 +28,15 @@
matInput
cdkFocusInitial
placeholder="{{ 'SHARE.PUBLIC-LINK' | translate }}"
[attr.aria-label]="'SHARE.PUBLIC-LINK' | translate"
formControlName="sharedUrl"
readonly="readonly">
<mat-icon
class="adf-input-action"
role="button"
matSuffix
[clipboard-notification]="'SHARE.CLIPBOARD-MESSAGE' | translate" [adf-clipboard]
[attr.aria-label]="'SHARE.COPY_BUTTON_LABEL' | translate"
[target]="sharedLinkInput">
content_copy
</mat-icon>
@@ -69,6 +72,7 @@
#dateTimePickerInput
matInput
placeholder="{{ 'SHARE.EXPIRATION-LABEL' | translate }}"
[attr.aria-label]="'SHARE.EXPIRATION-LABEL' | translate"
[min]="minDate"
formControlName="time"
[matDatetimepicker]="datetimePicker" />

1
lib/content-services/src/lib/i18n/en.json
View File

@@ -384,6 +384,7 @@
"EXPIRATION-LABEL" : "Expiration Date",
"CLIPBOARD-MESSAGE": "Link copied to the clipboard",
"CLOSE": "Close",
"COPY_BUTTON_LABEL": "Copy link",
"CONFIRMATION": {
"DIALOG-TITLE": "Remove this shared link",
"MESSAGE": "This link will be deleted and a new link will be created next time this file is shared",

1
lib/content-services/src/lib/search/components/search-check-list/search-check-list.component.html
View File

@@ -4,6 +4,7 @@
[checked]="option.checked"
(keydown.enter)="option.checked = !option.checked"
[attr.data-automation-id]="'checkbox-' + (option.name)"
[attr.aria-label]="option.name | translate"
(change)="changeHandler($event, option)"
class="adf-facet-filter">
<div matTooltip="{{ option.name | translate }}"

2
lib/content-services/src/lib/search/components/search-date-range/search-date-range.component.html
View File

@@ -5,6 +5,7 @@
[formControl]="from"
[errorStateMatcher]="matcher"
placeholder="{{ 'SEARCH.FILTER.RANGE.FROM-DATE' | translate }}"
[attr.aria-label]="'SEARCH.FILTER.RANGE.FROM-DATE' | translate"
[matDatepicker]="fromDatepicker"
[max]="fromMaxDate"
(dateChange)="onChangedHandler($event, from)"
@@ -22,6 +23,7 @@
[formControl]="to"
[errorStateMatcher]="matcher"
placeholder="{{ 'SEARCH.FILTER.RANGE.TO-DATE' | translate }}"
[attr.aria-label]="'SEARCH.FILTER.RANGE.TO-DATE' | translate"
[matDatepicker]="toDatepicker"
[min]="from.value"
[max]="maxDate"

2
lib/content-services/src/lib/search/components/search-facet-field/search-facet-field.component.html
View File

@@ -9,7 +9,7 @@
[attr.data-automation-id]="'facet-result-filter-'+field.label" [(ngModel)]="field.buckets.filterText">
<button *ngIf="field.buckets.filterText" mat-button matSuffix mat-icon-button
(click)="field.buckets.filterText = ''">
<mat-icon>close</mat-icon>
<mat-icon role="button" [attr.aria-label]="'SEARCH.FILTER.BUTTONS.CLOSE' | translate">close</mat-icon>
</button>
</mat-form-field>
</div>

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

@@ -2,8 +2,10 @@
disableRipple
class="adf-search-filter-chip"
[class.adf-search-toggle-chip]="(facetField.displayValue$ | async) || menuTrigger.menuOpen"
tabIndex="0"
[matMenuTriggerFor]="menu"
(onMenuOpen)="onMenuOpen()"
(keydown.enter)="onEnterKeydown()"
[attr.title]="facetField.displayValue$ | async"
#menuTrigger="matMenuTrigger">

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

@@ -64,4 +64,8 @@ export class SearchFacetChipComponent {
this.facetFieldComponent.submitValues();
this.menuTrigger.closeMenu();
}
onEnterKeydown(): void {
this.menuTrigger.openMenu();
}
}

2
lib/content-services/src/lib/search/components/search-filter-chips/search-filter-chips.component.html
View File

@@ -1,4 +1,4 @@
<mat-chip-list aria-orientation="horizontal">
<mat-chip-list aria-orientation="horizontal" role="listbox">
<ng-container *ngFor="let category of queryBuilder.categories">
<adf-search-widget-chip [category]="category"></adf-search-widget-chip>
</ng-container>

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

@@ -2,6 +2,9 @@
<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

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

@@ -2,8 +2,10 @@
disableRipple
class="adf-search-filter-chip"
[class.adf-search-toggle-chip]="(widget.getDisplayValue() | async) || menuTrigger.menuOpen"
tabIndex="0"
[matMenuTriggerFor]="menu"
(onMenuOpen)="onMenuOpen()"
(keydown.enter)="onEnterKeydown()"
[attr.title]="widget.getDisplayValue() | async"
#menuTrigger="matMenuTrigger">
<span class="adf-search-filter-placeholder">

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

@@ -65,4 +65,8 @@ export class SearchWidgetChipComponent {
this.widgetContainerComponent.applyInnerWidget();
this.menuTrigger.closeMenu();
}
onEnterKeydown(): void {
this.menuTrigger.openMenu();
}
}

2
lib/content-services/src/lib/search/components/search-filter-container/search-filter-container.component.html
View File

@@ -37,12 +37,14 @@
<mat-dialog-actions class="adf-filter-actions">
<button mat-button
id="clear-filter-button"
[attr.aria-label]="'SEARCH.SEARCH_HEADER.CLEAR' | translate"
(click)="onClearButtonClick($event)">{{ 'SEARCH.SEARCH_HEADER.CLEAR' | translate | uppercase }}
</button>
<button mat-button
color="primary"
id="apply-filter-button"
class="adf-filter-apply-button"
[attr.aria-label]="'SEARCH.SEARCH_HEADER.APPLY' | translate"
(click)="onApply()">{{ 'SEARCH.SEARCH_HEADER.APPLY' | translate | uppercase }}
</button>
</mat-dialog-actions>

12
lib/content-services/src/lib/search/components/search-form/search-form.component.html
View File

@@ -1,7 +1,10 @@
<ng-container *ngIf="queryBuilder.searchForms | async as forms">
<ng-container *ngIf="forms.length === 1">
<button class="adf-search-form" disableRipple mat-button [title]="getSelected(forms) | translate">
<button class="adf-search-form"
disableRipple mat-button
[title]="getSelected(forms) | translate"
[attr.aria-label]="getSelected(forms) | translate">
<span class="adf-search-form-title">
{{ getSelected(forms) | translate }}
</span>
@@ -15,6 +18,7 @@
disableRipple
mat-button
[title]="getSelected(forms) | translate"
[attr.aria-label]="getSelected(forms) | translate"
[matMenuTriggerRestoreFocus]="true">
<span class="adf-search-form-title" >
@@ -25,7 +29,11 @@
</button>
<mat-menu #menu="matMenu" backdropClass="adf-search-form-menu">
<button mat-menu-item *ngFor="let form of forms" (click)="onSelectionChange(form)">
<button *ngFor="let form of forms"
mat-menu-item
tabindex="0"
[attr.aria-label]="form.name | translate"
(click)="onSelectionChange(form)">
{{form.name | translate}}
</button>
</mat-menu>