feat(accessibility): satisfy 'click-events-have-key-events' rule for …

…HTML elements with click event (#1336) * add `(keydown.enter)` events for `(click)` events * make elements tab focusable with `tabindex="0"`
intershop · Jan 11, 2023 · 200409e · 200409e
1 parent ae2d6c4
commit 200409e
Show file tree

Hide file tree

Showing 11 changed files with 50 additions and 20 deletions.
diff --git a/src/app/extensions/quoting/shared/basket-add-to-quote/basket-add-to-quote.component.html b/src/app/extensions/quoting/shared/basket-add-to-quote/basket-add-to-quote.component.html
@@ -1,4 +1,4 @@
-<ng-container *ngIf="isLoggedIn$ | async; else disabled">
+<ng-container *ngIf="isLoggedIn$ | async; else loginButton">
   <a
     *ishHasNotRole="['APP_B2B_CXML_USER', 'APP_B2B_OCI_USER']"
     [routerLink]="[]"
@@ -9,14 +9,13 @@
     {{ 'shopping_cart.quote.create.button' | translate }}
   </a>
 </ng-container>
-<ng-template #disabled>
-  <span (click)="login()">
-    <button
-      data-testing-id="create-quote-from-basket"
-      class="btn btn-secondary disabled"
-      [title]="'account.login.quotes.message' | translate"
-    >
-      {{ 'shopping_cart.quote.create.button' | translate }}
-    </button>
-  </span>
+<ng-template #loginButton>
+  <button
+    data-testing-id="create-quote-from-basket"
+    class="btn btn-secondary"
+    [title]="'account.login.quotes.message' | translate"
+    (click)="login()"
+  >
+    {{ 'shopping_cart.quote.create.button' | translate }}
+  </button>
 </ng-template>
diff --git a/src/app/extensions/store-locator/pages/store-locator/store-locator-page.component.html b/src/app/extensions/store-locator/pages/store-locator/store-locator-page.component.html
@@ -44,6 +44,8 @@ <h1>{{ 'store_locator.title' | translate }}</h1>
             *ngFor="let store of stores$ | async"
             class="store-entry"
             (click)="highlight(store)"
+            (keydown.enter)="highlight(store)"
+            tabindex="0"
             [class.highlight-store]="highlighted$(store) | async"
             [ishScroll]="highlighted$(store) | async"
             scrollContainer="parent"
@@ -61,6 +63,8 @@ <h1>{{ 'store_locator.title' | translate }}</h1>
               *ngFor="let store of stores$ | async"
               class="col-md-4 col-sm-6 col-xs-12 store-entry"
               (click)="highlight(store)"
+              (keydown.enter)="highlight(store)"
+              tabindex="0"
               [class.highlight-store]="highlighted$(store) | async"
             >
               <ish-store-address [store]="store"></ish-store-address>

diff --git a/...tacton/pages/configure/tacton-image-text-buttons/tacton-image-text-buttons.component.html b/...tacton/pages/configure/tacton-image-text-buttons/tacton-image-text-buttons.component.html
@@ -4,6 +4,8 @@
       <img
         [src]="getImageUrl(opt.properties.tc_component_picture) | async"
         (click)="change(opt.name)"
+        (keydown.enter)="change(opt.name)"
+        tabindex="0"
         [attr.alt]="opt.properties.tc_component_picture"
       />
     </div>

diff --git a/...ton/pages/configure/tacton-image-text-buttons/tacton-image-text-buttons.component.spec.ts b/...ton/pages/configure/tacton-image-text-buttons/tacton-image-text-buttons.component.spec.ts
@@ -78,11 +78,13 @@ describe('Tacton Image Text Buttons Component', () => {
     expect(element).toMatchInlineSnapshot(`
       <div class="d-flex flex-wrap align-items-end pb-2">
         <div class="mr-3">
-          <div class="border border-primary"><img src="http://xxximage1_key=xyz" alt="image1" /></div>
+          <div class="border border-primary">
+            <img tabindex="0" src="http://xxximage1_key=xyz" alt="image1" />
+          </div>
           <label><input type="radio" name="ID" value="i1" /> 3 </label>
         </div>
         <div class="mr-3">
-          <div class="border"><img src="http://xxximage2_key=xyz" alt="image2" /></div>
+          <div class="border"><img tabindex="0" src="http://xxximage2_key=xyz" alt="image2" /></div>
           <label><input type="radio" name="ID" value="i2" /> 0 </label>
         </div>
       </div>

diff --git a/src/app/pages/error/server-error/server-error.component.html b/src/app/pages/error/server-error/server-error.component.html
@@ -2,7 +2,7 @@
   <h1>{{ 'servererror.page.title' | translate }}</h1>
   <div class="error-text">
     <div [ishServerHtml]="'servererror.page.text' | translate"></div>
-    <p class="text-muted" (click)="expand()">
+    <p class="text-muted" (click)="expand()" (keydown.enter)="expand()" tabindex="0">
       <ng-container [ngSwitch]="httpError?.status">
         <ng-container *ngSwitchCase="undefined"> {{ stringError | translate }} </ng-container>
         <ng-container *ngSwitchCase="0"> Server timeout </ng-container>

diff --git a/src/app/pages/product/product-images/product-images.component.html b/src/app/pages/product/product-images/product-images.component.html
@@ -6,6 +6,8 @@
         class="product-thumb-set"
         [ngClass]="{ active: isActiveSlide(i) }"
         (click)="setActiveSlide(i)"
+        (keydown.enter)="setActiveSlide(i)"
+        tabindex="0"
       >
         <ish-product-image imageType="S" [imageView]="imageView"></ish-product-image>
       </div>

diff --git a/src/app/shared/components/common/accordion-item/accordion-item.component.html b/src/app/shared/components/common/accordion-item/accordion-item.component.html
@@ -1,4 +1,11 @@
-<div class="panel-heading" [attr.data-testing-id]="dataTestingId" role="tab" (click)="toggleCollapse()">
+<div
+  class="panel-heading"
+  [attr.data-testing-id]="dataTestingId"
+  role="tab"
+  (click)="toggleCollapse()"
+  (keydown.enter)="toggleCollapse()"
+  tabindex="0"
+>
   <a class="accordion-toggle" [attr.aria-expanded]="isCollapsed">
     {{ heading }}
     <fa-icon *ngIf="!isCollapsed; else collapsed" class="float-right" [icon]="['fas', 'plus']"></fa-icon>

diff --git a/src/app/shared/components/filter/filter-collapsible/filter-collapsible.component.html b/src/app/shared/components/filter/filter-collapsible/filter-collapsible.component.html
@@ -1,5 +1,11 @@
 <div class="filter-group" [ngClass]="{ collapsed: isCollapsed }">
-  <h3 (click)="toggle()" [attr.aria-expanded]="!isCollapsed" aria-controls="collapseFilter">
+  <h3
+    (click)="toggle()"
+    (keydown.enter)="toggle()"
+    tabindex="0"
+    [attr.aria-expanded]="!isCollapsed"
+    aria-controls="collapseFilter"
+  >
     {{ title }}
     <fa-icon [icon]="['fas', isCollapsed ? 'angle-right' : 'angle-down']" class="float-right"></fa-icon>
   </h3>

diff --git a/src/app/shared/components/filter/filter-collapsible/filter-collapsible.component.spec.ts b/src/app/shared/components/filter/filter-collapsible/filter-collapsible.component.spec.ts
@@ -31,7 +31,7 @@ describe('Filter Collapsible Component', () => {
     fixture.detectChanges();
     expect(element).toMatchInlineSnapshot(`
       <div class="filter-group">
-        <h3 aria-controls="collapseFilter" aria-expanded="true">
+        <h3 tabindex="0" aria-controls="collapseFilter" aria-expanded="true">
           <fa-icon class="float-right" ng-reflect-icon="fas,angle-down"></fa-icon>
         </h3>
       </div>
@@ -43,7 +43,7 @@ describe('Filter Collapsible Component', () => {
 
     expect(element).toMatchInlineSnapshot(`
       <div class="filter-group collapsed">
-        <h3 aria-controls="collapseFilter" aria-expanded="false">
+        <h3 tabindex="0" aria-controls="collapseFilter" aria-expanded="false">
           <fa-icon class="float-right" ng-reflect-icon="fas,angle-right"></fa-icon>
         </h3>
       </div>

diff --git a/src/app/shared/formly/types/date-picker-field/date-picker-field.component.html b/src/app/shared/formly/types/date-picker-field/date-picker-field.component.html
@@ -16,7 +16,14 @@
   />
 
   <div class="input-group-append">
-    <div class="btn btn-secondary" (click)="d.toggle()" type="button" data-testing-id="btn-date-picker">
+    <div
+      class="btn btn-secondary"
+      (click)="d.toggle()"
+      (keydown.enter)="d.toggle()"
+      tabindex="0"
+      type="button"
+      data-testing-id="btn-date-picker"
+    >
       <fa-icon class="text-secondary" icon="calendar-day"></fa-icon>
     </div>
   </div>

diff --git a/src/app/shell/header/header-navigation/header-navigation.component.html b/src/app/shell/header/header-navigation/header-navigation.component.html
@@ -1,10 +1,11 @@
+<!-- eslint-disable @angular-eslint/template/click-events-have-key-events -->
 <ul class="navbar-nav main-navigation-list">
   <li
     *ngFor="let category of categories$ | async"
     #subMenu
     class="dropdown"
     [ngClass]="{ open: isOpened(category.uniqueId) }"
-    (mouseover)="subMenuShow(subMenu)"
+    (mouseenter)="subMenuShow(subMenu)"
     (mouseleave)="subMenuHide(subMenu)"
     (click)="subMenuHide(subMenu)"
   >