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

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>