feat: Angular A11y ESLint Rules (Accessibility) (#1168)

* feat: add eslint rule @angular-eslint/template/accessibility-alt-text * feat: add eslint rule @angular-eslint/template/accessibility-elements-content * feat: add eslint rule @angular-eslint/template/no-positive-tabindex
intershop · Jul 29, 2022 · e584271 · e584271
1 parent abd8615
commit e584271
Show file tree

Hide file tree

Showing 16 changed files with 83 additions and 16 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -886,7 +886,11 @@
     {
       "files": ["*.html"],
       "extends": ["plugin:@angular-eslint/template/recommended"],
-      "rules": {}
+      "rules": {
+        "@angular-eslint/template/accessibility-alt-text": "error",
+        "@angular-eslint/template/accessibility-elements-content": "error",
+        "@angular-eslint/template/no-positive-tabindex": "error"
+      }
     },
     {
       "files": ["*.html"],

diff --git a/src/app/extensions/tacton/pages/configure/tacton-group/tacton-group.component.html b/src/app/extensions/tacton/pages/configure/tacton-group/tacton-group.component.html
@@ -4,7 +4,11 @@ <h2 [id]="'anchor-' + group.name" *ngIf="!level; else subGroup">{{ group?.descri
     <span class="anchor" [id]="'anchor-' + group.name"></span>
     <h3 ishIntersectionObserver (visibilityChange)="onIntersection(group.name, $event)">{{ group.description }}</h3>
   </ng-template>
-  <img *ngIf="group.properties?.tc_group_picture" [src]="getImageUrl(group.properties?.tc_group_picture) | async" />
+  <img
+    *ngIf="group.properties?.tc_group_picture"
+    [src]="getImageUrl(group.properties?.tc_group_picture) | async"
+    [attr.alt]="group.name"
+  />
 
   <ng-container *ngFor="let item of group?.members; let last = last">
     <ish-tacton-group *ngIf="isGroup(item); else parameter" [group]="item" [level]="level + 1"></ish-tacton-group>

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
@@ -1,7 +1,11 @@
 <div class="d-flex flex-wrap align-items-end pb-2">
   <div *ngFor="let opt of parameter.domain?.elements" class="mr-3">
     <div class="border" [ngClass]="{ 'border-primary': opt.selected }">
-      <img [src]="getImageUrl(opt.properties.tc_component_picture) | async" (click)="change(opt.name)" />
+      <img
+        [src]="getImageUrl(opt.properties.tc_component_picture) | async"
+        (click)="change(opt.name)"
+        [attr.alt]="opt.properties.tc_component_picture"
+      />
     </div>
     <label>
       <input

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,11 @@ 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" /></div>
+          <div class="border border-primary"><img 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" /></div>
+          <div class="border"><img src="http://xxximage2_key=xyz" alt="image2" /></div>
           <label><input type="radio" name="ID" value="i2" /> 0 </label>
         </div>
       </div>

diff --git a/...ensions/tacton/pages/configure/tacton-selected-image/tacton-selected-image.component.html b/...ensions/tacton/pages/configure/tacton-selected-image/tacton-selected-image.component.html
@@ -1,4 +1,7 @@
 <!-- display the selected image -->
 <p *ngIf="parameter?.properties?.tc_component_picture">
-  <img [src]="getImageUrl(parameter.properties?.tc_component_picture) | async" />
+  <img
+    [src]="getImageUrl(parameter.properties.tc_component_picture) | async"
+    [attr.alt]="parameter.properties.tc_component_picture"
+  />
 </p>
diff --git a/src/app/pages/category/category-image/category-image.component.html b/src/app/pages/category/category-image/category-image.component.html
@@ -1,3 +1,3 @@
 <div>
-  <img loading="lazy" [src]="categoryImageUrl" itemprop="image" />
+  <img loading="lazy" [src]="categoryImageUrl" itemprop="image" [attr.alt]="category.name" />
 </div>
diff --git a/src/app/pages/product/product-master-variations/product-master-variations.component.html b/src/app/pages/product/product-master-variations/product-master-variations.component.html
@@ -1,5 +1,5 @@
 <ng-container *ngIf="variationCount$ | async">
-  <a id="variation-list-top"></a>
+  <a id="variation-list-top" title="top"></a>
   <ish-filter-navigation orientation="horizontal"></ish-filter-navigation>
   <ish-product-listing
     mode="paging"

diff --git a/src/app/pages/product/product-master-variations/product-master-variations.component.spec.ts b/src/app/pages/product/product-master-variations/product-master-variations.component.spec.ts
@@ -43,7 +43,7 @@ describe('Product Master Variations Component', () => {
     expect(element).toBeTruthy();
     expect(() => fixture.detectChanges()).not.toThrow();
     expect(element).toMatchInlineSnapshot(`
-      <a id="variation-list-top"></a
+      <a id="variation-list-top" title="top"></a
       ><ish-filter-navigation
         orientation="horizontal"
         ng-reflect-orientation="horizontal"

diff --git a/src/app/shared/components/product/product-listing/product-listing.component.html b/src/app/shared/components/product/product-listing/product-listing.component.html
@@ -1,4 +1,4 @@
-<a *ngIf="fragmentOnRouting === 'product-list-top'" id="product-list-top"></a>
+<a *ngIf="fragmentOnRouting === 'product-list-top'" id="product-list-top" title="top"></a>
 <ng-container *ngIf="productListingView$ | async as listing">
   <div
     *ngIf="isEndlessScrolling"

diff --git a/src/app/shared/components/promotion/promotion-details/promotion-details.component.html b/src/app/shared/components/promotion/promotion-details/promotion-details.component.html
@@ -19,9 +19,11 @@
       [ngClass]="'details-link promotion-details-link'"
     >
       <ng-container *ngIf="promotion.longTitle; else title">
-        <h3 [ishServerHtml]="promotion.longTitle"></h3>
+        <h3 [ishServerHtml]="promotion.longTitle" [attr.aria-label]="promotion.longTitle"></h3>
       </ng-container>
-      <ng-template #title> <h3 [ishServerHtml]="promotion.title"></h3> </ng-template>
+      <ng-template #title>
+        <h3 [ishServerHtml]="promotion.title" [attr.aria-label]="promotion.title"></h3>
+      </ng-template>
 
       <p *ngIf="promotion.ruleDescription" [ishServerHtml]="promotion.ruleDescription"></p>
       <p *ngIf="promotion.legalContentMessage" class="text-muted" [ishServerHtml]="promotion.legalContentMessage"></p>

diff --git a/src/app/shell/header/header-checkout/header-checkout.component.html b/src/app/shell/header/header-checkout/header-checkout.component.html
@@ -6,10 +6,22 @@
   </div>
   <div class="mid-header col-9 col-md-12">
     <div class="logo-wrapper d-md-none">
-      <a rel="home" routerLink="/home" class="mobile-logo" data-testing-id="link-home"></a>
+      <a
+        rel="home"
+        routerLink="/home"
+        class="mobile-logo"
+        [attr.aria-label]="'common.home.link' | translate"
+        data-testing-id="link-home"
+      ></a>
     </div>
     <div class="logo-wrapper d-none d-md-block">
-      <a rel="home" routerLink="/home" class="logo" data-testing-id="header-home-link-desktop"></a>
+      <a
+        rel="home"
+        routerLink="/home"
+        class="logo"
+        [attr.aria-label]="'common.home.link' | translate"
+        data-testing-id="header-home-link-desktop"
+      ></a>
     </div>
   </div>
 </div>
diff --git a/src/app/shell/header/header-checkout/header-checkout.component.spec.ts b/src/app/shell/header/header-checkout/header-checkout.component.spec.ts
@@ -1,6 +1,9 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { TranslateModule } from '@ngx-translate/core';
+import { MockComponent } from 'ng-mocks';
 
 import { findAllCustomElements } from 'ish-core/utils/dev/html-query-utils';
+import { LoginStatusComponent } from 'ish-shell/header/login-status/login-status.component';
 
 import { HeaderCheckoutComponent } from './header-checkout.component';
 
@@ -9,6 +12,13 @@ describe('Header Checkout Component', () => {
   let fixture: ComponentFixture<HeaderCheckoutComponent>;
   let element: HTMLElement;
 
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TranslateModule.forRoot()],
+      declarations: [HeaderCheckoutComponent, MockComponent(LoginStatusComponent)],
+    }).compileComponents();
+  });
+
   beforeEach(() => {
     fixture = TestBed.createComponent(HeaderCheckoutComponent);
     component = fixture.componentInstance;

diff --git a/src/app/shell/header/header-default/__snapshots__/header-default.component.spec.ts.snap b/src/app/shell/header/header-default/__snapshots__/header-default.component.spec.ts.snap
@@ -38,6 +38,7 @@ exports[`Header Default Component should render normal header adequately for des
           routerlink="/home"
           data-testing-id="header-home-link-desktop"
           class="logo"
+          aria-label="common.home.link"
         ></a>
       </div>
     </div>
@@ -104,6 +105,7 @@ exports[`Header Default Component should render normal header adequately for mob
           routerlink="/home"
           data-testing-id="header-home-link-mobile"
           class="mobile-logo"
+          aria-label="common.home.link"
         ></a>
       </div>
     </div>
@@ -163,6 +165,7 @@ exports[`Header Default Component should render normal header adequately for tab
           routerlink="/home"
           data-testing-id="header-home-link-desktop"
           class="logo"
+          aria-label="common.home.link"
         ></a>
       </div>
     </div>
@@ -221,6 +224,7 @@ exports[`Header Default Component should render sticky header adequately for des
           routerlink="/home"
           data-testing-id="header-home-link-desktop"
           class="logo"
+          aria-label="common.home.link"
         ></a>
       </div>
     </div>
@@ -275,6 +279,7 @@ exports[`Header Default Component should render sticky header adequately for mob
           routerlink="/home"
           data-testing-id="header-home-link-mobile"
           class="mobile-logo"
+          aria-label="common.home.link"
         ></a>
       </div>
     </div>
@@ -329,6 +334,7 @@ exports[`Header Default Component should render sticky header adequately for tab
           routerlink="/home"
           data-testing-id="header-home-link-mobile"
           class="mobile-logo"
+          aria-label="common.home.link"
         ></a>
       </div>
     </div>

diff --git a/src/app/shell/header/header-default/header-default.component.html b/src/app/shell/header/header-default/header-default.component.html
@@ -61,13 +61,15 @@
           rel="home"
           routerLink="/home"
           class="logo"
+          [attr.aria-label]="'common.home.link' | translate"
           data-testing-id="header-home-link-desktop"
         ></a>
         <a
           *ngIf="showMobileLogoLink"
           rel="home"
           routerLink="/home"
           class="mobile-logo"
+          [attr.aria-label]="'common.home.link' | translate"
           data-testing-id="header-home-link-mobile"
         ></a>
       </div>

diff --git a/src/app/shell/header/header-simple/header-simple.component.html b/src/app/shell/header/header-simple/header-simple.component.html
@@ -1,10 +1,22 @@
 <div class="header header-simple container">
   <div class="mid-header">
     <div class="logo-wrapper d-none d-md-block">
-      <a rel="home" routerLink="/home" class="logo" data-testing-id="header-home-link-desktop"></a>
+      <a
+        rel="home"
+        routerLink="/home"
+        class="logo"
+        [attr.aria-label]="'common.home.link' | translate"
+        data-testing-id="header-home-link-desktop"
+      ></a>
     </div>
     <div class="logo-wrapper d-md-none">
-      <a rel="home" routerLink="/home" class="mobile-logo" data-testing-id="link-home"></a>
+      <a
+        rel="home"
+        routerLink="/home"
+        class="mobile-logo"
+        [attr.aria-label]="'common.home.link' | translate"
+        data-testing-id="link-home"
+      ></a>
     </div>
   </div>
 </div>
diff --git a/src/app/shell/header/header-simple/header-simple.component.spec.ts b/src/app/shell/header/header-simple/header-simple.component.spec.ts
@@ -1,4 +1,5 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { TranslateModule } from '@ngx-translate/core';
 
 import { HeaderSimpleComponent } from './header-simple.component';
 
@@ -7,6 +8,13 @@ describe('Header Simple Component', () => {
   let element: HTMLElement;
   let component: HeaderSimpleComponent;
 
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TranslateModule.forRoot()],
+      declarations: [HeaderSimpleComponent],
+    }).compileComponents();
+  });
+
   beforeEach(() => {
     fixture = TestBed.createComponent(HeaderSimpleComponent);
     component = fixture.componentInstance;