feat(accessibility): enable and satisfy 'click-events-have-key-events…

…' rule for '<a>' tags (#1336)

* apply consistent `[routerLink]="[]"` pattern for links without a `routerLink`

.eslintrc.json

@@ -916,6 +916,9 @@
       "rules": {
         "@angular-eslint/template/accessibility-alt-text": "error",
         "@angular-eslint/template/accessibility-elements-content": "error",
+        "@angular-eslint/template/accessibility-valid-aria": "error",
+        "@angular-eslint/template/click-events-have-key-events": "error",
+        "@angular-eslint/template/mouse-events-have-key-events": "error",
         "@angular-eslint/template/no-positive-tabindex": "error"
       }
     },

e2e/cypress/e2e/pages/account/my-account.page.ts

@@ -30,7 +30,7 @@ export class MyAccountPage {
   }
 
   navigateToOrderTemplates() {
-    cy.get('a[href="/account/order-templates"]').first().click();
+    cy.get('a[data-testing-id="order-templates-link"]').click();
   }
 
   navigateToPayments() {

e2e/cypress/e2e/pages/account/order-templates-details.page.ts

@@ -9,7 +9,7 @@ export class OrderTemplatesDetailsPage {
   readonly breadcrumb = new BreadcrumbModule();
 
   static navigateToOverviewPage() {
-    cy.get('[href="/account/order-templates"]').first().click();
+    cy.get('a[data-testing-id="order-templates-link"]').click();
   }
 
   get listItem() {

e2e/cypress/e2e/pages/account/wishlists-details.page.ts

@@ -9,7 +9,7 @@ export class WishlistsDetailsPage {
   readonly breadcrumb = new BreadcrumbModule();
 
   static navigateToOverviewPage() {
-    cy.get('[href="/account/wishlists"]').first().click();
+    cy.get('a[data-testing-id="wishlists-link"]').click();
   }
 
   get listItems() {

projects/organization-management/src/app/components/cost-center-users-list/cost-center-users-list.component.html

@@ -86,6 +86,7 @@
 
           <!-- Remove buyer -->
           <a
+            [routerLink]="[]"
             class="btn-tool"
             title="{{ 'account.costcenter.remove.button.label' | translate }}"
             (click)="removeBuyerConfirmation(buyer, removeBuyerDialog)"

projects/organization-management/src/app/components/user-roles-selection/user-roles-selection.component.html

@@ -27,11 +27,11 @@
             </ul>
             <p>
               <!-- Expand/Collapse user permissions -->
-              <a *ngIf="!isExpanded[i]" (click)="toggleExpanded(i)">
+              <a *ngIf="!isExpanded[i]" [routerLink]="[]" (click)="toggleExpanded(i)">
                 {{ 'account.user.details.profile.role.show_permissions.link' | translate }}&nbsp;
                 <fa-icon [icon]="['fas', 'angle-down']"></fa-icon>
               </a>
-              <a *ngIf="isExpanded[i]" (click)="toggleExpanded(i)">
+              <a *ngIf="isExpanded[i]" [routerLink]="[]" (click)="toggleExpanded(i)">
                 {{ 'account.user.details.profile.role.hide_permissions.link' | translate }}&nbsp;
                 <fa-icon [icon]="['fas', 'angle-up']"></fa-icon>
               </a>

projects/organization-management/src/app/components/user-roles-selection/user-roles-selection.component.spec.ts

@@ -1,5 +1,6 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ReactiveFormsModule } from '@angular/forms';
+import { RouterTestingModule } from '@angular/router/testing';
 import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 import { TranslateModule } from '@ngx-translate/core';
 import { MockComponent } from 'ng-mocks';
@@ -40,7 +41,7 @@ describe('User Roles Selection Component', () => {
     when(organizationManagementFacade.role$(approverRole.id)).thenReturn(of(approverRole));
 
     await TestBed.configureTestingModule({
-      imports: [ReactiveFormsModule, TranslateModule.forRoot()],
+      imports: [ReactiveFormsModule, RouterTestingModule, TranslateModule.forRoot()],
       declarations: [MockComponent(FaIconComponent), UserRolesSelectionComponent],
       providers: [{ provide: OrganizationManagementFacade, useFactory: () => instance(organizationManagementFacade) }],
     }).compileComponents();

projects/organization-management/src/app/pages/cost-center-buyers/cost-center-buyers-page.component.html

@@ -11,7 +11,7 @@ <h1>{{ 'account.costcenter.details.buyers.heading' | translate }}</h1>
     <div class="container">
       <div class="row list-header d-none d-md-flex">
         <div class="col-md-2 list-header-item no-seperator">
-          <a (click)="toggleItemSelection()">
+          <a [routerLink]="[]" (click)="toggleItemSelection()">
             <ng-container *ngIf="selectAll; else clearAll">{{
               'account.costcenter.details.buyers.list.header.selectall' | translate
             }}</ng-container>

projects/organization-management/src/app/pages/cost-center-buyers/cost-center-buyers-page.component.spec.ts

@@ -1,4 +1,5 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
 import { ConfigOption, FormlyModule } from '@ngx-formly/core';
 import { TranslateModule } from '@ngx-translate/core';
 import { MockComponent } from 'ng-mocks';
@@ -36,7 +37,12 @@ describe('Cost Center Buyers Page Component', () => {
     organizationManagementFacade = mock(OrganizationManagementFacade);
 
     await TestBed.configureTestingModule({
-      imports: [FormlyModule.forChild(formlyConfig), FormlyTestingModule, TranslateModule.forRoot()],
+      imports: [
+        FormlyModule.forChild(formlyConfig),
+        FormlyTestingModule,
+        RouterTestingModule,
+        TranslateModule.forRoot(),
+      ],
       declarations: [
         CostCenterBuyersPageComponent,
         MockComponent(ErrorMessageComponent),

projects/organization-management/src/app/pages/cost-centers/cost-centers-page.component.html

@@ -81,6 +81,7 @@ <h1>
               <!-- Deactivate -->
               <a
                 *ngIf="costCenter.active; else activateCostCenter"
+                [routerLink]="[]"
                 class="btn-tool"
                 title="{{ 'account.costcenter.deactivate.button.title' | translate }}"
                 (click)="openConfirmationDialog(costCenter, deactivateDialog)"
@@ -91,6 +92,7 @@ <h1>
               <!-- Activate -->
               <ng-template #activateCostCenter>
                 <a
+                  [routerLink]="[]"
                   class="btn-tool"
                   title="{{ 'account.costcenter.activate.button.title' | translate }}"
                   (click)="activate(costCenter)"
@@ -102,6 +104,7 @@ <h1>
               <!-- Delete -->
               <a
                 *ngIf="!(costCenter.pendingOrders + costCenter.approvedOrders); else deleteButtonDisabled"
+                [routerLink]="[]"
                 class="btn-tool"
                 title="{{ 'account.costcenter.delete.link' | translate }}"
                 (click)="openConfirmationDialog(costCenter, deleteDialog)"

projects/organization-management/src/app/pages/users/users-page.component.html

@@ -36,6 +36,7 @@ <h1>
         <div class="col-1 list-item text-right order-sm-4 order-3">
           <div *ngIf="user.login !== (currentUser$ | async)?.login" class="float-right">
             <a
+              [routerLink]="[]"
               data-testing-id="remove-user"
               class="btn-tool"
               title="{{

src/app/extensions/compare/pages/compare/product-compare-list/product-compare-list.component.html

@@ -21,6 +21,7 @@
               <div class="product-image">
                 <ish-product-image imageType="M" [link]="true"></ish-product-image>
                 <a
+                  [routerLink]="[]"
                   class="btn-tool"
                   [title]="'product.compare.remove.link' | translate"
                   (click)="removeFromCompare(product.sku)"

src/app/extensions/compare/pages/compare/product-compare-list/product-compare-list.component.spec.ts

@@ -1,4 +1,5 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
 import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import { MockComponent, MockDirective, MockPipe } from 'ng-mocks';
@@ -71,7 +72,7 @@ describe('Product Compare List Component', () => {
     compareFacade = mock(CompareFacade);
 
     await TestBed.configureTestingModule({
-      imports: [TranslateModule.forRoot()],
+      imports: [RouterTestingModule, TranslateModule.forRoot()],
       declarations: [
         MockComponent(FaIconComponent),
         MockComponent(ProductAttributesComponent),

src/app/extensions/compare/pages/compare/product-compare-paging/product-compare-paging.component.html

@@ -1,8 +1,18 @@
 <div class="d-flex">
-  <a *ngIf="showPrevious" class="btn btn-link control-previous" (click)="changeToPage(currentPage - 1)">
+  <a
+    *ngIf="showPrevious"
+    [routerLink]="[]"
+    class="btn btn-link control-previous"
+    (click)="changeToPage(currentPage - 1)"
+  >
     {{ 'product.compare.previous.button.label' | translate }}
   </a>
-  <a *ngIf="showNext" class="btn btn-link control-next ml-auto" (click)="changeToPage(currentPage + 1)">
+  <a
+    *ngIf="showNext"
+    [routerLink]="[]"
+    class="btn btn-link control-next ml-auto"
+    (click)="changeToPage(currentPage + 1)"
+  >
     {{ 'product.compare.next.button.label' | translate }}
   </a>
 </div>

src/app/extensions/order-templates/pages/account-order-template-detail/account-order-template-detail-line-item/account-order-template-detail-line-item.component.html

@@ -13,13 +13,14 @@
       <ish-product-bundle-display></ish-product-bundle-display>
       <ish-product-inventory></ish-product-inventory>
       <div>
-        <a class="btn-tool" (click)="moveDialog.show()" data-testing-id="move-order-template">
+        <a [routerLink]="[]" class="btn-tool" (click)="moveDialog.show()" data-testing-id="move-order-template">
           <fa-icon
             [icon]="['fas', 'arrows-alt']"
             [title]="'account.order_template.table.options.move_to_template' | translate"
           ></fa-icon>
         </a>
         <a
+          [routerLink]="[]"
           class="btn-tool"
           (click)="removeProductFromOrderTemplate(orderTemplateItemData.sku)"
           data-testing-id="delete-order-template"

src/app/extensions/order-templates/pages/account-order-template-detail/account-order-template-detail-line-item/account-order-template-detail-line-item.component.spec.ts

@@ -1,5 +1,6 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ReactiveFormsModule } from '@angular/forms';
+import { RouterTestingModule } from '@angular/router/testing';
 import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 import { TranslateModule } from '@ngx-translate/core';
 import { MockComponent, MockPipe } from 'ng-mocks';
@@ -46,7 +47,7 @@ describe('Account Order Template Detail Line Item Component', () => {
         MockComponent(SelectOrderTemplateModalComponent),
         MockPipe(DatePipe),
       ],
-      imports: [ReactiveFormsModule, TranslateModule.forRoot()],
+      imports: [ReactiveFormsModule, RouterTestingModule, TranslateModule.forRoot()],
       providers: [
         { provide: OrderTemplatesFacade, useFactory: () => instance(mock(OrderTemplatesFacade)) },
         { provide: ProductContextFacade, useFactory: () => instance(context) },

src/app/extensions/order-templates/pages/account-order-template-detail/account-order-template-detail-page.component.html

@@ -5,6 +5,7 @@
   <h1 class="clearfix">
     {{ orderTemplate?.title }}
     <a
+      [routerLink]="[]"
       (click)="editOrderTemplateDialog.show()"
       class="btn btn-secondary float-right"
       [title]="'account.order_template.edit.heading' | translate"

src/app/extensions/order-templates/pages/account-order-template-detail/account-order-template-detail-page.component.spec.ts

@@ -1,4 +1,5 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
 import { TranslateModule } from '@ngx-translate/core';
 import { MockComponent, MockDirective } from 'ng-mocks';
 import { of } from 'rxjs';
@@ -27,7 +28,7 @@ describe('Account Order Template Detail Page Component', () => {
     when(orderTemplatesFacade.currentOrderTemplateOutOfStockItems$).thenReturn(of([]));
 
     await TestBed.configureTestingModule({
-      imports: [TranslateModule.forRoot()],
+      imports: [RouterTestingModule, TranslateModule.forRoot()],
       declarations: [
         AccountOrderTemplateDetailPageComponent,
         MockComponent(AccountOrderTemplateDetailLineItemComponent),

src/app/extensions/order-templates/pages/account-order-template/account-order-template-list/account-order-template-list.component.html

@@ -69,6 +69,7 @@
           ><fa-icon icon="pencil-alt"></fa-icon
         ></a>
         <a
+          [routerLink]="[]"
           class="btn-tool"
           title="{{ 'account.order_template.list.link.remove' | translate }}"
           (click)="openDeleteConfirmationDialog(orderTemplate, deleteDialog)"

src/app/extensions/order-templates/pages/account-order-template/account-order-template-page.component.html

@@ -1,9 +1,13 @@
 <div class="order-template">
   <h1>
     {{ 'account.ordertemplates.heading' | translate
-    }}<a class="btn btn-secondary" data-testing-id="add-order-template" (click)="addOrderTemplateDialog.show()">{{
-      'account.order_template.list.button.add_template.label' | translate
-    }}</a>
+    }}<a
+      [routerLink]="[]"
+      class="btn btn-secondary"
+      data-testing-id="add-order-template"
+      (click)="addOrderTemplateDialog.show()"
+      >{{ 'account.order_template.list.button.add_template.label' | translate }}</a
+    >
   </h1>
 
   <!-- Error message -->

src/app/extensions/order-templates/pages/account-order-template/account-order-template-page.component.spec.ts

@@ -1,4 +1,5 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
 import { TranslateModule } from '@ngx-translate/core';
 import { MockComponent } from 'ng-mocks';
 import { instance, mock } from 'ts-mockito';
@@ -20,7 +21,7 @@ describe('Account Order Template Page Component', () => {
     const orderTemplatesFacade = mock(OrderTemplatesFacade);
 
     await TestBed.configureTestingModule({
-      imports: [TranslateModule.forRoot()],
+      imports: [RouterTestingModule, TranslateModule.forRoot()],
       declarations: [
         AccountOrderTemplatePageComponent,
         MockComponent(AccountOrderTemplateListComponent),

src/app/extensions/punchout/pages/account-punchout/account-punchout-page.component.html

@@ -39,6 +39,7 @@ <h2 class="mt-1">
                 <fa-icon [icon]="['fas', 'pencil-alt']"></fa-icon>
               </a>
               <a
+                [routerLink]="[]"
                 class="btn-tool"
                 title="{{ 'account.user.delete_user_dialog.header' | translate: { '0': user.login } }}"
                 (click)="modalDialog.show(user)"

src/app/extensions/quickorder/shared/formly/quickorder-repeat-field/quickorder-repeat-field.component.html

@@ -10,6 +10,7 @@
   <ish-product-quantity class="col-3 col-sm-2 quickorder-line-item"></ish-product-quantity>
   <div class="col-3 col-sm-2 d-flex quickorder-line-item">
     <a
+      [routerLink]="[]"
       class="btn btn-tool"
       (click)="remove(i); updateContexts()"
       title="{{ 'quickorder.page.remove.row' | translate }}"
@@ -19,7 +20,11 @@
   </div>
 </div>
 <div class="section d-flex flex-nowrap">
-  <a (click)="addMultipleRows(1)" data-testing-id="add-quickorder-line">{{ to?.addText | translate }}</a>
+  <a [routerLink]="[]" (click)="addMultipleRows(1)" data-testing-id="add-quickorder-line">{{
+    to?.addText | translate
+  }}</a>
   <span class="link-separator"></span>
-  <a (click)="addMultipleRows(to?.numberMoreRows)">{{ to?.addMoreText | translate: { '0': to?.numberMoreRows } }}</a>
+  <a [routerLink]="[]" (click)="addMultipleRows(to?.numberMoreRows)">{{
+    to?.addMoreText | translate: { '0': to?.numberMoreRows }
+  }}</a>
 </div>

src/app/extensions/quickorder/shared/formly/quickorder-repeat-field/quickorder-repeat-field.component.spec.ts

@@ -1,5 +1,6 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { FormGroup } from '@angular/forms';
+import { RouterTestingModule } from '@angular/router/testing';
 import { FormlyModule } from '@ngx-formly/core';
 import { TranslateModule } from '@ngx-translate/core';
 
@@ -21,6 +22,7 @@ describe('Quickorder Repeat Field Component', () => {
           types: [{ name: 'repeat', component: QuickorderRepeatFieldComponent }],
         }),
         FormlyTestingComponentsModule,
+        RouterTestingModule,
         TranslateModule.forRoot(),
       ],
     }).compileComponents();

src/app/extensions/quoting/pages/quote-list/quote-list/quote-list.component.html

@@ -65,6 +65,7 @@
       <th cdk-header-cell *cdkHeaderCellDef data-testing-id="th-quote-actions"></th>
       <td cdk-cell *cdkCellDef="let quote" class="column-price">
         <a
+          [routerLink]="[]"
           class="btn-tool"
           [title]="'quote.list.delete.button.delete.label' | translate"
           (click)="modalDialog.show(quote)"

src/app/extensions/quoting/shared/basket-add-to-quote/basket-add-to-quote.component.html

@@ -1,6 +1,7 @@
 <ng-container *ngIf="isLoggedIn$ | async; else disabled">
   <a
     *ishHasNotRole="['APP_B2B_CXML_USER', 'APP_B2B_OCI_USER']"
+    [routerLink]="[]"
     class="btn btn-secondary"
     data-testing-id="create-quote-from-basket"
     (click)="addToQuote()"

src/app/extensions/quoting/shared/quote-line-item-list-element/quote-line-item-list-element.component.html

@@ -28,6 +28,7 @@
           displayType="icon"
         ></ish-lazy-product-add-to-wishlist>
         <a
+          [routerLink]="[]"
           class="btn-tool"
           [attr.data-testing-id]="'remove-line-item'"
           [attr.data-id]="lineItem.id"

src/app/extensions/quoting/shared/quote-line-item-list-element/quote-line-item-list-element.component.spec.ts

@@ -1,4 +1,5 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
 import { FaIconComponent } from '@fortawesome/angular-fontawesome';
 import { TranslateModule } from '@ngx-translate/core';
 import { MockComponent, MockPipe } from 'ng-mocks';
@@ -41,7 +42,7 @@ describe('Quote Line Item List Element Component', () => {
     quoteContext = mock(QuoteContextFacade);
 
     await TestBed.configureTestingModule({
-      imports: [TranslateModule.forRoot()],
+      imports: [RouterTestingModule, TranslateModule.forRoot()],
       declarations: [
         MockComponent(FaIconComponent),
         MockComponent(LazyProductAddToOrderTemplateComponent),

src/app/extensions/quoting/shared/quoting-basket-line-items/quoting-basket-line-items.component.html

@@ -3,6 +3,7 @@
     <h2 class="col-12">
       {{ 'quote.basket_items.label' | translate: { '0': getName(item[0]) | async } }}
       <a
+        [routerLink]="[]"
         class="float-md-right pt-2 d-block d-md-inline header-note"
         title="{{ 'quote.basket_items.remove.button.label' | translate }}"
         (click)="onDeleteQuote(item[0])"

src/app/extensions/rating/formly/rating-stars-field/rating-stars-field.component.html

@@ -1,8 +1,9 @@
 <div class="pt-1" data-testing-id="rating-stars-field">
   <ng-container *ngFor="let fill of stars; index as i">
     <a
-      [title]="'product.review.rating.tooltip' | translate: { '0': i + 1 }"
+      [routerLink]="[]"
       class="text-muted mt-4"
+      [title]="'product.review.rating.tooltip' | translate: { '0': i + 1 }"
       (click)="setStars(i + 1)"
       ><ish-product-rating-star [filled]="fill"></ish-product-rating-star
     ></a>

src/app/extensions/rating/formly/rating-stars-field/rating-stars-field.component.spec.ts

@@ -1,5 +1,6 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { FormGroup } from '@angular/forms';
+import { RouterTestingModule } from '@angular/router/testing';
 import { FormlyFieldConfig, FormlyModule } from '@ngx-formly/core';
 import { TranslateModule } from '@ngx-translate/core';
 import { MockComponent } from 'ng-mocks';
@@ -28,6 +29,7 @@ describe('Rating Stars Field Component', () => {
           ],
         }),
         FormlyTestingComponentsModule,
+        RouterTestingModule,
         TranslateModule.forRoot(),
       ],
       declarations: [MockComponent(ProductRatingStarComponent), RatingStarsFieldComponent],