From 031f00be3185502b912e426b8b676f86fdf06dad Mon Sep 17 00:00:00 2001 From: MichalKinas <113341662+MichalKinas@users.noreply.github.com> Date: Tue, 18 Oct 2022 15:00:49 +0200 Subject: [PATCH] [ACS-3552] Fix accessibility issues from CSV file (#7887) --- .../process-service/process-service.component.html | 8 ++++++-- .../content-node-share.dialog.html | 6 +++++- lib/content-services/src/lib/i18n/en.json | 1 + .../search-check-list.component.html | 1 + .../search-date-range.component.html | 2 ++ .../search-facet-field.component.html | 2 +- .../search-facet-chip.component.html | 2 ++ .../search-facet-chip/search-facet-chip.component.ts | 4 ++++ .../search-filter-chips.component.html | 2 +- .../search-filter-menu-card.component.html | 3 +++ .../search-widget-chip.component.html | 2 ++ .../search-widget-chip.component.ts | 4 ++++ .../search-filter-container.component.html | 2 ++ .../search-form/search-form.component.html | 12 ++++++++++-- .../card-view-textitem.component.html | 4 ++++ lib/core/src/lib/comments/comments.component.html | 9 +++++++-- lib/core/src/lib/i18n/en.json | 3 ++- .../src/lib/language-menu/language-menu.component.ts | 1 + .../src/lib/pagination/pagination.component.html | 2 +- .../components/pdf-viewer-thumb.component.html | 3 ++- .../components/pdf-viewer-thumbnails.component.ts | 10 +++++++++- .../lib/viewer/components/pdf-viewer.component.html | 1 + 22 files changed, 71 insertions(+), 13 deletions(-) diff --git a/demo-shell/src/app/components/process-service/process-service.component.html b/demo-shell/src/app/components/process-service/process-service.component.html index 6990f98e2a..638ed24c35 100644 --- a/demo-shell/src/app/components/process-service/process-service.component.html +++ b/demo-shell/src/app/components/process-service/process-service.component.html @@ -21,10 +21,12 @@ assignment -
Tasks
+
Tasks
 assessment -
Processes
+
Processes
 -
+
{{ 'SHARE.DIALOG-TITLE' | translate }} {{ fileName }}
@@ -28,12 +28,15 @@ matInput cdkFocusInitial placeholder="{{ 'SHARE.PUBLIC-LINK' | translate }}" + [attr.aria-label]="'SHARE.PUBLIC-LINK' | translate" formControlName="sharedUrl" readonly="readonly"> content_copy @@ -69,6 +72,7 @@ #dateTimePickerInput matInput placeholder="{{ 'SHARE.EXPIRATION-LABEL' | translate }}" + [attr.aria-label]="'SHARE.EXPIRATION-LABEL' | translate" [min]="minDate" formControlName="time" [matDatetimepicker]="datetimePicker" /> diff --git a/lib/content-services/src/lib/i18n/en.json b/lib/content-services/src/lib/i18n/en.json index a98d74a50d..56ecf37e51 100644 --- a/lib/content-services/src/lib/i18n/en.json +++ b/lib/content-services/src/lib/i18n/en.json @@ -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", diff --git a/lib/content-services/src/lib/search/components/search-check-list/search-check-list.component.html b/lib/content-services/src/lib/search/components/search-check-list/search-check-list.component.html index e21a26f046..c5a5df9594 100644 --- a/lib/content-services/src/lib/search/components/search-check-list/search-check-list.component.html +++ b/lib/content-services/src/lib/search/components/search-check-list/search-check-list.component.html @@ -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">
diff --git a/lib/content-services/src/lib/search/components/search-filter-chips/search-facet-chip/search-facet-chip.component.html b/lib/content-services/src/lib/search/components/search-filter-chips/search-facet-chip/search-facet-chip.component.html index 6d264b1da1..bed1264a8e 100644 --- a/lib/content-services/src/lib/search/components/search-filter-chips/search-facet-chip/search-facet-chip.component.html +++ b/lib/content-services/src/lib/search/components/search-filter-chips/search-facet-chip/search-facet-chip.component.html @@ -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"> diff --git a/lib/content-services/src/lib/search/components/search-filter-chips/search-facet-chip/search-facet-chip.component.ts b/lib/content-services/src/lib/search/components/search-filter-chips/search-facet-chip/search-facet-chip.component.ts index 84fed67899..804b7bd374 100644 --- a/lib/content-services/src/lib/search/components/search-filter-chips/search-facet-chip/search-facet-chip.component.ts +++ b/lib/content-services/src/lib/search/components/search-filter-chips/search-facet-chip/search-facet-chip.component.ts @@ -64,4 +64,8 @@ export class SearchFacetChipComponent { this.facetFieldComponent.submitValues(); this.menuTrigger.closeMenu(); } + + onEnterKeydown(): void { + this.menuTrigger.openMenu(); + } } diff --git a/lib/content-services/src/lib/search/components/search-filter-chips/search-filter-chips.component.html b/lib/content-services/src/lib/search/components/search-filter-chips/search-filter-chips.component.html index daa3e1388e..d6b1077c60 100644 --- a/lib/content-services/src/lib/search/components/search-filter-chips/search-filter-chips.component.html +++ b/lib/content-services/src/lib/search/components/search-filter-chips/search-filter-chips.component.html @@ -1,4 +1,4 @@ - + diff --git a/lib/content-services/src/lib/search/components/search-filter-chips/search-filter-menu-card/search-filter-menu-card.component.html b/lib/content-services/src/lib/search/components/search-filter-chips/search-filter-menu-card/search-filter-menu-card.component.html index 420b8ad7d5..dba4c3dac0 100644 --- a/lib/content-services/src/lib/search/components/search-filter-chips/search-filter-menu-card/search-filter-menu-card.component.html +++ b/lib/content-services/src/lib/search/components/search-filter-chips/search-filter-menu-card/search-filter-menu-card.component.html @@ -2,6 +2,9 @@
close diff --git a/lib/content-services/src/lib/search/components/search-filter-chips/search-widget-chip/search-widget-chip.component.html b/lib/content-services/src/lib/search/components/search-filter-chips/search-widget-chip/search-widget-chip.component.html index 1b076b0e1a..05fdf16c8a 100644 --- a/lib/content-services/src/lib/search/components/search-filter-chips/search-widget-chip/search-widget-chip.component.html +++ b/lib/content-services/src/lib/search/components/search-filter-chips/search-widget-chip/search-widget-chip.component.html @@ -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"> diff --git a/lib/content-services/src/lib/search/components/search-filter-chips/search-widget-chip/search-widget-chip.component.ts b/lib/content-services/src/lib/search/components/search-filter-chips/search-widget-chip/search-widget-chip.component.ts index f370305291..f67812c9d0 100644 --- a/lib/content-services/src/lib/search/components/search-filter-chips/search-widget-chip/search-widget-chip.component.ts +++ b/lib/content-services/src/lib/search/components/search-filter-chips/search-widget-chip/search-widget-chip.component.ts @@ -65,4 +65,8 @@ export class SearchWidgetChipComponent { this.widgetContainerComponent.applyInnerWidget(); this.menuTrigger.closeMenu(); } + + onEnterKeydown(): void { + this.menuTrigger.openMenu(); + } } diff --git a/lib/content-services/src/lib/search/components/search-filter-container/search-filter-container.component.html b/lib/content-services/src/lib/search/components/search-filter-container/search-filter-container.component.html index 8aafaaf9fe..9629402d66 100644 --- a/lib/content-services/src/lib/search/components/search-filter-container/search-filter-container.component.html +++ b/lib/content-services/src/lib/search/components/search-filter-container/search-filter-container.component.html @@ -37,12 +37,14 @@ diff --git a/lib/content-services/src/lib/search/components/search-form/search-form.component.html b/lib/content-services/src/lib/search/components/search-form/search-form.component.html index 59027b9c70..3dd0dd86e6 100644 --- a/lib/content-services/src/lib/search/components/search-form/search-form.component.html +++ b/lib/content-services/src/lib/search/components/search-form/search-form.component.html @@ -1,7 +1,10 @@ - - diff --git a/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.html b/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.html index 137de56463..42b9bce4d4 100644 --- a/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.html +++ b/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.html @@ -13,6 +13,7 @@ *ngIf="!property.multiline" class="adf-property-value" [placeholder]="property.default" + [attr.aria-label]="property.label | translate" [formControl]="textInput" (dblclick)="copyToClipboard(property.displayValue)" matTooltipShowDelay="1000" @@ -26,6 +27,7 @@ [cdkAutosizeMaxRows]="5" class="adf-property-value" [placeholder]="property.default" + [attr.aria-label]="property.label | translate" [formControl]="textInput" [attr.data-automation-id]="'card-textitem-value-' + property.key">
diff --git a/lib/core/src/lib/i18n/en.json b/lib/core/src/lib/i18n/en.json index 5088b7ec3d..f2ac097fad 100644 --- a/lib/core/src/lib/i18n/en.json +++ b/lib/core/src/lib/i18n/en.json @@ -405,7 +405,8 @@ }, "PAGE_LABEL": { "SHOWING": "Showing", - "OF": "of" + "OF": "of", + "PAGE_SELECTOR_LABEL": "Page selector" }, "LOADING": "Loading", "UNKNOWN_FORMAT": "Couldn't load preview. Unknown format.", diff --git a/lib/core/src/lib/language-menu/language-menu.component.ts b/lib/core/src/lib/language-menu/language-menu.component.ts index 13643274b4..cdd1efa75f 100644 --- a/lib/core/src/lib/language-menu/language-menu.component.ts +++ b/lib/core/src/lib/language-menu/language-menu.component.ts @@ -26,6 +26,7 @@ import { LanguageItem } from '../services/language-item.interface'; ` }) diff --git a/lib/core/src/lib/pagination/pagination.component.html b/lib/core/src/lib/pagination/pagination.component.html index 11e852ded2..1ceebe48ec 100644 --- a/lib/core/src/lib/pagination/pagination.component.html +++ b/lib/core/src/lib/pagination/pagination.component.html @@ -1,5 +1,5 @@ -
+
{{ itemRangeText }} diff --git a/lib/core/src/lib/viewer/components/pdf-viewer-thumb.component.html b/lib/core/src/lib/viewer/components/pdf-viewer-thumb.component.html index a61d175504..cbecdc8333 100644 --- a/lib/core/src/lib/viewer/components/pdf-viewer-thumb.component.html +++ b/lib/core/src/lib/viewer/components/pdf-viewer-thumb.component.html @@ -1,5 +1,6 @@ - diff --git a/lib/core/src/lib/viewer/components/pdf-viewer-thumbnails.component.ts b/lib/core/src/lib/viewer/components/pdf-viewer-thumbnails.component.ts index a73e1d9e7f..2844a8b18d 100644 --- a/lib/core/src/lib/viewer/components/pdf-viewer-thumbnails.component.ts +++ b/lib/core/src/lib/viewer/components/pdf-viewer-thumbnails.component.ts @@ -19,7 +19,7 @@ import { Component, Input, ContentChild, TemplateRef, HostListener, OnInit, AfterViewInit, ElementRef, OnDestroy, ViewEncapsulation, EventEmitter, Output, Inject, ViewChildren, QueryList } from '@angular/core'; -import { ESCAPE, UP_ARROW, DOWN_ARROW } from '@angular/cdk/keycodes'; +import { ESCAPE, UP_ARROW, DOWN_ARROW, TAB } from '@angular/cdk/keycodes'; import { DOCUMENT } from '@angular/common'; import { FocusKeyManager } from '@angular/cdk/a11y'; import { PdfThumbComponent } from './pdf-viewer-thumb.component'; @@ -68,6 +68,14 @@ export class PdfThumbListComponent implements OnInit, AfterViewInit, OnDestroy { this.pdfViewer.currentPageNumber += 1; } + if (keyCode === TAB) { + if (this.canSelectNextItem()) { + this.pdfViewer.currentPageNumber += 1; + } else { + this.close.emit(); + } + } + if (keyCode === ESCAPE) { this.close.emit(); } diff --git a/lib/core/src/lib/viewer/components/pdf-viewer.component.html b/lib/core/src/lib/viewer/components/pdf-viewer.component.html index a68ea05312..1c73fe4cfc 100644 --- a/lib/core/src/lib/viewer/components/pdf-viewer.component.html +++ b/lib/core/src/lib/viewer/components/pdf-viewer.component.html @@ -77,6 +77,7 @@ data-automation-id="adf-page-selector" pattern="-?[0-9]*(\.[0-9]+)?" value="{{ displayPage }}" + [attr.aria-label]="'ADF_VIEWER.PAGE_LABEL.PAGE_SELECTOR_LABEL' | translate" (keyup.enter)="inputPage(page.value)"> {{ 'ADF_VIEWER.PAGE_LABEL.OF' | translate }} {{ totalPages }}