[ACS-3548] Accessibility issues (#7939)

* Accessibility issues

* requested changes

* breadcrumb changes

* review comments resolved of mattooltip

* e2e test cases fixed

e2e/process-services/pages/task-details.page.ts

@@ -273,7 +273,7 @@ export class TaskDetailsPage {
     }
 
     async checkIsEmptyCommentListDisplayed(): Promise<void> {
-        const emptyList = element(by.cssContainingText('h1[id="comment-header"]', '(0)'));
+        const emptyList = element(by.cssContainingText('div[id="comment-header"]', '(0)'));
         await BrowserVisibility.waitUntilElementIsVisible(emptyList);
     }
 

lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.html

@@ -5,8 +5,8 @@
                              [expanded]="canExpandProperties()"
                              [attr.data-automation-id]="'adf-metadata-group-properties'">
             <mat-expansion-panel-header>
-                <mat-panel-title>
+                <mat-panel-title class="adf-metadata-properties-title">
-                    <h1 class="adf-metadata-properties-title">{{ 'CORE.METADATA.BASIC.HEADER' | translate }}</h1>
+                    {{ 'CORE.METADATA.BASIC.HEADER' | translate }}
                 </mat-panel-title>
             </mat-expansion-panel-header>
             <adf-card-view

lib/content-services/src/lib/i18n/en.json

@@ -413,7 +413,8 @@
       "ADD-ACTION": "ADD",
       "CLOSE-ACTION": "CANCEL",
       "BASE-DIALOG-TITLE": "Search a group or people to add...",
-      "EVERYONE": "EVERYONE"
+      "EVERYONE": "EVERYONE",
+      "USER-GROUP-LIST": "User or Group List"
     },
     "COLUMN": {
       "NAME": "Users and Groups ({{ count }})",
@@ -428,7 +429,8 @@
       "DIRECT-PERMISSIONS": "Directly Applied Permission",
       "INHERITED-PERMISSIONS": "Inherited Permission",
       "INHERITED-SUBTITLE": "{{count}} users or groups are inheriting permission from a parent folder",
-      "SELECT-ROLE": "Select role"
+      "SELECT-ROLE": "Select role",
+      "INHERITED_PERMISSION_TOGGLE": "Toggle Inherited Permission"
     },
     "MESSAGE": {
       "EMPTY-PERMISSION": "No users/groups",

lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-panel.component.html

@@ -4,6 +4,7 @@
            id="searchInput"
            [formControl]="searchInput"
            type="text"
+           title="{{'PERMISSION_MANAGER.ADD-PERMISSION.SEARCH' | translate}}"
            placeholder="{{'PERMISSION_MANAGER.ADD-PERMISSION.SEARCH' | translate}}"
            [value]="searchedWord">
 
@@ -34,7 +35,8 @@
             class="adf-permission-result-list"
             [class.adf-permission-result-list-search]="searchedWord.length === 0">
     <ng-template let-data>
-        <mat-selection-list class="adf-permission-result-list-elements" (keydown.control.a)="onSelectionChange()"
+        <mat-selection-list class="adf-permission-result-list-elements"
+                            title="{{'PERMISSION_MANAGER.ADD-PERMISSION.USER-GROUP-LIST' | translate}}"
                             (selectionChange)="onSelectionChange()">
             <mat-list-option id="adf-add-permission-group-everyone"
                              class="adf-list-option-item"

lib/content-services/src/lib/permission-manager/components/permission-list/permission-list.component.html

@@ -25,6 +25,7 @@
 
                     <mat-slide-toggle
                         class="adf-inherit-toggle"
+                        title="{{'PERMISSION_MANAGER.LABELS.INHERITED_PERMISSION_TOGGLE' | translate }}"
                         color="primary"
                         data-automation-id="adf-inherit-toggle-button"
                         [checked]="model.node.permissions.isInheritanceEnabled"
@@ -72,7 +73,7 @@
 
                 <button
                     mat-button
-                    [matTooltip]="'PERMISSION_MANAGER.ACTION.ADD-PERMISSION' | translate"
+                    title="{{'PERMISSION_MANAGER.ACTION.ADD-PERMISSION' | translate}}"
                     (click)="openAddPermissionDialog()"
                     data-automation-id="adf-add-permission-button">
                     <mat-icon>person_add_outline</mat-icon>
@@ -80,7 +81,7 @@
 
                 <button
                     mat-button
-                    [matTooltip]="'PERMISSION_MANAGER.ACTION.DELETE' | translate"
+                    title="{{'PERMISSION_MANAGER.ACTION.DELETE' | translate}}"
                     [disabled]="!selectedPermissions?.length"
                     (click)="deleteSelection()"
                     data-automation-id="adf-delete-selected-permission">

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

@@ -1,4 +1,5 @@
-<div role="listbox" id="adf-search-results-content" [ngClass]="_classList" #panel>
+<div role="listbox" id="adf-search-results-content" title="{{'PERMISSION_MANAGER.ADD-PERMISSION.USER-GROUP-LIST' | translate}}"
+    [ngClass]="_classList" #panel>
     <ng-template
         [ngTemplateOutlet]="template"
         [ngTemplateOutletContext]="{ $implicit: results }">

lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.html

@@ -12,6 +12,7 @@
             <input matInput
                    *ngIf="!property.multiline"
                    class="adf-property-value"
+                   title="{{property.label | translate }}"
                    [placeholder]="property.default"
                    [attr.aria-label]="property.label | translate"
                    [formControl]="textInput"
@@ -22,6 +23,7 @@
                    [attr.data-automation-id]="'card-textitem-value-' + property.key">
             <textarea matInput
                       *ngIf="property.multiline"
+                      title="{{property.label | translate }}"
                       [cdkTextareaAutosize]="true"
                       [cdkAutosizeMaxRows]="1"
                       [cdkAutosizeMaxRows]="5"
@@ -74,6 +76,7 @@
                         [floatLabel]="'never'">
             <input matInput
                    class="adf-property-value"
+                   title="{{property.label | translate }}"
                    [placeholder]="editedValue ? '' : property.default | translate"
                    [attr.aria-label]="property.label | translate"
                    [matChipInputFor]="chipList"
@@ -98,6 +101,7 @@
             <input matInput
                    [type]=property.inputType
                    class="adf-property-value"
+                   title="{{property.label | translate }}"
                    [ngClass]="{ 'adf-textitem-clickable-value': !isEditable }"
                    [placeholder]="property.default"
                    [attr.aria-label]="property.label | translate"

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

@@ -1,7 +1,7 @@
 <div class="adf-comments-container">
-    <h1 id="comment-header" class="adf-comments-header">
+    <div id="comment-header" class="adf-comments-header">
         {{'COMMENTS.HEADER' | translate: { count: comments?.length} }}
-    </h1>
+    </div>
     <div class="adf-comments-input-container" *ngIf="!isReadOnly()">
             <mat-form-field class="adf-full-width">
                 <textarea id="comment-input"

lib/core/src/lib/datatable/components/datatable/datatable.component.html

@@ -34,6 +34,7 @@
                  [attr.data-automation-id]="'auto_id_' + col.key"
                  [class.adf-datatable__header--sorted-asc]="isColumnSorted(col, 'asc')"
                  [class.adf-datatable__header--sorted-desc]="isColumnSorted(col, 'desc')"
+                 [attr.aria-label]="col.title | translate"
                  (click)="onColumnHeaderClick(col)"
                  (keyup.enter)="onColumnHeaderClick(col)"
                  role="columnheader"