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

2025-07-24 17:32:15 +00:00 · 2022-10-18 15:00:49 +02:00
parent 122aa805a2
commit 031f00be31
22 changed files with 71 additions and 13 deletions
--- 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 @@
                            <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"
--- a/lib/content-services/src/lib/content-node-share/content-node-share.dialog.html
+++ b/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" />
--- 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",
--- 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">
        <div matTooltip="{{ option.name | translate }}"
--- a/lib/content-services/src/lib/search/components/search-date-range/search-date-range.component.html
+++ b/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"
--- a/lib/content-services/src/lib/search/components/search-facet-field/search-facet-field.component.html
+++ b/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>
--- 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">

--- 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();
+    }
 }
--- 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 @@
-<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>
--- 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 @@
    <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
--- 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">
    <span class="adf-search-filter-placeholder">
--- 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();
+    }
 }
--- 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 @@
            <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>
--- 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 @@
 <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>
--- 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"></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()"
--- a/lib/core/src/lib/comments/comments.component.html
+++ b/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">
--- 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.",
--- 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';
        <button
            mat-menu-item
            *ngFor="let language of languages$ | async"
+            [attr.lang]="language.key"
            (click)="changeLanguage(language)">{{language.label}}</button>
    `
 })
--- a/lib/core/src/lib/pagination/pagination.component.html
+++ b/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>
--- 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 @@
 <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>
--- 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();
        }
--- 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)">
            <span>{{ 'ADF_VIEWER.PAGE_LABEL.OF' | translate }} {{ totalPages }}</span>
        </div>