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

.eslintrc.js

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

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/cli/.eslintrc.json

@@ -4,7 +4,7 @@
   "overrides": [
     {
       "files": ["*.ts"],
-      "extends": ["plugin:@nrwl/nx/angular", "plugin:@angular-eslint/template/process-inline-templates"],
+      "extends": ["plugin:@nrwl/nx/angular"],
       "rules": {
         "prefer-arrow/prefer-arrow-functions": "off",
         "@typescript-eslint/no-var-requires": "off",

lib/content-services/.eslintrc.json

@@ -4,7 +4,7 @@
   "overrides": [
     {
       "files": ["*.ts"],
-      "extends": ["plugin:@nrwl/nx/angular", "plugin:@angular-eslint/template/process-inline-templates"],
+      "extends": ["plugin:@nrwl/nx/angular"],
       "rules": {
         "jsdoc/newline-after-description": "warn",
         "@typescript-eslint/naming-convention": "warn",

lib/content-services/src/lib/breadcrumb/breadcrumb.component.html

@@ -27,6 +27,7 @@
         *ngIf="hasPreviousNodes()"
         class="adf-breadcrumb-dropdown-path"
         tabindex="-1"
+        role="button"
     >
         <mat-option
             *ngFor="let node of previousNodes"

lib/content-services/src/lib/breadcrumb/dropdown-breadcrumb.component.html

@@ -20,6 +20,7 @@
             *ngIf="hasPreviousNodes()"
             class="adf-dropdown-breadcrumb-path-select"
             tabindex="-1"
+            role="button"
             data-automation-id="dropdown-breadcrumb-path"
             aria-labelledby="dropdown-breadcrumb-button">
 

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

@@ -34,6 +34,9 @@
     <ng-container *ngIf="isCRUDMode && (!existingCategoriesLoading || existingCategories)">
         <span class="adf-create-category-label"
             (click)="addCategory()"
+            tabindex="0"
+            role="button"
+            (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,8 @@
     id="userinfo_container"
     [class.adf-userinfo-name-right]="showOnRight"
     (keyup)="onKeyPress($event)"
+    tabindex="0"
+    role="button"
     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,13 @@ 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"
+                        role="button"
+                        (keyup.enter)="elementClicked()"
+                    >
                         <div id="result_option_{{ idx }}">
                             <span>{{ item?.entry.name }}</span>
                         </div>

lib/content-services/src/lib/permission-manager/components/pop-over.directive.spec.ts

@@ -23,8 +23,14 @@ import { OverlayModule } from '@angular/cdk/overlay';
 
 @Component({
     template: `
-        <div [adf-pop-over]="popOver" [autofocusedElementSelector]="'#test'" [target]="target" #target tabindex="0" [panelClass]="'adf-popover-test'">
-        </div>
+        <div
+            [adf-pop-over]="popOver"
+            [autofocusedElementSelector]="'#test'"
+            [target]="target"
+            #target
+            tabindex="0"
+            [panelClass]="'adf-popover-test'"
+        ></div>
         <ng-template #popOver>
             <div id="test" tabindex="0"></div>
         </ng-template>
@@ -38,10 +44,7 @@ describe('PopOverDirective', () => {
     beforeEach(() => {
         TestBed.configureTestingModule({
             imports: [OverlayModule],
-            declarations: [
-                PopOverDirective,
-                PopOverTestComponent
-            ]
+            declarations: [PopOverDirective, PopOverTestComponent]
         });
         fixture = TestBed.createComponent(PopOverTestComponent);
     });
@@ -56,37 +59,45 @@ describe('PopOverDirective', () => {
     it('should focus element indicated by autofocusedElementSelector on pop over trigger enter keyup', () => {
         const popOverTrigger = fixture.debugElement.query(By.directive(PopOverDirective)).nativeElement;
         fixture.detectChanges();
-        popOverTrigger.dispatchEvent(new KeyboardEvent('keyup', {
-            key: 'Enter'
-        }));
+        popOverTrigger.dispatchEvent(
+            new KeyboardEvent('keyup', {
+                key: 'Enter'
+            })
+        );
         expect(fixture.debugElement.query(By.css('#test')).nativeElement).toBe(document.activeElement);
     });
 
     it('should focus pop over trigger on document esc keyup if pop over is open', () => {
         const popOverTrigger = fixture.debugElement.query(By.directive(PopOverDirective)).nativeElement;
         fixture.detectChanges();
         popOverTrigger.click();
-        document.dispatchEvent(new KeyboardEvent('keyup', {
-            key: 'Escape'
-        }));
+        document.dispatchEvent(
+            new KeyboardEvent('keyup', {
+                key: 'Escape'
+            })
+        );
         expect(popOverTrigger).toBe(document.activeElement);
     });
 
     it('should not focus pop over trigger on document esc keyup if pop over is not open', () => {
         const popOverTrigger = fixture.debugElement.query(By.directive(PopOverDirective)).nativeElement;
         fixture.detectChanges();
-        document.dispatchEvent(new KeyboardEvent('keyup', {
-            key: 'Escape'
-        }));
+        document.dispatchEvent(
+            new KeyboardEvent('keyup', {
+                key: 'Escape'
+            })
+        );
         expect(popOverTrigger).not.toEqual(document.activeElement);
     });
 
     it('should open pop over on enter key press if pop over is not open', () => {
         const popOverTrigger = fixture.debugElement.query(By.directive(PopOverDirective)).nativeElement;
         fixture.detectChanges();
-        popOverTrigger.dispatchEvent(new KeyboardEvent('keyup', {
-            key: 'Enter'
-        }));
+        popOverTrigger.dispatchEvent(
+            new KeyboardEvent('keyup', {
+                key: 'Enter'
+            })
+        );
         fixture.detectChanges();
         const popOverPanel = document.querySelector('.adf-popover-test');
         expect(popOverPanel).toBeDefined();
@@ -97,9 +108,11 @@ describe('PopOverDirective', () => {
         fixture.detectChanges();
         popOverTrigger.click();
         fixture.detectChanges();
-        popOverTrigger.dispatchEvent(new KeyboardEvent('keyup', {
-            key: 'Enter'
-        }));
+        popOverTrigger.dispatchEvent(
+            new KeyboardEvent('keyup', {
+                key: 'Enter'
+            })
+        );
         fixture.detectChanges();
         const popOverPanel = document.querySelector('.adf-popover-test');
         expect(popOverPanel).toBeNull();

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

@@ -5,26 +5,40 @@
                 <mat-icon class="adf-search-field-icon">search</mat-icon>
             </button>
             <mat-form-field class="adf-facet-search-field" floatLabel="never">
-                <input matInput placeholder="{{ 'SEARCH.FILTER.ACTIONS.SEARCH' | translate }}"
-                       [attr.data-automation-id]="'facet-result-filter-'+field.label" [(ngModel)]="field.buckets.filterText">
-                <button *ngIf="field.buckets.filterText" mat-button matSuffix mat-icon-button
-                        [attr.title]="'SEARCH.FILTER.BUTTONS.CLEAR' | translate"
-                        (click)="field.buckets.filterText = ''">
+                <input
+                    matInput
+                    placeholder="{{ 'SEARCH.FILTER.ACTIONS.SEARCH' | translate }}"
+                    [attr.data-automation-id]="'facet-result-filter-' + field.label"
+                    [(ngModel)]="field.buckets.filterText"
+                />
+                <button
+                    *ngIf="field.buckets.filterText"
+                    mat-button
+                    matSuffix
+                    mat-icon-button
+                    [attr.title]="'SEARCH.FILTER.BUTTONS.CLEAR' | translate"
+                    (click)="field.buckets.filterText = ''"
+                >
                     <mat-icon role="button" [attr.aria-label]="'SEARCH.FILTER.BUTTONS.CLEAR' | translate">clear</mat-icon>
                 </button>
             </mat-form-field>
         </div>
     </div>
 
     <div class="adf-checklist">
-        <mat-checkbox *ngFor="let bucket of field.buckets" [checked]="bucket.checked"
-            [attr.data-automation-id]="'checkbox-'+field.label+'-'+(bucket.display || bucket.label)"
+        <mat-checkbox
+            *ngFor="let bucket of field.buckets"
+            [checked]="bucket.checked"
+            [attr.data-automation-id]="'checkbox-' + field.label + '-' + (bucket.display || bucket.label)"
             (change)="onToggleBucket($event, field, bucket)"
-            class="adf-search-filter-facet-checkbox">
-            <div matTooltip="{{ bucket.display || bucket.label | translate }} {{ getBucketCountDisplay(bucket) }}"
+            class="adf-search-filter-facet-checkbox"
+        >
+            <div
+                matTooltip="{{ bucket.display || bucket.label | translate }} {{ getBucketCountDisplay(bucket) }}"
                 matTooltipPosition="right"
                 class="adf-facet-label"
-                [class.adf-search-filter-facet-checkbox-checked]='bucket.checked'>
+                [class.adf-search-filter-facet-checkbox-checked]="bucket.checked"
+            >
                 {{ bucket.display || bucket.label | translate }} {{ getBucketCountDisplay(bucket) }}
             </div>
         </mat-checkbox>
@@ -37,16 +51,28 @@
     </div>
 
     <div class="adf-facet-buttons" *ngIf="!field.buckets.fitsPage">
-        <button mat-icon-button *ngIf="canResetSelectedBuckets(field)"
-            title="{{ 'SEARCH.FILTER.ACTIONS.CLEAR-ALL' | translate }}" (click)="resetSelectedBuckets(field)">
+        <button
+            mat-icon-button
+            *ngIf="canResetSelectedBuckets(field)"
+            title="{{ 'SEARCH.FILTER.ACTIONS.CLEAR-ALL' | translate }}"
+            (click)="resetSelectedBuckets(field)"
+        >
             <mat-icon>clear</mat-icon>
         </button>
-        <button mat-icon-button *ngIf="field.buckets.canShowLessItems" (click)="field.buckets.showLessItems()"
-            title="{{ 'SEARCH.FILTER.ACTIONS.SHOW-LESS' | translate }}">
+        <button
+            mat-icon-button
+            *ngIf="field.buckets.canShowLessItems"
+            (click)="field.buckets.showLessItems()"
+            title="{{ 'SEARCH.FILTER.ACTIONS.SHOW-LESS' | translate }}"
+        >
             <mat-icon>keyboard_arrow_up</mat-icon>
         </button>
-        <button mat-icon-button *ngIf="field.buckets.canShowMoreItems" (click)="field.buckets.showMoreItems()"
-            title="{{ 'SEARCH.FILTER.ACTIONS.SHOW-MORE' | translate }}">
+        <button
+            mat-icon-button
+            *ngIf="field.buckets.canShowMoreItems"
+            (click)="field.buckets.showMoreItems()"
+            title="{{ 'SEARCH.FILTER.ACTIONS.SHOW-MORE' | translate }}"
+        >
             <mat-icon>keyboard_arrow_down</mat-icon>
         </button>
     </div>

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

@@ -4,6 +4,7 @@
           [class.adf-search-toggle-chip]="displayValue || menuTrigger.menuOpen"
           [disabled]="!isPopulated"
           tabIndex="0"
+          role="button"
           [matMenuTriggerFor]="menu"
           (onMenuOpen)="onMenuOpen()"
           (keydown.enter)="onEnterKeydown()"

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

@@ -4,6 +4,7 @@
           [class.adf-search-toggle-chip]="(facetField.displayValue$ | async) || menuTrigger.menuOpen"
           [disabled]="!isPopulated()"
           tabIndex="0"
+          role="button"
           [matMenuTriggerFor]="menu"
           (menuOpened)="onMenuOpen()"
           (keydown.enter)="onEnterKeydown()"

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

@@ -3,6 +3,7 @@
           class="adf-search-filter-chip"
           [class.adf-search-toggle-chip]="(widget.getDisplayValue() | async) || menuTrigger.menuOpen"
           tabIndex="0"
+          role="button"
           [matMenuTriggerFor]="menu"
           (menuOpened)="onMenuOpen()"
           (keydown.enter)="onEnterKeydown()"