feat: accessibility improvements

intershop · Aug 29, 2023 · cfe40ff · cfe40ff
1 parent e54f611
commit cfe40ff
Show file tree

Hide file tree

Showing 31 changed files with 163 additions and 91 deletions.
diff --git a/...uisition-management/src/app/components/requisitions-list/requisitions-list.component.html b/...uisition-management/src/app/components/requisitions-list/requisitions-list.component.html
@@ -15,7 +15,9 @@
         *cdkCellDef="let requisition"
         [attr.data-label]="'account.approvallist.table.id_of_order' | translate"
       >
-        <a [routerLink]="[requisition.id, { status: status }]">{{ requisition.requisitionNo }}</a>
+        <a [routerLink]="[requisition.id, { status: status }]" aria-label="Navigate to requisition details.">
+          {{ requisition.requisitionNo }}
+        </a>
       </td>
     </ng-container>
 

diff --git a/src/app/extensions/quoting/shared/quote-edit/quote-edit.component.html b/src/app/extensions/quoting/shared/quote-edit/quote-edit.component.html
@@ -18,9 +18,9 @@
     <div class="section">
       <!-- displayName -->
       <div class="row">
-        <label for="quote-displayname" class="col-4 col-md-3 col-xl-2 col-form-label">{{
-          'quote.edit.unsubmitted.name.label' | translate
-        }}</label>
+        <label for="quote-displayname" class="col-4 col-md-3 col-xl-2 col-form-label">
+          {{ 'quote.edit.unsubmitted.name.label' | translate }}
+        </label>
         <div class="col-8 col-md-9 col-xl-10">
           <ish-in-place-edit (edited)="update()" (aborted)="reset()">
             <p class="form-control-plaintext w-auto" [ngClass]="{ 'font-italic': !form.get('displayName').value }">
@@ -31,10 +31,11 @@
         </div>
       </div>
 
+      <!-- Comment -->
       <div class="row">
-        <label for="quote-description" class="col-4 col-md-3 col-xl-2 col-form-label">{{
-          'quote.edit.unsubmitted.comment.label' | translate
-        }}</label>
+        <label for="quote-description" class="col-4 col-md-3 col-xl-2 col-form-label">
+          {{ 'quote.edit.unsubmitted.comment.label' | translate }}
+        </label>
         <div class="col-8 col-md-9 col-xl-10">
           <ish-in-place-edit (edited)="update()" (aborted)="reset()">
             <p class="form-control-plaintext w-auto" [ngClass]="{ 'font-italic': !form.get('description').value }">

diff --git a/src/app/extensions/quoting/shared/quote-view/quote-view.component.html b/src/app/extensions/quoting/shared/quote-view/quote-view.component.html
@@ -36,6 +36,7 @@
       ></ish-info-message>
     </ng-template>
 
+    <!-- Quote No. -->
     <div class="row">
       <div class="col-4 col-md-3 col-xl-2 col-form-label">
         {{ 'quote.edit.unsubmitted.quote_no.label' | translate }}
@@ -46,6 +47,8 @@
         </p>
       </div>
     </div>
+
+    <!-- Status -->
     <div class="row">
       <div class="col-4 col-md-3 col-xl-2 col-form-label">{{ 'quote.edit.unsubmitted.status.label' | translate }}</div>
       <div class="col-8 col-md-9 col-xl-10">
@@ -73,6 +76,7 @@
         </div>
       </div>
 
+      <!-- Description -->
       <div *ngIf="quote.description" class="row">
         <div class="col-4 col-md-3 col-xl-2 col-form-label">
           {{ 'quote.edit.unsubmitted.comment.label' | translate }}
@@ -82,6 +86,7 @@
         </div>
       </div>
 
+      <!-- Seller Comment -->
       <div *ngIf="asQuote(quote).sellerComment" class="row">
         <div class="col-4 col-md-3 col-xl-2 col-form-label">
           {{ 'quote.edit.unsubmitted.seller_comment.label' | translate }}

diff --git a/src/app/shared/cms/components/cms-image-enhanced/cms-image-enhanced.component.html b/src/app/shared/cms/components/cms-image-enhanced/cms-image-enhanced.component.html
@@ -32,7 +32,7 @@
       <img
         loading="lazy"
         [src]="pagelet.stringParam('Image')"
-        [attr.alt]="pagelet.stringParam('AlternateText')"
+        [attr.alt]="pagelet.stringParam('AlternateText') || ('image.alt_text.default' | translate)"
         class="enhanced-image"
       />
     </picture>

diff --git a/src/app/shared/cms/components/cms-image-enhanced/cms-image-enhanced.component.spec.ts b/src/app/shared/cms/components/cms-image-enhanced/cms-image-enhanced.component.spec.ts
@@ -1,4 +1,5 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { TranslateModule } from '@ngx-translate/core';
 
 import { createContentPageletView } from 'ish-core/models/content-view/content-view.model';
 
@@ -11,6 +12,7 @@ describe('Cms Image Enhanced Component', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
+      imports: [TranslateModule.forRoot()],
       declarations: [CMSImageEnhancedComponent],
     }).compileComponents();
   });

diff --git a/src/app/shared/cms/components/cms-image/cms-image.component.html b/src/app/shared/cms/components/cms-image/cms-image.component.html
@@ -13,6 +13,10 @@
 
 <ng-template #image>
   <div [ngClass]="pagelet.stringParam('CSSClass')">
-    <img loading="lazy" [src]="pagelet.stringParam('Image')" [attr.alt]="pagelet.stringParam('AlternateText')" />
+    <img
+      loading="lazy"
+      [src]="pagelet.stringParam('Image')"
+      [attr.alt]="pagelet.stringParam('AlternateText') || ('image.alt_text.default' | translate)"
+    />
   </div>
 </ng-template>
diff --git a/src/app/shared/cms/components/cms-image/cms-image.component.spec.ts b/src/app/shared/cms/components/cms-image/cms-image.component.spec.ts
@@ -1,4 +1,5 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { TranslateModule } from '@ngx-translate/core';
 
 import { createContentPageletView } from 'ish-core/models/content-view/content-view.model';
 
@@ -11,6 +12,7 @@ describe('Cms Image Component', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
+      imports: [TranslateModule.forRoot()],
       declarations: [CMSImageComponent],
     }).compileComponents();
   });

diff --git a/...nents/checkout/basket-invoice-address-widget/basket-invoice-address-widget.component.html b/...nents/checkout/basket-invoice-address-widget/basket-invoice-address-widget.component.html
@@ -6,7 +6,7 @@ <h2>{{ 'checkout.address.billing.label' | translate }}</h2>
       *ngIf="collapseChange | async"
       [routerLink]="[]"
       class="btn-tool float-right"
-      title="{{ 'checkout.address.update.button.label' | translate }}"
+      title="{{ 'checkout.address.update.button.invoice.label' | translate }}"
       (click)="showAddressForm(address)"
       data-testing-id="edit-invoice-address-link"
     >
@@ -37,7 +37,7 @@ <h2>{{ 'checkout.address.billing.label' | translate }}</h2>
     [attr.aria-expanded]="(collapseChange | async) === false"
     aria-controls="invoice-address-panel"
   >
-    {{ 'checkout.create_address.link' | translate }}
+    {{ 'checkout.create_invoice_address.link' | translate }}
   </button>
 </div>
 

diff --git a/...ponents/checkout/basket-invoice-address-widget/basket-invoice-address-widget.component.ts b/...ponents/checkout/basket-invoice-address-widget/basket-invoice-address-widget.component.ts
@@ -59,7 +59,7 @@ export class BasketInvoiceAddressWidgetComponent implements OnInit, OnDestroy {
       .pipe(
         map(address =>
           address
-            ? 'checkout.addresses.select_a_different_address.default'
+            ? 'checkout.addresses.select_a_different_invoice_address.default'
             : 'checkout.addresses.select_invoice_address.button'
         ),
         takeUntil(this.destroy$)

diff --git a/...nts/checkout/basket-shipping-address-widget/basket-shipping-address-widget.component.html b/...nts/checkout/basket-shipping-address-widget/basket-shipping-address-widget.component.html
@@ -8,7 +8,7 @@ <h2>{{ 'checkout.address.shipping.label' | translate }}</h2>
           *ngIf="collapseChange | async"
           [routerLink]="[]"
           class="btn-tool"
-          title="{{ 'checkout.address.update.button.label' | translate }}"
+          title="{{ 'checkout.address.update.button.shipping.label' | translate }}"
           (click)="showAddressForm(address)"
           data-testing-id="edit-shipping-address-link"
         >
@@ -72,7 +72,7 @@ <h2>{{ 'checkout.address.shipping.label' | translate }}</h2>
     [attr.aria-expanded]="(collapseChange | async) === false"
     aria-controls="shipping-address-panel"
   >
-    {{ 'checkout.create_address.link' | translate }}
+    {{ 'checkout.create_shipping_address.link' | translate }}
   </button>
 </div>
 

diff --git a/...nents/checkout/basket-shipping-address-widget/basket-shipping-address-widget.component.ts b/...nents/checkout/basket-shipping-address-widget/basket-shipping-address-widget.component.ts
@@ -69,7 +69,7 @@ export class BasketShippingAddressWidgetComponent implements OnInit, OnDestroy {
       .pipe(
         map(address =>
           address
-            ? 'checkout.addresses.select_a_different_address.default'
+            ? 'checkout.addresses.select_a_different_shipping_address.default'
             : 'checkout.addresses.select_shipping_address.button'
         ),
         takeUntil(this.destroy$)

diff --git a/src/app/shared/components/common/breadcrumb/breadcrumb.component.html b/src/app/shared/components/common/breadcrumb/breadcrumb.component.html
@@ -1,4 +1,4 @@
-<div class="breadcrumbs row">
+<nav class="breadcrumbs row" aria-label="breadcrumbs">
   <ol class="breadcrumbs-list">
     <li *ngIf="showHome" class="breadcrumbs-list breadcrumbs-list-home">
       <a class="breadcrumbs-list-link breadcrumbs-list-link-home" rel="home" routerLink="/home">{{
@@ -25,8 +25,10 @@
       <a *ngIf="item.link; else noLink" [routerLink]="item.link" class="breadcrumbs-list-link">{{
         item.text || (item.key | translate)
       }}</a>
-      <ng-template #noLink>{{ item.text || (item.key | translate) }}</ng-template>
-      <span *ngIf="!last" class="breadcrumb-list-separator">{{ separator }}</span>
+      <ng-template #noLink>
+        <div aria-current="location">{{ item.text || (item.key | translate) }}</div>
+      </ng-template>
+      <span *ngIf="!last" class="breadcrumb-list-separator" aria-hidden="true">{{ separator }}</span>
     </li>
   </ol>
-</div>
+</nav>
diff --git a/src/app/shared/components/common/in-place-edit/in-place-edit.component.html b/src/app/shared/components/common/in-place-edit/in-place-edit.component.html
@@ -1,19 +1,16 @@
 <ng-container *ngIf="viewMode; else edit">
-  <div
-    class="d-flex flex-row align-items-baseline"
-    [title]="'inplace_edit.click_to_edit' | translate"
-    (mouseenter)="setHover()"
-    (mouseleave)="unsetHover()"
-  >
+  <div class="d-flex flex-row align-items-baseline" [title]="'inplace_edit.click_to_edit' | translate">
     <ng-content select=".form-control-plaintext"></ng-content>
-    <a *ngIf="hover"><fa-icon class="pl-2 mr-auto btn-link" [icon]="['fas', 'pencil-alt']"></fa-icon></a>
+    <button (click)="changeEditMode()" class="btn btn-link">
+      <fa-icon class="pl-2 mr-auto btn-link" [icon]="['fas', 'pencil-alt']"></fa-icon>
+    </button>
   </div>
 </ng-container>
 <ng-template #edit>
   <div class="d-flex flex-row align-items-baseline">
     <ng-content select=".form-control"></ng-content>
     <button
-      class="btn btn-link ml-2"
+      class="btn btn-link"
       data-testing-id="confirm"
       [title]="'inplace_edit.save' | translate"
       (click)="confirm()"

diff --git a/src/app/shared/components/common/in-place-edit/in-place-edit.component.scss b/src/app/shared/components/common/in-place-edit/in-place-edit.component.scss
@@ -1,6 +1,7 @@
 .btn-link {
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
+  padding: 5px 5px 5px 0;
   margin-right: 0 !important;
+  margin-bottom: 0;
   font-size: 16px;
+  border: 0;
 }
diff --git a/src/app/shared/components/common/in-place-edit/in-place-edit.component.spec.ts b/src/app/shared/components/common/in-place-edit/in-place-edit.component.spec.ts
@@ -59,8 +59,10 @@ describe('In Place Edit Component', () => {
       <ish-in-place-edit
         ><div class="d-flex flex-row align-items-baseline" title="inplace_edit.click_to_edit">
           <p class="form-control-plaintext">VIEW</p>
-        </div></ish-in-place-edit
-      >
+          <button class="btn btn-link">
+            <fa-icon class="pl-2 mr-auto btn-link" ng-reflect-icon="fas,pencil-alt"></fa-icon>
+          </button></div
+      ></ish-in-place-edit>
     `);
   });
 
@@ -73,7 +75,7 @@ describe('In Place Edit Component', () => {
         ><div class="d-flex flex-row align-items-baseline">
           <input class="form-control" /><button
             data-testing-id="confirm"
-            class="btn btn-link ml-2"
+            class="btn btn-link"
             title="inplace_edit.save"
           >
             <fa-icon ng-reflect-icon="fas,check"></fa-icon></button
@@ -101,8 +103,10 @@ describe('In Place Edit Component', () => {
         <ish-in-place-edit
           ><div class="d-flex flex-row align-items-baseline" title="inplace_edit.click_to_edit">
             <p class="form-control-plaintext">VIEW</p>
-          </div></ish-in-place-edit
-        >
+            <button class="btn btn-link">
+              <fa-icon class="pl-2 mr-auto btn-link" ng-reflect-icon="fas,pencil-alt"></fa-icon>
+            </button></div
+        ></ish-in-place-edit>
       `);
     });
 
@@ -123,8 +127,10 @@ describe('In Place Edit Component', () => {
         <ish-in-place-edit
           ><div class="d-flex flex-row align-items-baseline" title="inplace_edit.click_to_edit">
             <p class="form-control-plaintext">VIEW</p>
-          </div></ish-in-place-edit
-        >
+            <button class="btn btn-link">
+              <fa-icon class="pl-2 mr-auto btn-link" ng-reflect-icon="fas,pencil-alt"></fa-icon>
+            </button></div
+        ></ish-in-place-edit>
       `);
     });
 
@@ -145,8 +151,10 @@ describe('In Place Edit Component', () => {
         <ish-in-place-edit
           ><div class="d-flex flex-row align-items-baseline" title="inplace_edit.click_to_edit">
             <p class="form-control-plaintext">VIEW</p>
-          </div></ish-in-place-edit
-        >
+            <button class="btn btn-link">
+              <fa-icon class="pl-2 mr-auto btn-link" ng-reflect-icon="fas,pencil-alt"></fa-icon>
+            </button></div
+        ></ish-in-place-edit>
       `);
     });
 

diff --git a/src/app/shared/components/common/in-place-edit/in-place-edit.component.ts b/src/app/shared/components/common/in-place-edit/in-place-edit.component.ts
@@ -34,6 +34,7 @@ export class InPlaceEditComponent implements AfterViewInit, OnDestroy {
     @Inject(DOCUMENT) private document: Document
   ) {}
 
+  // change into edit mode by clicking on the text
   ngAfterViewInit() {
     fromEvent(this.document, 'mousedown')
       .pipe(
@@ -57,30 +58,33 @@ export class InPlaceEditComponent implements AfterViewInit, OnDestroy {
       });
   }
 
+  // change into edit mode by clicking the pen
+  changeEditMode() {
+    if (this.mode === 'edit') {
+      setTimeout(() => {
+        this.host.nativeElement.querySelector('.form-control')?.focus();
+      }, 200);
+    }
+    if (this.mode === 'view') {
+      this.confirm();
+      this.mode = 'edit';
+    }
+  }
+
   confirm() {
     this.mode = 'view';
-    this.unsetHover();
     this.edited.emit();
   }
 
   cancel() {
     this.mode = 'view';
-    this.unsetHover();
     this.aborted.emit();
   }
 
   get viewMode() {
     return this.mode === 'view';
   }
 
-  setHover() {
-    this.hover = true;
-  }
-
-  unsetHover() {
-    this.hover = false;
-  }
-
   ngOnDestroy() {
     this.destroy$.next();
     this.destroy$.complete();

diff --git a/src/app/shared/components/common/info-box/info-box.component.html b/src/app/shared/components/common/info-box/info-box.component.html
@@ -3,7 +3,7 @@
     *ngIf="editRouterLink"
     class="float-right btn-tool"
     [routerLink]="editRouterLink"
-    [title]="'checkout.address.update.label' | translate"
+    [title]="'checkout.address.update.label' | translate : { '0': heading | translate }"
   >
     <fa-icon [icon]="['fas', 'pencil-alt']"></fa-icon>
   </a>

diff --git a/src/app/shared/components/filter/filter-dropdown/filter-dropdown.component.html b/src/app/shared/components/filter/filter-dropdown/filter-dropdown.component.html
@@ -1,5 +1,5 @@
 <div ngbDropdown autoClose="outside">
-  <a
+  <button
     ngbDropdownToggle
     class="form-control"
     role="button"
@@ -10,7 +10,7 @@
     [attr.title]="placeholder !== filterElement.name ? placeholder : null"
   >
     <span>{{ placeholder }}</span>
-  </a>
+  </button>
   <div ngbDropdownMenu aria-labelledby="dropdownMenuLink">
     <a
       *ngFor="let facet of filterElement.facets; trackBy: trackByFn"

diff --git a/src/app/shared/components/filter/filter-dropdown/filter-dropdown.component.scss b/src/app/shared/components/filter/filter-dropdown/filter-dropdown.component.scss
@@ -1,10 +1,12 @@
-a {
+a,
+button {
   display: flex;
   padding-right: 20px;
 
   span:first-child {
     flex: 1;
     overflow: hidden;
+    text-align: left;
     text-overflow: ellipsis;
     white-space: nowrap;
   }