[ADF-5543] Enable lint accessibility and resolve found issues

.eslintrc.js

@@ -181,8 +181,8 @@ module.exports = {
         },
         {
             files: ['*.html'],
-            extends: ['plugin:@angular-eslint/template/recommended'],
+            extends: ['plugin:@angular-eslint/template/recommended', 'plugin:@angular-eslint/template/accessibility'],
             rules: {}
-        }
+        },
     ]
 };

demo-shell/src/app/components/settings/host-settings.component.html

@@ -1,5 +1,5 @@
 <div class="adf-setting-container">
-    <form id="host-form" [formGroup]="form" (submit)="onSubmit(form.value)" (keydown)="keyDownFunction($event)">
+    <form id="host-form" tabindex="0" [formGroup]="form" (submit)="onSubmit(form.value)" (keydown)="keyDownFunction($event)">
         <mat-form-field *ngIf="showSelectProviders">
             <mat-select id="adf-provider-selector" [formControl]="providersControl">
                 <mat-option *ngFor="let provider of providers" [value]="provider">

lib/content-services/src/lib/category/categories-management/categories-management.component.html

@@ -34,6 +34,8 @@
     <ng-container *ngIf="isCRUDMode && (!existingCategoriesLoading || existingCategories)">
         <span class="adf-create-category-label"
             (click)="addCategory()"
+            tabindex="0"
+            (keyup.enter)="addCategory()"
             [hidden]="categoryNameControl.invalid || typing">
             {{ 'CATEGORIES_MANAGEMENT.GENERIC_CREATE' | translate : { name: categoryNameControl.value } }}
         </span>

lib/content-services/src/lib/content-user-info/content-user-info.component.html

@@ -2,6 +2,7 @@
     id="userinfo_container"
     [class.adf-userinfo-name-right]="showOnRight"
     (keyup)="onKeyPress($event)"
+    tabindex="0"
     class="adf-userinfo-container"
     *ngIf="canShow"
 >

lib/content-services/src/lib/document-list/components/library-name-column/library-name-column.component.ts

@@ -38,6 +38,8 @@ import { takeUntil } from 'rxjs/operators';
             class="adf-datatable-cell-value"
             title="{{ displayTooltip$ | async }}"
             (click)="onClick()"
+            tabindex="0"
+            (keyup.enter)="onClick()"
         >
             {{ displayText$ | async }}
         </span>

lib/content-services/src/lib/document-list/components/name-column/name-column.component.ts

@@ -37,6 +37,8 @@ import { takeUntil } from 'rxjs/operators';
             class="adf-datatable-cell-value"
             title="{{ node | adfNodeNameTooltip }}"
             (click)="onClick()"
+            tabindex="0"
+            (keyup.enter)="onClick()"
         >
             {{ displayText$ | async }}
         </span>

lib/content-services/src/lib/mock/search.component.mock.ts

@@ -119,7 +119,9 @@ export const errorJson = {
         >
             <ng-template let-data>
                 <ul id="autocomplete-search-result-list">
-                    <li *ngFor="let item of data?.list?.entries; let idx = index" (click)="elementClicked()">
+                    <li *ngFor="let item of data?.list?.entries; let idx = index" (click)="elementClicked()"
+                        tabindex="0"
+                        (keyup.enter)="elementClicked()">
                         <div id="result_option_{{ idx }}">
                             <span>{{ item?.entry.name }}</span>
                         </div>

lib/content-services/src/lib/search/components/reset-search.directive.spec.ts

@@ -23,7 +23,7 @@ import { SearchFacetFiltersService } from '../services/search-facet-filters.serv
 import { SearchQueryBuilderService } from '../services/search-query-builder.service';
 
 @Component({
-    template: `<button adf-reset-search></button>`
+    template: `<button adf-reset-search aria-label="reset-search"></button>`
 })
 class TestComponent {
 }

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

@@ -23,8 +23,10 @@
               (closed)="onClosed()">
         <div #filterContainer
               role="menuitem"
+             tabindex="0"
              (keydown.tab)="$event.stopPropagation();">
             <div (click)="$event.stopPropagation()"
+                 tabindex="0" (keyup.enter)="$event.stopPropagation()"
                  class="adf-filter-container">
                 <div class="adf-filter-title">{{ category?.name | translate }}</div>
                 <adf-search-widget-container (keypress)="onKeyPressed($event, menuTrigger)"

lib/content-services/src/lib/social/like.component.html

@@ -1,7 +1,7 @@
 <div id="adf-like-container" class="adf-like-container">
     <div class="adf-like">
         <span id="adf-like-{{nodeId}}" [ngClass]="{'adf-like-select': isLike ,'adf-like-grey': !isLike  }"
-              (click)="likeClick()">
+              (click)="likeClick()" tabindex="0" (keyup.enter)="likeClick()">
             <mat-icon>thumb_up</mat-icon>
         </span>
     </div>

lib/content-services/src/lib/tag/tag-actions.component.html

@@ -1,7 +1,10 @@
 <mat-list>
     <mat-list-item *ngFor="let currentEntry of tagsEntries; let idx = index">
-        <div class="adf-tag-actions-container" id="tag_delete_{{currentEntry.entry.tag}}" (click)="removeTag(currentEntry.entry.id)">
-            <div class="adf-tag-actions-delete-text" id="tag_name_{{currentEntry.entry.tag}}">{{currentEntry.entry.tag}}</div>
+        <div class="adf-tag-actions-container" id="tag_delete_{{currentEntry.entry.tag}}" tabindex="0"
+             (keyup.enter)="removeTag(currentEntry.entry.id)" (click)="removeTag(currentEntry.entry.id)">
+            <div class="adf-tag-actions-delete-text"
+                 id="tag_name_{{currentEntry.entry.tag}}">{{ currentEntry.entry.tag }}
+            </div>
             <mat-icon class="adf-tag-actions-delete-icon">delete</mat-icon>
         </div>
     </mat-list-item>
@@ -17,7 +20,9 @@
                     (keypress)="cleanErrorMsg()"
                     [(ngModel)]="newTagName"
                 />
-                <mat-hint data-automation-id="errorMessage" *ngIf="error" [ngStyle]="{'color': 'red'}" align="start">{{errorMsg}}</mat-hint>
+                <mat-hint data-automation-id="errorMessage" *ngIf="error" [ngStyle]="{'color': 'red'}"
+                          align="start">{{ errorMsg }}
+                </mat-hint>
             </mat-form-field>
         </td>
         <td>
@@ -28,7 +33,8 @@
                 (click)="addTag()"
                 [disabled]="disableAddTag"
                 mat-raised-button
-            >{{'TAG.BUTTON.ADD' | translate }}</button>
+            >{{ 'TAG.BUTTON.ADD' | translate }}
+            </button>
         </td>
     </tr>
 </table>

lib/content-services/src/lib/tag/tags-creator/tags-creator.component.html

@@ -1,19 +1,20 @@
 <div class="adf-tags-creation">
     <div *ngIf="tagNameControlVisible" class="adf-tag-name-field">
         <input #tagNameInput
-                class="adf-tag-search-field"
-                matInput
-                autocomplete="off"
-                [formControl]="tagNameControl"
-                (keyup.enter)="addTag()"
-                adf-auto-focus
-                placeholder="{{'TAG.TAGS_CREATOR.TAG_SEARCH_PLACEHOLDER' | translate}}"
+               class="adf-tag-search-field"
+               matInput
+               autocomplete="off"
+               [formControl]="tagNameControl"
+               (keyup.enter)="addTag()"
+               adf-auto-focus
+               placeholder="{{'TAG.TAGS_CREATOR.TAG_SEARCH_PLACEHOLDER' | translate}}"
         />
-        <mat-error *ngIf="tagNameControl.invalid && tagNameControl.touched">{{ tagNameErrorMessageKey | translate }}</mat-error>
+        <mat-error *ngIf="tagNameControl.invalid && tagNameControl.touched">{{ tagNameErrorMessageKey | translate }}
+        </mat-error>
     </div>
     <p
-       class="adf-no-tags-message"
-       *ngIf="showEmptyTagMessage">
+        class="adf-no-tags-message"
+        *ngIf="showEmptyTagMessage">
         {{ 'TAG.TAGS_CREATOR.NO_TAGS_CREATED' | translate }}
     </p>
     <div
@@ -38,9 +39,10 @@
     class="adf-existing-tags-panel"
     *ngIf="existingTagsPanelVisible">
     <span *ngIf="!spinnerVisible || existingTags"
-        class="adf-create-tag-label"
-        (click)="addTag()"
-        [hidden]="tagNameControl.invalid || typing">
+          class="adf-create-tag-label"
+          (click)="addTag()"
+          tabindex="0" (keyup.enter)="addTag()"
+          [hidden]="tagNameControl.invalid || typing">
         {{ 'TAG.TAGS_CREATOR.CREATE_TAG' | translate : { tag: tagNameControl.value } }}
     </span>
     <p *ngIf="!spinnerVisible && existingTags" class="adf-existing-tags-label">

lib/content-services/src/lib/tree-view/components/tree-view.component.html

@@ -1,26 +1,27 @@
 <mat-tree class="adf-tree-view-main" [dataSource]="dataSource"
           [treeControl]="treeControl" *ngIf="nodeId; else missingNodeId">
     <mat-tree-node class="adf-tree-view adf-tree-view-node"
-        *matTreeNodeDef="let treeNode" id="{{treeNode.name + '-tree-node'}}"
-        matTreeNodePadding [matTreeNodePaddingIndent]="15">
-        {{treeNode.name}}
+                   *matTreeNodeDef="let treeNode" id="{{treeNode.name + '-tree-node'}}"
+                   matTreeNodePadding [matTreeNodePaddingIndent]="15">
+        {{ treeNode.name }}
     </mat-tree-node>
     <mat-tree-node class="adf-tree-view adf-tree-view-node"
-        id="{{treeNode.name + '-tree-child-node'}}" *matTreeNodeDef="let treeNode; when: hasChild"
-        matTreeNodePadding [matTreeNodePaddingIndent]="15">
+                   id="{{treeNode.name + '-tree-child-node'}}" *matTreeNodeDef="let treeNode; when: hasChild"
+                   matTreeNodePadding [matTreeNodePaddingIndent]="15">
         <button matTreeNodeToggle id="{{'button-'+treeNode.name}}" (click)="onNodeClicked(treeNode.node)"
                 mat-icon-button [attr.aria-label]="'ADF-TREE-VIEW.ACCESSIBILITY.ARIA_LABEL' | translate: {
                     name:  treeNode.name
                 }">
             <mat-icon class="adf-tree-view-icon">
-                {{treeControl.isExpanded(treeNode) ? 'folder_open' : 'folder'}}
+                {{ treeControl.isExpanded(treeNode) ? 'folder_open' : 'folder' }}
             </mat-icon>
         </button>
-        <span class="adf-tree-view-label" matTreeNodeToggle (click)="onNodeClicked(treeNode.node)">{{treeNode.name}}</span>
+        <span class="adf-tree-view-label" matTreeNodeToggle (click)="onNodeClicked(treeNode.node)" tabindex="0"
+              (keyup.enter)="onNodeClicked(treeNode.node)">{{ treeNode.name }}</span>
     </mat-tree-node>
 </mat-tree>
 <ng-template #missingNodeId>
     <div id="adf-tree-view-missing-node">
-        {{'ADF-TREE-VIEW.MISSING-ID' | translate}}
+        {{ 'ADF-TREE-VIEW.MISSING-ID' | translate }}
     </div>
 </ng-template>

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

@@ -35,6 +35,8 @@
                 <div class="adf-tree-cell">
                     <span
                         class="adf-tree-cell-value"
+                        tabindex="0"
+                        (keyup.enter)="loadMoreSubnodes(node)"
                         (click)="loadMoreSubnodes(node)">
                         {{ 'ADF-TREE.LOAD-MORE-BUTTON' | translate: { name: loadMoreSuffix } }}
                     </span>
@@ -50,8 +52,8 @@
                 (contextmenu)="contextMenuSource = node">
                 <div class="adf-tree-expand-collapse-container">
                     <button *ngIf="node.hasChildren"
-                        class="adf-tree-expand-collapse-button"
-                        mat-icon-button>
+                            class="adf-tree-expand-collapse-button"
+                            mat-icon-button>
                         <mat-progress-spinner
                             color="primary"
                             mode="indeterminate"
@@ -68,12 +70,12 @@
                 </div>
                 <ng-container *ngIf="selectableNodes">
                     <mat-checkbox *ngIf="node.hasChildren; else noChildrenNodeCheckbox"
-                        color="primary"
-                        [id]="node.id"
-                        [checked]="descendantsAllSelected(node)"
-                        [indeterminate]="descendantsPartiallySelected(node)"
-                        (change)="onNodeSelected(node)"
-                        data-automation-id="has-children-node-checkbox">
+                                  color="primary"
+                                  [id]="node.id"
+                                  [checked]="descendantsAllSelected(node)"
+                                  [indeterminate]="descendantsPartiallySelected(node)"
+                                  (change)="onNodeSelected(node)"
+                                  data-automation-id="has-children-node-checkbox">
                     </mat-checkbox>
                     <ng-template #noChildrenNodeCheckbox>
                         <mat-checkbox
@@ -89,21 +91,23 @@
                     <span
                         class="adf-tree-cell-value"
                         [class.adf-tree-clickable-cell-value]="node.hasChildren"
+                        tabindex="0"
+                        (keyup.enter)="expandCollapseNode(node)"
                         (click)="expandCollapseNode(node)">
                         {{ node.nodeName }}
                     </span>
                 </div>
                 <div class="adf-tree-actions">
                     <button mat-icon-button
-                        [matMenuTriggerFor]="menu"
-                        [attr.id]="'action_menu_right_' + node.id">
+                            [matMenuTriggerFor]="menu"
+                            [attr.id]="'action_menu_right_' + node.id">
                         <mat-icon>more_vert</mat-icon>
                     </button>
                     <mat-menu #menu="matMenu">
                         <ng-template
                             [ngTemplateOutlet]="nodeActionsMenuTemplate"
                             [ngTemplateOutletContext]="{ node: node }">
-                    </ng-template>
+                        </ng-template>
                     </mat-menu>
                 </div>
             </mat-tree-node>

lib/content-services/src/lib/upload/components/file-uploading-dialog.component.html

@@ -73,7 +73,7 @@
             aria-describedby="confirmationDescription"
             class="adf-upload-dialog__confirmation"
             [class.adf-upload-dialog--hide]="!isConfirmation">
-                <p role="heading" id="confirmationTitle" class="adf-upload-dialog__confirmation--title">
+                <p role="heading" aria-level="2" id="confirmationTitle" class="adf-upload-dialog__confirmation--title">
                     {{ 'ADF_FILE_UPLOAD.CONFIRMATION.MESSAGE.TITLE' | translate }}
                 </p>
                 <p id="confirmationDescription" class="adf-upload-dialog__confirmation--text">

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

@@ -1,26 +1,27 @@
 <label class="adf-property-label"
-     [attr.data-automation-id]="'card-dateitem-label-' + property.key"
-     *ngIf="showProperty || isEditable"
-     [attr.for]="'card-view-dateitem-' + property.key"
-     [ngClass]="{'adf-property-readonly-value': isReadonlyProperty, 'adf-property-value-editable': editable}">
+       [attr.data-automation-id]="'card-dateitem-label-' + property.key"
+       *ngIf="showProperty || isEditable"
+       [attr.for]="'card-view-dateitem-' + property.key"
+       [ngClass]="{'adf-property-readonly-value': isReadonlyProperty, 'adf-property-value-editable': editable}">
     {{ property.label | translate }}
 </label>
-<div class="adf-property-value" [ngClass]="{'adf-property-value-editable': editable, 'adf-property-readonly-value': isReadonlyProperty}">
+<div class="adf-property-value"
+     [ngClass]="{'adf-property-value-editable': editable, 'adf-property-readonly-value': isReadonlyProperty}">
     <span *ngIf="!isEditable && !property.multivalued"
           [attr.data-automation-id]="'card-' + property.type + '-value-' + property.key">
         <span *ngIf="showProperty"
               [attr.data-automation-id]="'card-dateitem-' + property.key"
               (dblclick)="copyToClipboard(property.displayValue)"
               matTooltipShowDelay="1000"
-              [matTooltip]="'CORE.METADATA.ACTIONS.COPY_TO_CLIPBOARD' | translate">{{ property.displayValue}}</span>
+              [matTooltip]="'CORE.METADATA.ACTIONS.COPY_TO_CLIPBOARD' | translate">{{ property.displayValue }}</span>
     </span>
     <div *ngIf="isEditable && !property.multivalued" class="adf-dateitem-editable">
         <div class="adf-dateitem-editable-controls">
             <span class="adf-datepicker-toggle"
                   [attr.data-automation-id]="'datepicker-label-toggle-' + property.key"
-                  (click)="showDatePicker()">
+                  (click)="showDatePicker()" tabindex="0" (keyup.enter)="showDatePicker()">
                 <span *ngIf="showProperty; else elseEmptyValueBlock"
-                    [attr.data-automation-id]="'card-' + property.type + '-value-' + property.key">
+                      [attr.data-automation-id]="'card-' + property.type + '-value-' + property.key">
                     {{ property.displayValue }}</span>
             </span>
 
@@ -73,7 +74,8 @@
             </mat-chip>
         </mat-chip-list>
 
-        <div *ngIf="isEditable" class="adf-property-field adf-dateitem-editable-controls" (click)="showDatePicker()">
+        <div *ngIf="isEditable" class="adf-property-field adf-dateitem-editable-controls" (click)="showDatePicker()"
+             tabindex="0" (keyup.enter)="showDatePicker()">
             <input
                 class="adf-invisible-date-input"
                 [attr.tabIndex]="-1"

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

@@ -11,6 +11,8 @@
     <ng-template #clickableTemplate>
         <span class="adf-mapitem-clickable-value"
               (click)="clicked()"
+              tabindex="0"
+              (keyup.enter)="clicked()"
               [attr.data-automation-id]="'card-mapitem-value-' + property.key">
             <span *ngIf="showProperty; else emptyValueTemplate">{{ property.displayValue }}</span>
         </span>

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

@@ -93,7 +93,9 @@
         class="adf-textitem-clickable"
         [ngClass]="{ 'adf-property-read-only': !isEditable }"
         [attr.data-automation-id]="'card-textitem-toggle-' + property.key"
-        (click)="clicked()">
+         tabindex="0"
+         (keyup.enter)="clicked()"
+         (click)="clicked()">
         <mat-form-field class="adf-property-field adf-card-textitem-field" appearance="standard"
             [floatLabel]="'never'">
             <mat-label *ngIf="showProperty || isEditable" [attr.data-automation-id]="'card-textitem-label-' + property.key" class="adf-property-label">

lib/core/src/lib/datatable/components/columns-selector/columns-selector.component.html

@@ -1,6 +1,8 @@
 <div
     class="adf-columns-selector"
     data-automation-id="adf-columns-selector"
+    tabindex="0"
+    (keyup.enter)="$event.stopPropagation()"
     (click)="$event.stopPropagation();"
 >
     <div class="adf-columns-selector-header">

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

@@ -99,7 +99,9 @@
                     *ngIf="isResizingEnabled && col.resizable"
                     [ngClass]="hoveredHeaderColumnIndex === columnIndex && !isResizing || resizingColumnIndex === columnIndex ? 'adf-datatable__resize-handle-visible' : 'adf-datatable__resize-handle-hidden'"
                     adf-resize-handle
+                    tabindex="0"
                     (click)="$event.stopPropagation()"
+                    (keyup.enter)="$event.stopPropagation()"
                     class="adf-datatable__resize-handle"
                     [resizableContainer]="resizableElement">
                     <div class="adf-datatable__resize-handle--divider"></div>
@@ -197,8 +199,9 @@
                     </mat-menu>
                 </div>
 
-                <label *ngIf="multiselect" class="adf-datatable-cell adf-datatable-checkbox">
+                <label *ngIf="multiselect" for="select-file" class="adf-datatable-cell adf-datatable-checkbox">
                     <mat-checkbox
+                        id="select-file"
                         [checked]="row.isSelected"
                         [attr.aria-checked]="row.isSelected"
                         role="checkbox"
@@ -215,6 +218,7 @@
                      [attr.aria-selected]="row.isSelected"
                      [attr.aria-label]="col.title ? (col.title | translate) : null"
                      (click)="onRowClick(row, $event)"
+                     tabindex="0"
                      (keydown.enter)="onEnterKeyPressed(row, $any($event))"
                      [adf-context-menu]="getContextMenuActions(row, col)"
                      [adf-context-menu-enabled]="contextMenu"

lib/core/src/lib/form/components/form-renderer.component.html

@@ -30,7 +30,7 @@
                             (click)="onExpanderClicked(currentRootElement)">
                         <mat-icon>{{ currentRootElement?.isExpanded ? 'expand_more' : 'expand_less' }}</mat-icon>
                     </button>
-                    <span (click)="onExpanderClicked(currentRootElement)"
+                    <span (click)="onExpanderClicked(currentRootElement)" tabindex=0 (keyup.enter)="onExpanderClicked(currentRootElement)"
                           [id]="'container-header-label-'+currentRootElement?.id">{{currentRootElement.name | translate }}</span>
                 </h4>
             </div>