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

demo-shell/src/app/components/process-service/process-service.component.html

@@ -21,10 +21,12 @@
                             <mat-expansion-panel-header>
                                 <mat-panel-title>
                                     <mat-icon>assignment</mat-icon>
-                                    <div class="app-accordion-title-padding">Tasks</div>
+                                    <div id="tasks-accordion-title" class="app-accordion-title-padding">Tasks</div>
                                 </mat-panel-title>
                             </mat-expansion-panel-header>
                             <adf-task-filters [filterParam]="filterSelected"
+                                              role="group"
+                                              aria-labelledby="tasks-accordion-title"
                                               [appId]="appId"
                                               [showIcon]="showTaskFilterIcon"
                                               (filterClicked)="onTaskFilterClick($event)"
@@ -138,11 +140,13 @@
                             <mat-expansion-panel-header>
                                 <mat-panel-title>
                                     <mat-icon>assessment</mat-icon>
-                                    <div class="app-accordion-title-padding">Processes</div>
+                                    <div id="process-accordion-title" class="app-accordion-title-padding">Processes</div>
                                 </mat-panel-title>
                             </mat-expansion-panel-header>
                             <adf-process-instance-filters
                                     #activitiProcessFilter
+                                    role="group"
+                                    aria-labelledby="process-accordion-title"
                                     [appId]="appId"
                                     [filterParam]="filterSelected"
                                     [showIcon]="showProcessFilterIcon"

lib/content-services/src/lib/content-node-share/content-node-share.dialog.html

@@ -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" />

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",

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">
         <div matTooltip="{{ option.name | translate }}"

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

@@ -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"

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

@@ -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>

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">
 

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();
+    }
 }

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

@@ -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>

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

@@ -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

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">
     <span class="adf-search-filter-placeholder">

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();
+    }
 }

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

@@ -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>

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

@@ -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>

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"></textarea>
             <button mat-button
@@ -73,6 +75,7 @@
             <input matInput
                    class="adf-property-value"
                    [placeholder]="editedValue ? '' : property.default | translate"
+                   [attr.aria-label]="property.label | translate"
                    [matChipInputFor]="chipList"
                    [matChipInputAddOnBlur]="true"
                    (matChipInputTokenEnd)="addValueToList($event)"
@@ -97,6 +100,7 @@
                    class="adf-property-value"
                    [ngClass]="{ 'adf-textitem-clickable-value': !isEditable }"
                    [placeholder]="property.default"
+                   [attr.aria-label]="property.label | translate"
                    [(ngModel)]="editedValue"
                    (blur)="update()"
                    (keydown.enter)="update()"

lib/core/src/lib/comments/comments.component.html

@@ -4,7 +4,12 @@
     </div>
     <div class="adf-comments-input-container" *ngIf="!isReadOnly()">
             <mat-form-field class="adf-full-width">
-                <textarea (keydown.escape)="clear($event)" matInput id="comment-input" placeholder="{{'COMMENTS.ADD' | translate}}" [(ngModel)]="message"></textarea>
+                <textarea id="comment-input"
+                    matInput
+                    [attr.aria-label]="'COMMENTS.ADD' | translate"
+                    placeholder="{{'COMMENTS.ADD' | translate}}"
+                    [(ngModel)]="message"
+                    (keydown.escape)="clear($event)"></textarea>
             </mat-form-field>
 
             <div class="adf-comments-input-actions">
@@ -23,4 +28,4 @@
         <adf-comment-list [comments]="comments">
         </adf-comment-list>
     </div>
-</div>
+</div>

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.",

lib/core/src/lib/language-menu/language-menu.component.ts

@@ -26,6 +26,7 @@ import { LanguageItem } from '../services/language-item.interface';
         <button
             mat-menu-item
             *ngFor="let language of languages$ | async"
+            [attr.lang]="language.key"
             (click)="changeLanguage(language)">{{language.label}}</button>
     `
 })

lib/core/src/lib/pagination/pagination.component.html

@@ -1,5 +1,5 @@
 <ng-container *ngIf="hasItems">
-    <div class="adf-pagination__block adf-pagination__range-block">
+    <div class="adf-pagination__block adf-pagination__range-block" aria-live="polite">
         <span class="adf-pagination__range">
             {{ itemRangeText }}
         </span>

lib/core/src/lib/viewer/components/pdf-viewer-thumb.component.html

@@ -1,5 +1,6 @@
 <ng-container *ngIf="image$ | async as image">
-    <img [src]="image" [alt]="'ADF_VIEWER.SIDEBAR.THUMBNAILS.PAGE' | translate: { pageNum: page.id }"
+    <img [src]="image" role="button"
+        [alt]="'ADF_VIEWER.SIDEBAR.THUMBNAILS.PAGE' | translate: { pageNum: page.id }"
         title="{{ 'ADF_VIEWER.SIDEBAR.THUMBNAILS.PAGE' | translate: { pageNum: page.id } }}"
         [attr.aria-label]="'ADF_VIEWER.SIDEBAR.THUMBNAILS.PAGE' | translate: { pageNum: page.id }">
 </ng-container>

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();
         }

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)">
             <span>{{ 'ADF_VIEWER.PAGE_LABEL.OF' | translate }} {{ totalPages }}</span>
         </div>