From 2a895a2cb26d18c9cc5ff1f7e395cb39305ce9a2 Mon Sep 17 00:00:00 2001
From: LucasHengelhaupt <l.hengelhaupt@intershop.com>
Date: Thu, 29 Jun 2023 18:09:14 +0200
Subject: [PATCH] feat: use aria-labels in forms

---
 .../cost-center-budget.component.html         |  2 +-
 .../cost-center-budget.component.spec.ts      | 22 ++---------
 ...st-center-buyer-edit-dialog.component.html |  8 +---
 .../user-budget/user-budget.component.html    |  2 +-
 .../user-budget/user-budget.component.spec.ts | 32 ++--------------
 .../cost-center-buyers-page.component.ts      |  2 +
 .../requisitions-list.component.html          |  5 ++-
 .../requisition-reject-dialog.component.html  |  8 +---
 .../address-doctor-modal.component.html       |  8 +---
 ...r-template-detail-line-item.component.html |  2 +-
 ...template-preferences-dialog.component.html |  8 +---
 ...select-order-template-modal.component.html |  8 +---
 ...ct-notification-edit-dialog.component.html |  8 +---
 .../oci-configuration-form.component.ts       |  6 +++
 .../quickorder-csv-form.component.html        |  2 +-
 ...product-add-to-quote-dialog.component.html |  8 +---
 .../quote-edit/quote-edit.component.html      | 12 +++---
 ...roduct-review-create-dialog.component.html |  8 +---
 .../select-wishlist-modal.component.html      |  8 +---
 ...wishlist-preferences-dialog.component.html |  8 +---
 .../cookies-modal.component.html              |  8 +---
 .../cookies-modal.component.spec.ts           |  7 +++-
 .../basket-address-summary.component.html     |  6 +--
 .../basket-buyer/basket-buyer.component.html  |  2 +-
 ...sket-invoice-address-widget.component.html |  2 +-
 ...ket-shipping-address-widget.component.html |  2 +-
 .../breadcrumb/breadcrumb.component.html      |  2 +-
 .../in-place-edit.component.spec.ts           | 38 ++++---------------
 .../common/info-box/info-box.component.html   |  2 +-
 .../modal-dialog-link.component.html          |  2 +-
 .../modal-dialog-link.component.spec.ts       |  6 +--
 .../modal-dialog/modal-dialog.component.html  |  8 +---
 .../common/paging/paging.component.html       | 12 ++++--
 .../common/paging/paging.component.spec.ts    |  2 +
 .../filter-dropdown.component.spec.ts         | 24 ++----------
 .../login-modal/login-modal.component.html    |  9 +----
 .../product-list-toolbar.component.html       |  4 +-
 .../product-quantity.component.html           |  2 +-
 .../product-quantity.component.spec.ts        | 18 +++------
 .../promotion-details.component.html          |  6 ++-
 .../confirm-leave-modal.component.html        |  2 +-
 .../header-default.component.spec.ts.snap     | 36 +++++++++++++++---
 .../header-default.component.html             |  6 ++-
 .../header-navigation.component.html          |  6 ++-
 .../login-status/login-status.component.html  | 20 +++++++---
 .../sub-category-navigation.component.html    |  4 +-
 .../sub-category-navigation.component.spec.ts | 30 +++------------
 src/assets/i18n/de_DE.json                    | 25 ++++++++++--
 src/assets/i18n/en_US.json                    | 23 +++++++++--
 src/assets/i18n/fr_FR.json                    | 29 +++++++++++---
 50 files changed, 218 insertions(+), 292 deletions(-)

diff --git a/projects/organization-management/src/app/components/cost-center-budget/cost-center-budget.component.html b/projects/organization-management/src/app/components/cost-center-budget/cost-center-budget.component.html
index d59d35800e..f8eef700fc 100644
--- a/projects/organization-management/src/app/components/cost-center-budget/cost-center-budget.component.html
+++ b/projects/organization-management/src/app/components/cost-center-budget/cost-center-budget.component.html
@@ -6,7 +6,7 @@
         [ngClass]="{ 'bg-danger': spentBudgetPercentage * 100 > 90 }"
         [ngStyle]="{ width: progressBarWidth | percent }"
         role="progressbar"
-        [attr.aria-label]="'Spent budget of cost center ' + costCenter.name"
+        [attr.aria-label]="'account.budget.already_spent.costcenter.aria_label' | translate : { '0': costCenter.name }"
         [attr.aria-valuetext]="spentBudgetPercentage | percent"
       >
         <span class="progress-display">{{ spentBudgetPercentage | percent }}</span>
diff --git a/projects/organization-management/src/app/components/cost-center-budget/cost-center-budget.component.spec.ts b/projects/organization-management/src/app/components/cost-center-budget/cost-center-budget.component.spec.ts
index d6b09f43b8..4c074ceee4 100644
--- a/projects/organization-management/src/app/components/cost-center-budget/cost-center-budget.component.spec.ts
+++ b/projects/organization-management/src/app/components/cost-center-budget/cost-center-budget.component.spec.ts
@@ -1,6 +1,7 @@
 import { SimpleChange, SimpleChanges } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { NgbPopoverModule } from '@ng-bootstrap/ng-bootstrap';
+import { TranslateModule } from '@ngx-translate/core';
 
 import { CostCenter } from 'ish-core/models/cost-center/cost-center.model';
 
@@ -14,7 +15,7 @@ describe('Cost Center Budget Component', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [NgbPopoverModule],
+      imports: [NgbPopoverModule, TranslateModule.forRoot()],
       declarations: [CostCenterBudgetComponent],
     }).compileComponents();
   });
@@ -58,23 +59,6 @@ describe('Cost Center Budget Component', () => {
   it('should display budget progress bar when rendering', () => {
     component.ngOnChanges(basketChange);
     fixture.detectChanges();
-
-    expect(element).toMatchInlineSnapshot(`
-      <div>
-        <div placement="top" data-testing-id="cost-center-budget-popover" ng-reflect-placement="top">
-          <div class="progress">
-            <div
-              role="progressbar"
-              class="progress-bar"
-              aria-label="Spent budget of cost center Oil Corp Headquarter"
-              aria-valuetext="40%"
-              style="width: 40%"
-            >
-              <span class="progress-display">40%</span>
-            </div>
-          </div>
-        </div>
-      </div>
-    `);
+    expect(element.querySelector('[data-testing-id="cost-center-budget-popover"]')).toBeTruthy();
   });
 });
diff --git a/projects/organization-management/src/app/components/cost-center-buyer-edit-dialog/cost-center-buyer-edit-dialog.component.html b/projects/organization-management/src/app/components/cost-center-buyer-edit-dialog/cost-center-buyer-edit-dialog.component.html
index a593f7490c..e45afbc5ba 100644
--- a/projects/organization-management/src/app/components/cost-center-buyer-edit-dialog/cost-center-buyer-edit-dialog.component.html
+++ b/projects/organization-management/src/app/components/cost-center-buyer-edit-dialog/cost-center-buyer-edit-dialog.component.html
@@ -1,13 +1,7 @@
 <ng-template #modal let-editModal>
   <div class="modal-header">
     <h2 class="modal-title">{{ modalHeader | translate }}</h2>
-    <button
-      type="button"
-      class="close"
-      [title]="'dialog.close.text' | translate"
-      [attr.aria-label]="'dialog.close.text' | translate"
-      (click)="hide()"
-    >
+    <button type="button" class="close" [title]="'dialog.close.text' | translate" (click)="hide()">
       <span aria-hidden="true">&times;</span>
     </button>
   </div>
diff --git a/projects/organization-management/src/app/components/user-budget/user-budget.component.html b/projects/organization-management/src/app/components/user-budget/user-budget.component.html
index 5b4c33a7b0..c813ad28fd 100644
--- a/projects/organization-management/src/app/components/user-budget/user-budget.component.html
+++ b/projects/organization-management/src/app/components/user-budget/user-budget.component.html
@@ -25,7 +25,7 @@
           [ngClass]="{ 'bg-danger': usedBudgetPercentage * 100 > 90 }"
           [ngStyle]="{ width: usedBudgetPercentage | percent }"
           role="progressbar"
-          aria-label="Spent budget"
+          [attr.aria-label]="'account.budget.already_spent.label' | translate"
           [attr.aria-valuetext]="usedBudgetPercentage | percent"
         >
           <span class="progress-display">{{ usedBudgetPercentage | percent }}</span>
diff --git a/projects/organization-management/src/app/components/user-budget/user-budget.component.spec.ts b/projects/organization-management/src/app/components/user-budget/user-budget.component.spec.ts
index 574f1e41bb..f726a035f5 100644
--- a/projects/organization-management/src/app/components/user-budget/user-budget.component.spec.ts
+++ b/projects/organization-management/src/app/components/user-budget/user-budget.component.spec.ts
@@ -61,35 +61,9 @@ describe('User Budget Component', () => {
     component.ngOnChanges();
     fixture.detectChanges();
 
-    expect(element).toMatchInlineSnapshot(`
-      <div>
-        <dl class="row dl-horizontal dl-separator">
-          <dt class="col-7">account.user.new.order_spend_limit.label</dt>
-          <dd class="col-5 font-weight-bold text-right">USD 100</dd>
-        </dl>
-        <dl class="row dl-horizontal dl-separator">
-          <dt class="col-7">account.budget.label</dt>
-          <dd class="col-5 font-weight-bold text-right">USD 5000</dd>
-        </dl>
-        <dl class="row dl-horizontal dl-separator">
-          <dt class="col-7">account.budget.already_spent.label</dt>
-          <dd class="col-5 font-weight-bold text-right">USD 2500</dd>
-        </dl>
-        <div placement="top" data-testing-id="user-budget-popover" ng-reflect-placement="top">
-          <div class="progress">
-            <div
-              role="progressbar"
-              aria-label="Spent budget"
-              class="progress-bar"
-              aria-valuetext="50%"
-              style="width: 50%"
-            >
-              <span class="progress-display">50%</span>
-            </div>
-          </div>
-        </div>
-      </div>
-    `);
+    expect(element.textContent).toContain(
+      'account.user.new.order_spend_limit.label USD 100 account.budget.labelUSD 5000account.budget.already_spent.labelUSD 250050%'
+    );
   });
 
   it('should return 2500 used budget when remaining budget is 2500', () => {
diff --git a/projects/organization-management/src/app/pages/cost-center-buyers/cost-center-buyers-page.component.ts b/projects/organization-management/src/app/pages/cost-center-buyers/cost-center-buyers-page.component.ts
index 65b759446b..7edcb0a8cc 100644
--- a/projects/organization-management/src/app/pages/cost-center-buyers/cost-center-buyers-page.component.ts
+++ b/projects/organization-management/src/app/pages/cost-center-buyers/cost-center-buyers-page.component.ts
@@ -105,6 +105,7 @@ export class CostCenterBuyersPageComponent implements OnDestroy, OnInit {
               className: 'col-1 col-md-2 list-item pb-0',
               props: {
                 fieldClass: 'offset-md-2 col-2 mt-1',
+                ariaLabel: 'Select buyer to add to costcenter',
               },
             },
             {
@@ -125,6 +126,7 @@ export class CostCenterBuyersPageComponent implements OnDestroy, OnInit {
                 addonLeft: {
                   text: this.appFacade.currencySymbol$(),
                 },
+                ariaLabel: 'Buyer budget',
               },
               validators: {
                 validation: [SpecialValidators.moneyAmount],
diff --git a/projects/requisition-management/src/app/components/requisitions-list/requisitions-list.component.html b/projects/requisition-management/src/app/components/requisitions-list/requisitions-list.component.html
index 98c5c1de68..77aa060eac 100644
--- a/projects/requisition-management/src/app/components/requisitions-list/requisitions-list.component.html
+++ b/projects/requisition-management/src/app/components/requisitions-list/requisitions-list.component.html
@@ -15,7 +15,10 @@
         *cdkCellDef="let requisition"
         [attr.data-label]="'account.approvallist.table.id_of_order' | translate"
       >
-        <a [routerLink]="[requisition.id, { status: status }]" aria-label="Navigate to requisition details.">
+        <a
+          [routerLink]="[requisition.id, { status: status }]"
+          [attr.aria-label]="'account.approvallist.table.id_of_order.aria_label' | translate"
+        >
           {{ requisition.requisitionNo }}
         </a>
       </td>
diff --git a/projects/requisition-management/src/app/pages/requisition-detail/requisition-reject-dialog/requisition-reject-dialog.component.html b/projects/requisition-management/src/app/pages/requisition-detail/requisition-reject-dialog/requisition-reject-dialog.component.html
index 131ea5a4ab..f65659ee25 100644
--- a/projects/requisition-management/src/app/pages/requisition-detail/requisition-reject-dialog/requisition-reject-dialog.component.html
+++ b/projects/requisition-management/src/app/pages/requisition-detail/requisition-reject-dialog/requisition-reject-dialog.component.html
@@ -2,13 +2,7 @@
   <div class="modal-content">
     <div class="modal-header">
       <h2 class="modal-title">{{ 'approval.rejectform.reject_order.heading' | translate }}</h2>
-      <button
-        type="button"
-        class="close"
-        [title]="'dialog.close.text' | translate"
-        [attr.aria-label]="'dialog.close.text' | translate"
-        (click)="hide()"
-      >
+      <button type="button" class="close" [title]="'dialog.close.text' | translate" (click)="hide()">
         <span aria-hidden="true">&times;</span>
       </button>
     </div>
diff --git a/src/app/extensions/address-doctor/shared/address-doctor-modal/address-doctor-modal.component.html b/src/app/extensions/address-doctor/shared/address-doctor-modal/address-doctor-modal.component.html
index 7d77ca450f..fc42990b6d 100644
--- a/src/app/extensions/address-doctor/shared/address-doctor-modal/address-doctor-modal.component.html
+++ b/src/app/extensions/address-doctor/shared/address-doctor-modal/address-doctor-modal.component.html
@@ -1,13 +1,7 @@
 <ng-template #template>
   <div class="modal-header">
     <h2 class="modal-title">{{ 'address.doctor.suggestion.title' | translate }}</h2>
-    <button
-      type="button"
-      class="close"
-      [title]="'dialog.close.text' | translate"
-      [attr.aria-label]="'dialog.close.text' | translate"
-      (click)="hide()"
-    >
+    <button type="button" class="close" [title]="'dialog.close.text' | translate" (click)="hide()">
       <span aria-hidden="true">&times;</span>
     </button>
   </div>
diff --git a/src/app/extensions/order-templates/pages/account-order-template-detail/account-order-template-detail-line-item/account-order-template-detail-line-item.component.html b/src/app/extensions/order-templates/pages/account-order-template-detail/account-order-template-detail-line-item/account-order-template-detail-line-item.component.html
index 4e112361cc..d5fd47f4c2 100644
--- a/src/app/extensions/order-templates/pages/account-order-template-detail/account-order-template-detail-line-item/account-order-template-detail-line-item.component.html
+++ b/src/app/extensions/order-templates/pages/account-order-template-detail/account-order-template-detail-line-item/account-order-template-detail-line-item.component.html
@@ -4,7 +4,7 @@
       type="checkbox"
       data-testing-id="productCheckbox"
       [formControl]="checkBox"
-      aria-label="Select item to add to cart"
+      [attr.aria-label]="'account.order_template.add_to_template.checkbox.aria_label' | translate"
     />
     <div class="d-none d-md-inline">
       <ish-product-image imageType="S" [link]="true"></ish-product-image>
diff --git a/src/app/extensions/order-templates/shared/order-template-preferences-dialog/order-template-preferences-dialog.component.html b/src/app/extensions/order-templates/shared/order-template-preferences-dialog/order-template-preferences-dialog.component.html
index 65c42b31dd..abb7861f71 100644
--- a/src/app/extensions/order-templates/shared/order-template-preferences-dialog/order-template-preferences-dialog.component.html
+++ b/src/app/extensions/order-templates/shared/order-template-preferences-dialog/order-template-preferences-dialog.component.html
@@ -1,13 +1,7 @@
 <ng-template #modal let-addModal>
   <div class="modal-header">
     <h2 class="modal-title">{{ modalHeader | translate }}</h2>
-    <button
-      type="button"
-      class="close"
-      [title]="'dialog.close.text' | translate"
-      [attr.aria-label]="'dialog.close.text' | translate"
-      (click)="hide()"
-    >
+    <button type="button" class="close" [title]="'dialog.close.text' | translate" (click)="hide()">
       <span aria-hidden="true">&times;</span>
     </button>
   </div>
diff --git a/src/app/extensions/order-templates/shared/select-order-template-modal/select-order-template-modal.component.html b/src/app/extensions/order-templates/shared/select-order-template-modal/select-order-template-modal.component.html
index dd0c1d7a70..28d38348cb 100644
--- a/src/app/extensions/order-templates/shared/select-order-template-modal/select-order-template-modal.component.html
+++ b/src/app/extensions/order-templates/shared/select-order-template-modal/select-order-template-modal.component.html
@@ -1,13 +1,7 @@
 <ng-template #modal let-selectModal>
   <div class="modal-header">
     <h2 class="modal-title">{{ headerTranslationKey | translate }}</h2>
-    <button
-      type="button"
-      class="close"
-      [title]="'dialog.close.text' | translate"
-      [attr.aria-label]="'dialog.close.text' | translate"
-      (click)="hide()"
-    >
+    <button type="button" class="close" [title]="'dialog.close.text' | translate" (click)="hide()">
       <span aria-hidden="true">&times;</span>
     </button>
   </div>
diff --git a/src/app/extensions/product-notifications/shared/product-notification-edit-dialog/product-notification-edit-dialog.component.html b/src/app/extensions/product-notifications/shared/product-notification-edit-dialog/product-notification-edit-dialog.component.html
index 3c69e574bb..446fb02547 100644
--- a/src/app/extensions/product-notifications/shared/product-notification-edit-dialog/product-notification-edit-dialog.component.html
+++ b/src/app/extensions/product-notifications/shared/product-notification-edit-dialog/product-notification-edit-dialog.component.html
@@ -5,13 +5,7 @@ <h2 class="modal-title">
         {{ product.name }}
       </ng-container>
     </h2>
-    <button
-      type="button"
-      class="close"
-      [title]="'dialog.close.text' | translate"
-      [attr.aria-label]="'dialog.close.text' | translate"
-      (click)="hide()"
-    >
+    <button type="button" class="close" [title]="'dialog.close.text' | translate" (click)="hide()">
       <span aria-hidden="true">&times;</span>
     </button>
   </div>
diff --git a/src/app/extensions/punchout/pages/account-punchout-configuration/oci-configuration-form/oci-configuration-form.component.ts b/src/app/extensions/punchout/pages/account-punchout-configuration/oci-configuration-form/oci-configuration-form.component.ts
index 4b567cba55..08b326d122 100644
--- a/src/app/extensions/punchout/pages/account-punchout-configuration/oci-configuration-form/oci-configuration-form.component.ts
+++ b/src/app/extensions/punchout/pages/account-punchout-configuration/oci-configuration-form/oci-configuration-form.component.ts
@@ -88,6 +88,7 @@ export class OciConfigurationFormComponent implements OnInit, OnDestroy {
                 className: 'list-item col-md-3',
                 props: {
                   fieldClass: 'col-md-11',
+                  ariaLabel: 'Parameter value',
                 },
               },
               {
@@ -112,6 +113,9 @@ export class OciConfigurationFormComponent implements OnInit, OnDestroy {
                           dependentlyRequired: 'account.punchout.configuration.form.mapping.from.error',
                         },
                       },
+                      props: {
+                        ariaLabel: 'Map from value',
+                      },
                     },
                     {
                       key: 'mapToValue',
@@ -120,6 +124,7 @@ export class OciConfigurationFormComponent implements OnInit, OnDestroy {
                       props: {
                         fieldClass: 'ml-1',
                         arrowRight: true,
+                        ariaLabel: 'Map to value',
                       },
                       validation: {
                         messages: {
@@ -138,6 +143,7 @@ export class OciConfigurationFormComponent implements OnInit, OnDestroy {
                 props: {
                   fieldClass: 'col-12',
                   options,
+                  ariaLabel: 'Format of value',
                 },
               },
             ],
diff --git a/src/app/extensions/quickorder/shared/quickorder-csv-form/quickorder-csv-form.component.html b/src/app/extensions/quickorder/shared/quickorder-csv-form/quickorder-csv-form.component.html
index 3d5affa903..3dd390749e 100644
--- a/src/app/extensions/quickorder/shared/quickorder-csv-form/quickorder-csv-form.component.html
+++ b/src/app/extensions/quickorder/shared/quickorder-csv-form/quickorder-csv-form.component.html
@@ -12,7 +12,7 @@ <h3>{{ 'quickorder.page.csv.title' | translate }}</h3>
           class="form-control"
           accept=".csv"
           (change)="uploadListener($event.target)"
-          aria-label="Upload CSV File"
+          [attr.aria-label]="'quickorder.page.csv.file.upload.aria_label' | translate"
         />
         <div [ngSwitch]="status">
           <small *ngSwitchCase="'IncorrectInput'" class="has-error"
diff --git a/src/app/extensions/quoting/shared/product-add-to-quote-dialog/product-add-to-quote-dialog.component.html b/src/app/extensions/quoting/shared/product-add-to-quote-dialog/product-add-to-quote-dialog.component.html
index db842b8d84..7e6b1a77ae 100644
--- a/src/app/extensions/quoting/shared/product-add-to-quote-dialog/product-add-to-quote-dialog.component.html
+++ b/src/app/extensions/quoting/shared/product-add-to-quote-dialog/product-add-to-quote-dialog.component.html
@@ -10,13 +10,7 @@ <h2 class="modal-title">
           {{ quote.displayName || quote.number }}
         </ng-template>
       </h2>
-      <button
-        type="button"
-        class="close"
-        [title]="'dialog.close.text' | translate"
-        [attr.aria-label]="'dialog.close.text' | translate"
-        (click)="hide()"
-      >
+      <button type="button" class="close" [title]="'dialog.close.text' | translate" (click)="hide()">
         <span aria-hidden="true">&times;</span>
       </button>
     </div>
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
index a54b7e1119..408518afb6 100644
--- 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 }">
@@ -33,9 +33,9 @@
 
       <!-- 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/rating/shared/product-review-create-dialog/product-review-create-dialog.component.html b/src/app/extensions/rating/shared/product-review-create-dialog/product-review-create-dialog.component.html
index 9aacd1d2d5..1ef413def0 100644
--- a/src/app/extensions/rating/shared/product-review-create-dialog/product-review-create-dialog.component.html
+++ b/src/app/extensions/rating/shared/product-review-create-dialog/product-review-create-dialog.component.html
@@ -2,13 +2,7 @@
   <div class="modal-content">
     <div class="modal-header">
       <h2 class="modal-title">{{ 'product.reviews.create.dialog.heading' | translate }}</h2>
-      <button
-        type="button"
-        class="close"
-        [title]="'dialog.close.text' | translate"
-        [attr.aria-label]="'dialog.close.text' | translate"
-        (click)="hide()"
-      >
+      <button type="button" class="close" [title]="'dialog.close.text' | translate" (click)="hide()">
         <span aria-hidden="true">&times;</span>
       </button>
     </div>
diff --git a/src/app/extensions/wishlists/shared/select-wishlist-modal/select-wishlist-modal.component.html b/src/app/extensions/wishlists/shared/select-wishlist-modal/select-wishlist-modal.component.html
index 3eb58ce72c..c71926cb2d 100644
--- a/src/app/extensions/wishlists/shared/select-wishlist-modal/select-wishlist-modal.component.html
+++ b/src/app/extensions/wishlists/shared/select-wishlist-modal/select-wishlist-modal.component.html
@@ -1,13 +1,7 @@
 <ng-template #modal let-selectModal>
   <div class="modal-header">
     <h2 class="modal-title">{{ headerTranslationKey | translate }}</h2>
-    <button
-      type="button"
-      class="close"
-      [title]="'dialog.close.text' | translate"
-      [attr.aria-label]="'dialog.close.text' | translate"
-      (click)="hide()"
-    >
+    <button type="button" class="close" [title]="'dialog.close.text' | translate" (click)="hide()">
       <span aria-hidden="true">&times;</span>
     </button>
   </div>
diff --git a/src/app/extensions/wishlists/shared/wishlist-preferences-dialog/wishlist-preferences-dialog.component.html b/src/app/extensions/wishlists/shared/wishlist-preferences-dialog/wishlist-preferences-dialog.component.html
index b6c6a97f60..dcd0c8b2c0 100644
--- a/src/app/extensions/wishlists/shared/wishlist-preferences-dialog/wishlist-preferences-dialog.component.html
+++ b/src/app/extensions/wishlists/shared/wishlist-preferences-dialog/wishlist-preferences-dialog.component.html
@@ -1,13 +1,7 @@
 <ng-template #modal let-addModal>
   <div class="modal-header">
     <h2 class="modal-title">{{ modalHeader | translate }}</h2>
-    <button
-      type="button"
-      class="close"
-      [title]="'dialog.close.text' | translate"
-      [attr.aria-label]="'dialog.close.text' | translate"
-      (click)="hide()"
-    >
+    <button type="button" class="close" [title]="'dialog.close.text' | translate" (click)="hide()">
       <span aria-hidden="true">&times;</span>
     </button>
   </div>
diff --git a/src/app/pages/cookies/cookies-modal/cookies-modal.component.html b/src/app/pages/cookies/cookies-modal/cookies-modal.component.html
index f98990d4b4..c0bd72aef1 100644
--- a/src/app/pages/cookies/cookies-modal/cookies-modal.component.html
+++ b/src/app/pages/cookies/cookies-modal/cookies-modal.component.html
@@ -1,13 +1,7 @@
 <div class="cookies-modal">
   <div class="modal-header">
     <h2>{{ 'cookie.preferences.heading' | translate }}</h2>
-    <button
-      type="button"
-      class="close"
-      [title]="'dialog.close.text' | translate"
-      [attr.aria-label]="'dialog.close.text' | translate"
-      (click)="hide()"
-    >
+    <button type="button" class="close" [title]="'dialog.close.text' | translate" (click)="hide()">
       <span aria-hidden="true">&times;</span>
     </button>
   </div>
diff --git a/src/app/pages/cookies/cookies-modal/cookies-modal.component.spec.ts b/src/app/pages/cookies/cookies-modal/cookies-modal.component.spec.ts
index 7338746245..a66ffec2a3 100644
--- a/src/app/pages/cookies/cookies-modal/cookies-modal.component.spec.ts
+++ b/src/app/pages/cookies/cookies-modal/cookies-modal.component.spec.ts
@@ -55,11 +55,16 @@ describe('Cookies Modal Component', () => {
     expect(component).toBeTruthy();
     expect(element).toBeTruthy();
     expect(() => fixture.detectChanges()).not.toThrow();
+  });
+
+  it('should render cookie modal', () => {
+    fixture.detectChanges();
+
     expect(element).toMatchInlineSnapshot(`
       <div class="cookies-modal">
         <div class="modal-header">
           <h2>cookie.preferences.heading</h2>
-          <button type="button" class="close" title="dialog.close.text" aria-label="dialog.close.text">
+          <button type="button" class="close" title="dialog.close.text">
             <span aria-hidden="true">×</span>
           </button>
         </div>
diff --git a/src/app/shared/components/basket/basket-address-summary/basket-address-summary.component.html b/src/app/shared/components/basket/basket-address-summary/basket-address-summary.component.html
index 87cc228607..a4c49ea601 100644
--- a/src/app/shared/components/basket/basket-address-summary/basket-address-summary.component.html
+++ b/src/app/shared/components/basket/basket-address-summary/basket-address-summary.component.html
@@ -4,8 +4,7 @@
     <a
       class="float-right btn-tool"
       routerLink="/checkout/address"
-      title="{{ 'checkout.address.update.label' | translate }}"
-      aria-label="Edit invoice address"
+      [title]="'checkout.address.update.invoice.label' | translate"
     >
       <fa-icon [icon]="['fas', 'pencil-alt']"></fa-icon>
     </a>
@@ -20,8 +19,7 @@ <h5 class="float-left">{{ 'checkout.address.billing.label' | translate }}</h5>
     <a
       class="float-right btn-tool"
       routerLink="/checkout/address"
-      title="{{ 'checkout.address.update.label' | translate }}"
-      aria-label="Edit shipping address"
+      [title]="'checkout.address.update.shipping.label' | translate"
     >
       <fa-icon [icon]="['fas', 'pencil-alt']"></fa-icon>
     </a>
diff --git a/src/app/shared/components/basket/basket-buyer/basket-buyer.component.html b/src/app/shared/components/basket/basket-buyer/basket-buyer.component.html
index efd17f2f85..ccb3ffc2ce 100644
--- a/src/app/shared/components/basket/basket-buyer/basket-buyer.component.html
+++ b/src/app/shared/components/basket/basket-buyer/basket-buyer.component.html
@@ -18,7 +18,7 @@
       *ngIf="editRouterLink"
       class="float-right btn-tool"
       [routerLink]="editRouterLink"
-      [title]="'checkout.address.update.label' | translate"
+      [title]="'checkout.update.label' | translate : { '0': 'checkout.widget.buyer.heading' | translate }"
     >
       <fa-icon [icon]="['fas', 'pencil-alt']"></fa-icon>
     </a>
diff --git a/src/app/shared/components/checkout/basket-invoice-address-widget/basket-invoice-address-widget.component.html b/src/app/shared/components/checkout/basket-invoice-address-widget/basket-invoice-address-widget.component.html
index dc7d5020d3..103f04d4fd 100644
--- a/src/app/shared/components/checkout/basket-invoice-address-widget/basket-invoice-address-widget.component.html
+++ b/src/app/shared/components/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.invoice.label' | translate }}"
+      [title]="'checkout.address.update.invoice.label' | translate"
       (click)="showAddressForm(address)"
       data-testing-id="edit-invoice-address-link"
     >
diff --git a/src/app/shared/components/checkout/basket-shipping-address-widget/basket-shipping-address-widget.component.html b/src/app/shared/components/checkout/basket-shipping-address-widget/basket-shipping-address-widget.component.html
index 59784b6466..9bd153c7d2 100644
--- a/src/app/shared/components/checkout/basket-shipping-address-widget/basket-shipping-address-widget.component.html
+++ b/src/app/shared/components/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.shipping.label' | translate }}"
+          title="{{ 'checkout.address.update.shipping.label' | translate }}"
           (click)="showAddressForm(address)"
           data-testing-id="edit-shipping-address-link"
         >
diff --git a/src/app/shared/components/common/breadcrumb/breadcrumb.component.html b/src/app/shared/components/common/breadcrumb/breadcrumb.component.html
index 1c465c9152..ef4ee749fd 100644
--- a/src/app/shared/components/common/breadcrumb/breadcrumb.component.html
+++ b/src/app/shared/components/common/breadcrumb/breadcrumb.component.html
@@ -1,4 +1,4 @@
-<nav class="breadcrumbs row" aria-label="breadcrumbs">
+<nav class="breadcrumbs row" [attr.aria-label]="'breadcrumbs.aria_label' | translate">
   <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">{{
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
index 284d90815c..f100ba0886 100644
--- 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
@@ -99,15 +99,7 @@ describe('In Place Edit Component', () => {
     it('should switch to view mode when clicked outside', () => {
       mousedown({ target: element });
 
-      expect(element).toMatchInlineSnapshot(`
-        <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>
-            <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>
-      `);
+      expect(element.querySelector('.form-control-plaintext').textContent).toContain('VIEW');
     });
 
     it('should emit edited event when clicked outside', done => {
@@ -119,19 +111,11 @@ describe('In Place Edit Component', () => {
     });
 
     it('should switch to view mode when clicked on confirm', () => {
-      (element.querySelector('[data-testing-id="confirm"') as HTMLButtonElement).click();
+      (element.querySelector('[data-testing-id="confirm"]') as HTMLButtonElement).click();
 
       fixture.detectChanges();
 
-      expect(element).toMatchInlineSnapshot(`
-        <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>
-            <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>
-      `);
+      expect(element.querySelector('input')).toBeFalsy();
     });
 
     it('should emit edited event when clicked on confirm', done => {
@@ -139,23 +123,15 @@ describe('In Place Edit Component', () => {
         done();
       });
 
-      (element.querySelector('[data-testing-id="confirm"') as HTMLButtonElement).click();
+      (element.querySelector('[data-testing-id="confirm"]') as HTMLButtonElement).click();
     });
 
     it('should switch to view mode when clicked on cancel', () => {
-      (element.querySelector('[data-testing-id="cancel"') as HTMLButtonElement).click();
+      (element.querySelector('[data-testing-id="cancel"]') as HTMLButtonElement).click();
 
       fixture.detectChanges();
 
-      expect(element).toMatchInlineSnapshot(`
-        <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>
-            <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>
-      `);
+      expect(element.querySelector('.form-control-plaintext').textContent).toContain('VIEW');
     });
 
     it('should emit aborted event when clicked on cancel', done => {
@@ -163,7 +139,7 @@ describe('In Place Edit Component', () => {
         done();
       });
 
-      (element.querySelector('[data-testing-id="cancel"') as HTMLButtonElement).click();
+      (element.querySelector('[data-testing-id="cancel"]') as HTMLButtonElement).click();
     });
   });
 });
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
index 42eb4d49e9..4edd5eb12c 100644
--- 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 : { '0': heading | translate }"
+    [title]="'checkout.update.label' | translate : { '0': heading | translate }"
   >
     <fa-icon [icon]="['fas', 'pencil-alt']"></fa-icon>
   </a>
diff --git a/src/app/shared/components/common/modal-dialog-link/modal-dialog-link.component.html b/src/app/shared/components/common/modal-dialog-link/modal-dialog-link.component.html
index 7b69216f4b..3c9df4cbca 100644
--- a/src/app/shared/components/common/modal-dialog-link/modal-dialog-link.component.html
+++ b/src/app/shared/components/common/modal-dialog-link/modal-dialog-link.component.html
@@ -1,4 +1,4 @@
-<a [routerLink]="[]" (click)="modalDialog.show()" rel="nofollow">{{ linkText | translate }}</a>
+<a [routerLink]="[]" (click)="modalDialog.show()" rel="nofollow" aria-haspopup="dialog">{{ linkText | translate }}</a>
 <ish-modal-dialog #modalDialog [options]="options" (shown)="shown()" (closed)="closed()">
   <ng-container *ngIf="lazyContent; else contentProjection">
     <div *ngIf="shown$ | async">
diff --git a/src/app/shared/components/common/modal-dialog-link/modal-dialog-link.component.spec.ts b/src/app/shared/components/common/modal-dialog-link/modal-dialog-link.component.spec.ts
index b6242a4a94..5fa3b73528 100644
--- a/src/app/shared/components/common/modal-dialog-link/modal-dialog-link.component.spec.ts
+++ b/src/app/shared/components/common/modal-dialog-link/modal-dialog-link.component.spec.ts
@@ -36,9 +36,7 @@ describe('Modal Dialog Link Component', () => {
     component.options = { titleText: 'Dialog Title' };
 
     expect(() => fixture.detectChanges()).not.toThrow();
-    expect(element).toMatchInlineSnapshot(`
-      <a rel="nofollow" ng-reflect-router-link="" href="/">testLink</a
-      ><ish-modal-dialog></ish-modal-dialog>
-    `);
+    expect(element.textContent).toContain('testLink');
+    expect(element.querySelector('ish-modal-dialog')).toBeTruthy();
   });
 });
diff --git a/src/app/shared/components/common/modal-dialog/modal-dialog.component.html b/src/app/shared/components/common/modal-dialog/modal-dialog.component.html
index cb9679cb71..a644dfab3b 100644
--- a/src/app/shared/components/common/modal-dialog/modal-dialog.component.html
+++ b/src/app/shared/components/common/modal-dialog/modal-dialog.component.html
@@ -1,13 +1,7 @@
 <ng-template #template>
   <div class="modal-header">
     <h2 *ngIf="options?.titleText" class="modal-title">{{ options.titleText }}</h2>
-    <button
-      type="button"
-      class="close"
-      [title]="'dialog.close.text' | translate"
-      [attr.aria-label]="'dialog.close.text' | translate"
-      (click)="hide()"
-    >
+    <button type="button" class="close" [title]="'dialog.close.text' | translate" (click)="hide()">
       <span aria-hidden="true">&times;</span>
     </button>
   </div>
diff --git a/src/app/shared/components/common/paging/paging.component.html b/src/app/shared/components/common/paging/paging.component.html
index 5eaee5130a..c3baa31999 100644
--- a/src/app/shared/components/common/paging/paging.component.html
+++ b/src/app/shared/components/common/paging/paging.component.html
@@ -1,11 +1,11 @@
-<nav *ngIf="currentPage && lastPage" aria-label="Pagination">
+<nav *ngIf="currentPage && lastPage" [attr.aria-label]="'navigation.paging.aria_label' | translate">
   <ul class="pagination">
     <li class="page-item">
       <button
         class="btn btn-primary mb-0"
         [disabled]="currentPage === 1"
         (click)="setPage(currentPage - 1)"
-        aria-label="Go To Previous Page"
+        [attr.aria-label]="'navigation.paging.previous_page.aria_label' | translate"
         [attr.aria-disabled]="currentPage === 1"
         data-testing-id="paging-previous-button"
       >
@@ -21,7 +21,11 @@
       <a
         *ngIf="p !== -1; else more"
         [attr.aria-current]="p === currentPage ? 'page' : null"
-        [attr.aria-label]="p === currentPage ? 'Current Page, Page ' + p : 'Go to Page ' + p"
+        [attr.aria-label]="
+          p === currentPage
+            ? ('navigation.paging.current_page.aria_label' | translate : { '0': p })
+            : ('navigation.paging.go_to_page.aria_label' | translate : { '0': p })
+        "
         (click)="setPage(p)"
         (keyup.enter)="setPage(p)"
         >{{ p }}</a
@@ -33,7 +37,7 @@
         class="btn btn-primary m-0"
         [disabled]="currentPage === lastPage"
         (click)="setPage(currentPage + 1)"
-        aria-label="Go To Next Page"
+        [attr.aria-label]="'navigation.paging.next_page.aria_label' | translate"
         [attr.aria-disabled]="currentPage === lastPage"
         data-testing-id="paging-next-button"
       >
diff --git a/src/app/shared/components/common/paging/paging.component.spec.ts b/src/app/shared/components/common/paging/paging.component.spec.ts
index e96f06dd8c..39d7e9e306 100644
--- a/src/app/shared/components/common/paging/paging.component.spec.ts
+++ b/src/app/shared/components/common/paging/paging.component.spec.ts
@@ -1,5 +1,6 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { FaIconComponent } from '@fortawesome/angular-fontawesome';
+import { TranslateModule } from '@ngx-translate/core';
 import { MockComponent } from 'ng-mocks';
 import { spy, verify } from 'ts-mockito';
 
@@ -12,6 +13,7 @@ describe('Paging Component', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
+      imports: [TranslateModule.forRoot()],
       declarations: [MockComponent(FaIconComponent), PagingComponent],
     }).compileComponents();
   });
diff --git a/src/app/shared/components/filter/filter-dropdown/filter-dropdown.component.spec.ts b/src/app/shared/components/filter/filter-dropdown/filter-dropdown.component.spec.ts
index f2bb686e9c..0a52648419 100644
--- a/src/app/shared/components/filter/filter-dropdown/filter-dropdown.component.spec.ts
+++ b/src/app/shared/components/filter/filter-dropdown/filter-dropdown.component.spec.ts
@@ -49,26 +49,8 @@ describe('Filter Dropdown Component', () => {
 
   it('should display popup when rendered', () => {
     fixture.detectChanges();
-    expect(element).toMatchInlineSnapshot(`
-      <div ngbdropdown="" autoclose="outside">
-        <button
-          ngbdropdowntoggle=""
-          role="button"
-          id="dropdownMenuLink"
-          data-toggle="dropdown"
-          aria-haspopup="true"
-          aria-expanded="false"
-          class="form-control"
-        >
-          <span>Color</span>
-        </button>
-        <div ngbdropdownmenu="" aria-labelledby="dropdownMenuLink">
-          <a class="dropdown-item" ng-reflect-router-link="" href="/"> red </a
-          ><a class="dropdown-item selected" ng-reflect-router-link="" href="/">
-            blue <fa-icon class="icon-checked" ng-reflect-icon="fas,check"></fa-icon
-          ></a>
-        </div>
-      </div>
-    `);
+    expect(element.querySelector('[ngbdropdowntoggle]')).toBeTruthy();
+    expect(element.querySelector('[ngbdropdownmenu]')).toBeTruthy();
+    expect(element.textContent).toContain('Color red  blue');
   });
 });
diff --git a/src/app/shared/components/login/login-modal/login-modal.component.html b/src/app/shared/components/login/login-modal/login-modal.component.html
index b404b16398..09530d5fb1 100644
--- a/src/app/shared/components/login/login-modal/login-modal.component.html
+++ b/src/app/shared/components/login/login-modal/login-modal.component.html
@@ -1,14 +1,7 @@
 <div class="login-modal">
   <div class="modal-header">
     <h2 class="modal-title">{{ 'account.login.signin.heading' | translate }}</h2>
-    <button
-      type="button"
-      class="close"
-      [title]="'dialog.close.text' | translate"
-      [attr.aria-label]="'dialog.close.text' | translate"
-      (click)="hide()"
-      ngbAutofocus
-    >
+    <button type="button" class="close" [title]="'dialog.close.text' | translate" (click)="hide()" ngbAutofocus>
       <span aria-hidden="true">&times;</span>
     </button>
   </div>
diff --git a/src/app/shared/components/product/product-list-toolbar/product-list-toolbar.component.html b/src/app/shared/components/product/product-list-toolbar/product-list-toolbar.component.html
index 256a5e3060..b1b188666c 100644
--- a/src/app/shared/components/product/product-list-toolbar/product-list-toolbar.component.html
+++ b/src/app/shared/components/product/product-list-toolbar/product-list-toolbar.component.html
@@ -31,7 +31,7 @@
         [ngClass]="{ 'grid-active': gridView }"
         data-testing-id="grid-view-link"
         role="button"
-        aria-label="grid view"
+        [attr.aria-label]="'product.items.view.grid_view.aria_label' | translate"
       >
         <fa-icon [icon]="['fas', 'th']"></fa-icon>
       </a>
@@ -45,7 +45,7 @@
         [ngClass]="{ 'list-active': listView }"
         data-testing-id="list-view-link"
         role="button"
-        aria-label="list view"
+        [attr.aria-label]="'product.items.view.list_view.aria_label' | translate"
       >
         <fa-icon [icon]="['fas', 'list']"></fa-icon>
       </a>
diff --git a/src/app/shared/components/product/product-quantity/product-quantity.component.html b/src/app/shared/components/product/product-quantity/product-quantity.component.html
index 35f95de595..7be0887729 100644
--- a/src/app/shared/components/product/product-quantity/product-quantity.component.html
+++ b/src/app/shared/components/product/product-quantity/product-quantity.component.html
@@ -58,7 +58,7 @@
           [step]="step$ | async"
           (change)="change($event.target)"
           (keyup)="change($event.target)"
-          aria-label="quantity"
+          [attr.aria-label]="'product.quantity.aria_label' | translate"
         />
       </div>
     </ng-template>
diff --git a/src/app/shared/components/product/product-quantity/product-quantity.component.spec.ts b/src/app/shared/components/product/product-quantity/product-quantity.component.spec.ts
index c00e83c8ed..2ee392cc05 100644
--- a/src/app/shared/components/product/product-quantity/product-quantity.component.spec.ts
+++ b/src/app/shared/components/product/product-quantity/product-quantity.component.spec.ts
@@ -1,4 +1,5 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { TranslateModule } from '@ngx-translate/core';
 import { of } from 'rxjs';
 import { instance, mock, when } from 'ts-mockito';
 
@@ -22,6 +23,7 @@ describe('Product Quantity Component', () => {
     when(context.select('stepQuantity')).thenReturn(of(2));
 
     await TestBed.configureTestingModule({
+      imports: [TranslateModule.forRoot()],
       declarations: [ProductQuantityComponent],
       providers: [{ provide: ProductContextFacade, useFactory: () => instance(context) }],
     }).compileComponents();
@@ -55,17 +57,18 @@ describe('Product Quantity Component', () => {
         "quantity",
       ]
     `);
+
     expect(element.querySelector('input')).toMatchInlineSnapshot(`
       <input
         data-testing-id="quantity"
         type="number"
         pattern="[0-9]*"
-        aria-label="quantity"
         class="form-control text-center"
         id="ASDF"
         min="2"
         max="6"
         step="2"
+        aria-label="product.quantity.aria_label"
       />
     `);
   });
@@ -79,18 +82,7 @@ describe('Product Quantity Component', () => {
         "quantity",
       ]
     `);
-    expect(element.querySelector('input')).toMatchInlineSnapshot(`
-      <input
-        data-testing-id="quantity"
-        type="number"
-        pattern="[0-9]*"
-        class="form-control"
-        id="ASDF"
-        min="2"
-        max="6"
-        step="2"
-      />
-    `);
+    expect(element.querySelector('input[data-testing-id="quantity"]').getAttribute('type')).toContain('number');
   });
 
   it('should display select when type is select', () => {
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
index 2d28ca9a4f..ae0a9532fc 100644
--- 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,10 +19,12 @@
       [ngClass]="'details-link promotion-details-link'"
     >
       <ng-container *ngIf="promotion.longTitle; else title">
-        <h3 [ishServerHtml]="promotion.longTitle" [attr.aria-label]="promotion.longTitle"></h3>
+        <!-- eslint-disable-next-line @angular-eslint/template/accessibility-elements-content -->
+        <h3 [ishServerHtml]="promotion.longTitle"></h3>
       </ng-container>
       <ng-template #title>
-        <h3 [ishServerHtml]="promotion.title" [attr.aria-label]="promotion.title"></h3>
+        <!-- eslint-disable-next-line @angular-eslint/template/accessibility-elements-content -->
+        <h3 [ishServerHtml]="promotion.title"></h3>
       </ng-template>
 
       <p *ngIf="promotion.ruleDescription" [ishServerHtml]="promotion.ruleDescription"></p>
diff --git a/src/app/shared/components/registration/confirm-leave-modal/confirm-leave-modal.component.html b/src/app/shared/components/registration/confirm-leave-modal/confirm-leave-modal.component.html
index a4ce9e6a5b..0c1b73d026 100644
--- a/src/app/shared/components/registration/confirm-leave-modal/confirm-leave-modal.component.html
+++ b/src/app/shared/components/registration/confirm-leave-modal/confirm-leave-modal.component.html
@@ -1,6 +1,6 @@
 <div class="modal-header">
   <h2 class="modal-title">{{ 'account.register.confirm_leave_modal.title' | translate }}</h2>
-  <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss(false)">
+  <button type="button" class="close" [title]="'dialog.close.text' | translate" (click)="activeModal.dismiss(false)">
     <span aria-hidden="true">&times;</span>
   </button>
 </div>
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
index 583541dd01..3e459548b1 100644
--- 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
@@ -55,7 +55,11 @@ exports[`Header Default Component should render normal header adequately for des
     <div class="hamburger-menu open"><span></span><span></span><span></span></div>
   </button>
   <div class="global-nav-container">
-    <nav aria-label="main" class="global-nav navbar-expand-md" ng-reflect-collapsed="false">
+    <nav
+      class="global-nav navbar-expand-md"
+      ng-reflect-collapsed="false"
+      aria-label="navigation.main.aria_label"
+    >
       <div class="main-navigation">
         <ish-header-navigation></ish-header-navigation
         ><ish-user-information-mobile></ish-user-information-mobile>
@@ -119,7 +123,11 @@ exports[`Header Default Component should render normal header adequately for mob
     <div class="hamburger-menu"><span></span><span></span><span></span></div>
   </button>
   <div class="global-nav-container">
-    <nav aria-label="main" class="global-nav navbar-expand-md" ng-reflect-collapsed="true">
+    <nav
+      class="global-nav navbar-expand-md"
+      ng-reflect-collapsed="true"
+      aria-label="navigation.main.aria_label"
+    >
       <div class="main-navigation">
         <ish-header-navigation></ish-header-navigation
         ><ish-user-information-mobile></ish-user-information-mobile>
@@ -184,7 +192,11 @@ exports[`Header Default Component should render normal header adequately for tab
     <div class="hamburger-menu open"><span></span><span></span><span></span></div>
   </button>
   <div class="global-nav-container">
-    <nav aria-label="main" class="global-nav navbar-expand-md" ng-reflect-collapsed="false">
+    <nav
+      class="global-nav navbar-expand-md"
+      ng-reflect-collapsed="false"
+      aria-label="navigation.main.aria_label"
+    >
       <div class="main-navigation">
         <ish-header-navigation></ish-header-navigation
         ><ish-user-information-mobile></ish-user-information-mobile>
@@ -240,7 +252,11 @@ exports[`Header Default Component should render sticky header adequately for des
     <div class="hamburger-menu open"><span></span><span></span><span></span></div>
   </button>
   <div class="global-nav-container">
-    <nav aria-label="main" class="global-nav navbar-expand-md" ng-reflect-collapsed="false">
+    <nav
+      class="global-nav navbar-expand-md"
+      ng-reflect-collapsed="false"
+      aria-label="navigation.main.aria_label"
+    >
       <div class="main-navigation">
         <ish-header-navigation></ish-header-navigation
         ><ish-user-information-mobile></ish-user-information-mobile>
@@ -296,7 +312,11 @@ exports[`Header Default Component should render sticky header adequately for mob
     <div class="hamburger-menu"><span></span><span></span><span></span></div>
   </button>
   <div class="global-nav-container">
-    <nav aria-label="main" class="global-nav navbar-expand-md" ng-reflect-collapsed="true">
+    <nav
+      class="global-nav navbar-expand-md"
+      ng-reflect-collapsed="true"
+      aria-label="navigation.main.aria_label"
+    >
       <div class="main-navigation">
         <ish-header-navigation></ish-header-navigation
         ><ish-user-information-mobile></ish-user-information-mobile>
@@ -352,7 +372,11 @@ exports[`Header Default Component should render sticky header adequately for tab
     <div class="hamburger-menu"><span></span><span></span><span></span></div>
   </button>
   <div class="global-nav-container">
-    <nav aria-label="main" class="global-nav navbar-expand-md" ng-reflect-collapsed="true">
+    <nav
+      class="global-nav navbar-expand-md"
+      ng-reflect-collapsed="true"
+      aria-label="navigation.main.aria_label"
+    >
       <div class="main-navigation">
         <ish-header-navigation></ish-header-navigation
         ><ish-user-information-mobile></ish-user-information-mobile>
diff --git a/src/app/shell/header/header-default/header-default.component.html b/src/app/shell/header/header-default/header-default.component.html
index 8f2a8a04ad..834578e339 100644
--- a/src/app/shell/header/header-default/header-default.component.html
+++ b/src/app/shell/header/header-default/header-default.component.html
@@ -95,7 +95,11 @@
   </button>
 
   <div class="global-nav-container">
-    <nav class="global-nav navbar-expand-md" [ngbCollapse]="!showNavBar" aria-label="main">
+    <nav
+      class="global-nav navbar-expand-md"
+      [ngbCollapse]="!showNavBar"
+      [attr.aria-label]="'navigation.main.aria_label' | translate"
+    >
       <div class="main-navigation">
         <ish-header-navigation></ish-header-navigation>
         <ish-user-information-mobile></ish-user-information-mobile>
diff --git a/src/app/shell/header/header-navigation/header-navigation.component.html b/src/app/shell/header/header-navigation/header-navigation.component.html
index 5bec795a5d..4447289f1d 100644
--- a/src/app/shell/header/header-navigation/header-navigation.component.html
+++ b/src/app/shell/header/header-navigation/header-navigation.component.html
@@ -22,7 +22,11 @@
         [routerLink]="[]"
         class="dropdown-toggle"
         (click)="toggleOpen(category.uniqueId)"
-        [attr.aria-label]="isOpened(category.uniqueId) ? 'collapse ' + category.name : 'expand ' + category.name"
+        [attr.aria-label]="
+          isOpened(category.uniqueId)
+            ? ('header.navigation.collapse_category.aria_label' | translate : { '0': category.name })
+            : ('header.navigation.expand_category.aria_label' | translate : { '0': category.name })
+        "
       >
         <fa-icon *ngIf="isOpened(category.uniqueId); else closed" [icon]="['fas', 'minus']"></fa-icon>
         <ng-template #closed> <fa-icon [icon]="['fas', 'plus']"></fa-icon> </ng-template>
diff --git a/src/app/shell/header/login-status/login-status.component.html b/src/app/shell/header/login-status/login-status.component.html
index 365d45e7d1..9ea733b75e 100644
--- a/src/app/shell/header/login-status/login-status.component.html
+++ b/src/app/shell/header/login-status/login-status.component.html
@@ -1,6 +1,6 @@
 <ng-container *ngIf="logoutOnly; else loginStatus">
   <ng-container *ngIf="user$ | async as user; else notLoggedIn">
-    <a routerLink="/logout" data-testing-id="link-logout" aria-label="logout">
+    <a routerLink="/logout" data-testing-id="link-logout" [attr.aria-label]="'account.logout.link' | translate">
       <fa-icon [icon]="['fas', 'user']" class="header-icon"></fa-icon>
       <span *ngIf="view !== 'small'"> {{ 'account.logout.link' | translate }} </span>
     </a>
@@ -11,7 +11,12 @@
 <ng-template #loginStatus>
   <!-- logged in -->
   <ng-container *ngIf="user$ | async as user; else notLoggedIn">
-    <a routerLink="/account" class="my-account-link" data-testing-id="link-myaccount" aria-label="account">
+    <a
+      routerLink="/account"
+      class="my-account-link"
+      data-testing-id="link-myaccount"
+      [attr.aria-label]="'account.go_to_account.aria_label' | translate"
+    >
       <fa-icon [icon]="['fas', 'user']" class="header-icon"></fa-icon>
       <span *ngIf="user.lastName; else nameNotDisplayed" class="login-name" [ngClass]="getViewClasses()">{{
         user.firstName + ' ' + user.lastName
@@ -23,7 +28,12 @@
       >
     </a>
     <span class="separator" [ngClass]="getViewClasses()">&#124;</span>
-    <a routerLink="/logout" class="my-account-link my-account-logout" data-testing-id="link-logout" aria-label="logout">
+    <a
+      routerLink="/logout"
+      class="my-account-link my-account-logout"
+      data-testing-id="link-logout"
+      [attr.aria-label]="'account.logout.link' | translate"
+    >
       <span [ngClass]="getViewClasses()">{{ 'account.logout.link' | translate }}</span>
     </a>
   </ng-container>
@@ -34,7 +44,7 @@
       [queryParams]="{ returnUrl: '/account' }"
       class="my-account-link my-account-login"
       rel="nofollow"
-      aria-label="login"
+      [attr.aria-label]="'account.login.link' | translate"
     >
       <fa-icon [icon]="['fas', 'user']" class="header-icon"></fa-icon>
       <span [ngClass]="getViewClasses()">{{ 'account.login.link' | translate }}</span>
@@ -45,7 +55,7 @@
       [queryParams]="{ returnUrl: '/account' }"
       class="my-account-link my-account-register"
       rel="nofollow"
-      aria-label="register"
+      [attr.aria-label]="'account.register.link' | translate"
       ><span [ngClass]="getViewClasses()">{{ 'account.register.link' | translate }}</span>
     </a>
   </ng-template>
diff --git a/src/app/shell/header/sub-category-navigation/sub-category-navigation.component.html b/src/app/shell/header/sub-category-navigation/sub-category-navigation.component.html
index b0a5b369d6..c0952ccff1 100644
--- a/src/app/shell/header/sub-category-navigation/sub-category-navigation.component.html
+++ b/src/app/shell/header/sub-category-navigation/sub-category-navigation.component.html
@@ -22,7 +22,9 @@
         [ngClass]="{ 'd-none': view === 'full' }"
         (click)="toggleOpen(subcategory.uniqueId)"
         [attr.aria-label]="
-          isOpened(subcategory.uniqueId) ? 'collapse ' + subcategory.name : 'expand ' + subcategory.name
+          isOpened(subcategory.uniqueId)
+            ? ('header.navigation.collapse_category.aria_label' | translate : { '0': subcategory.name })
+            : ('header.navigation.expand_category.aria_label' | translate : { '0': subcategory.name })
         "
       >
         <fa-icon *ngIf="isOpened(subcategory.uniqueId); else closed" [icon]="['fas', 'minus']"></fa-icon>
diff --git a/src/app/shell/header/sub-category-navigation/sub-category-navigation.component.spec.ts b/src/app/shell/header/sub-category-navigation/sub-category-navigation.component.spec.ts
index 012c89d017..523b4ceb6f 100644
--- a/src/app/shell/header/sub-category-navigation/sub-category-navigation.component.spec.ts
+++ b/src/app/shell/header/sub-category-navigation/sub-category-navigation.component.spec.ts
@@ -1,6 +1,7 @@
 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 } from 'ng-mocks';
 import { of } from 'rxjs';
 import { instance, mock, when } from 'ts-mockito';
@@ -35,7 +36,7 @@ describe('Sub Category Navigation Component', () => {
     );
 
     await TestBed.configureTestingModule({
-      imports: [RouterTestingModule],
+      imports: [RouterTestingModule, TranslateModule.forRoot()],
       declarations: [MockComponent(FaIconComponent), SubCategoryNavigationComponent],
       providers: [
         { provide: MAIN_NAVIGATION_MAX_SUB_CATEGORIES_DEPTH, useValue: 2 },
@@ -57,28 +58,9 @@ describe('Sub Category Navigation Component', () => {
     expect(component).toBeTruthy();
     expect(element).toBeTruthy();
     expect(() => fixture.detectChanges()).not.toThrow();
-    expect(element).toMatchInlineSnapshot(`
-      <ul class="category-level1 dropdown-menu">
-        <li class="main-navigation-level1-item">
-          <a ng-reflect-router-link="/CAT_A1-catA.1" href="/CAT_A1-catA.1">CAT_A1</a
-          ><a class="dropdown-toggle" ng-reflect-router-link="" aria-label="expand CAT_A1" href="/"
-            ><fa-icon ng-reflect-icon="fas,plus"></fa-icon></a
-          ><ish-sub-category-navigation
-            ng-reflect-category-unique-id="A.1"
-            ng-reflect-sub-categories-depth="2"
-            ><ul class="category-level2">
-              <li class="main-navigation-level2-item">
-                <a ng-reflect-router-link="/CAT_A1a-catA.1.a" style="width: 100%" href="/CAT_A1a-catA.1.a"
-                  >CAT_A1a</a
-                >
-              </li>
-            </ul></ish-sub-category-navigation
-          >
-        </li>
-        <li class="main-navigation-level1-item">
-          <a ng-reflect-router-link="/CAT_A2-catA.2" style="width: 100%" href="/CAT_A2-catA.2">CAT_A2</a>
-        </li>
-      </ul>
-    `);
+    expect(element.querySelector('a[href="/CAT_A1-catA.1"]').textContent).toContain('CAT_A1');
+    expect(element.querySelector('ish-sub-category-navigation')).toBeTruthy();
+    expect(element.querySelector('a[href="/CAT_A1a-catA.1.a"]').textContent).toContain('CAT_A1a');
+    expect(element.querySelector('a[href="/CAT_A2-catA.2"]').textContent).toContain('CAT_A2');
   });
 });
diff --git a/src/assets/i18n/de_DE.json b/src/assets/i18n/de_DE.json
index 63482448ec..6509d73c73 100644
--- a/src/assets/i18n/de_DE.json
+++ b/src/assets/i18n/de_DE.json
@@ -60,10 +60,12 @@
   "account.approvallist.table.buyer": "Einkäufer",
   "account.approvallist.table.date_of_order": "Erstellungsdatum",
   "account.approvallist.table.id_of_order": "Bestellanfrage-Nr.",
+  "account.approvallist.table.id_of_order.aria_label": "Zu den Bestellanfragedetails navigieren.",
   "account.approvallist.table.line_item_total": "Gesamt",
   "account.approvallist.table.line_items": "Artikel",
   "account.approvallist.table.no_of_order": "Bestellnummer",
   "account.approvallist.table.reject_date": "Ablehnungsdatum",
+  "account.budget.already_spent.costcenter.aria_label": "Verbrauchtes Budget der Kostenstelle {{0}}",
   "account.budget.already_spent.label": "Bereits verbraucht",
   "account.budget.approved_orders.label": "Bestellungen",
   "account.budget.label": "{{0, select, =weekly{Budget (wöchentlich)} =monthly{Budget (monatlich)} =quarterly{Budget (quartalsweise)} =half-yearly{Budget (halbjährlich)} =yearly{Budget (jährlich)} =fixed{Budget (vordefiniert)}}}",
@@ -161,6 +163,7 @@
   "account.forgotdata.email.label": "E-Mail-Adresse",
   "account.forgotdata.password_retrieval.heading": "Kennwort vergessen?",
   "account.forgotdata.password_retrieval_info.text": "Geben Sie aus Sicherheitsgründen Ihre E-Mail-Adresse an und senden Sie das Formular ab. Nach korrekter Eingabe der Informationen erhalten Sie von uns eine E-Mail mit einem Link. Öffnen Sie den Link und folgen Sie den Anweisungen, um ein neues Kennwort anzulegen. Sollten Sie Probleme haben oder Hilfe benötigen, kontaktieren Sie unseren <a href=\"route://contact\">Kundenservice</a>.",
+  "account.go_to_account.aria_label": "Gehen Sie zu Ihrem Konto",
   "account.help.heading": "Hilfe-Themen",
   "account.login.addresses.message": "Melden Sie sich mit Ihrem Benutzernamen an, um Adressen zu aktualisieren.",
   "account.login.customer_approval.error.invalid": "Ihr Benutzerkonto muss erst genehmigt werden, bevor Sie sich anmelden können.",
@@ -215,6 +218,7 @@
   "account.order_history.heading": "Bestellhistorie",
   "account.order_history.link": "Bestellhistorie",
   "account.order_template.add_to_template.button.add_to_template.label": "In Bestellvorlage aufnehmen",
+  "account.order_template.add_to_template.checkbox.aria_label": "Artikel auswählen, um ihn in den Warenkorb zu legen.",
   "account.order_template.added.confirmation": "{{0}} wurde hinzugefügt zu <a callback=\"callbackHideDialogModal\" href=\"{{2}}\">{{1}}</a>.",
   "account.order_template.delete.button.text": "Löschen",
   "account.order_template.delete.do_you_really.text": "Wollen Sie diese Bestellvorlage wirklich löschen?",
@@ -614,9 +618,10 @@
   "approval.rejectform.reject_order.heading": "Bestellanfrage ablehnen",
   "back_to_top.title": "Zum Anfang",
   "basket.add_quote.error": "Das Preisangebot konnte nicht in den Warenkorb gelegt werden.",
-  "basket.add_quotelineitem.error": "Das Preisangebot kann nicht in den Warenkorb gelegt werden. Es enthält ungültige Produkte.",
+  "basket.add_quotelineitem.error": "Das Preisangebot kann dem Warenkorb nicht hinzugefügt werden. Es enthält ungültige Produkte.",
   "basket.not_found.error": "Der Warenkorb konnte nicht gefunden werden.",
   "basket.validation.general.error": "Ihr Warenkorb ist nicht mehr gültig. Bitte korrigieren Sie die unten angegebenen Fehler.",
+  "breadcrumbs.aria_label": "Breadcrumbs",
   "captcha.incorrect": "Die Sicherheitsprüfung ist fehlgeschlagen. Korrigieren Sie den unten angegebenen Fehler.",
   "checkout.account.confirm.button.label": "Bestätigen",
   "checkout.account.email.registered.heading": "Benutzerkonto",
@@ -634,9 +639,8 @@
   "checkout.address.delete.confirmation.heading": "Adresse löschen",
   "checkout.address.delete.confirmation.text": "Wollen Sie diese Adresse wirklich löschen?",
   "checkout.address.shipping.label": "Lieferadresse",
-  "checkout.address.update.button.invoice.label": "Rechnungsadresse bearbeiten",
-  "checkout.address.update.button.shipping.label": "Lieferadresse bearbeiten",
-  "checkout.address.update.label": "{{0}} bearbeiten",
+  "checkout.address.update.invoice.label": "Rechnungsadresse bearbeiten",
+  "checkout.address.update.shipping.label": "Lieferadresse bearbeiten",
   "checkout.addresses.billing_address.heading": "Rechnungsadresse",
   "checkout.addresses.checkout_as_guest.heading": "Als Gast kaufen",
   "checkout.addresses.email.label": "E-Mail-Adresse",
@@ -800,6 +804,7 @@
   "checkout.tax.TaxesLabel.TotalOrderVat": "MwSt. in Gesamtsumme",
   "checkout.tax.text": "Steuer",
   "checkout.termsandconditions.details.title": "Allgemeine Geschäftsbedingungen",
+  "checkout.update.label": "{{0}} bearbeiten",
   "checkout.variation.edit.button.label": "Bearbeiten",
   "checkout.widget.billing-address.heading": "Rechnungsadresse",
   "checkout.widget.buyer.TaxationID": "Steuernummer:",
@@ -855,6 +860,8 @@
   "form.password.error.required": "Bitte geben Sie ein Kennwort ein.",
   "form.phone.error.invalid": "Bitte geben Sie eine gültige Telefonnummer an.",
   "form.phone.error.required": "Bitte geben Sie Ihre Telefonnummer an.",
+  "header.navigation.collapse_category.aria_label": "Kategorie {{0}} zuklappen",
+  "header.navigation.expand_category.aria_label": "Kategorie {{0}} aufklappen",
   "header.welcome.text": "Willkommen bei inSPIRED",
   "helpdesk.contact_us.heading": "Kontakt",
   "helpdesk.contact_us.link": "Kontakt",
@@ -887,6 +894,12 @@
   "locale.fr_FR.long": "Français",
   "locale.fr_FR.short": "fr",
   "modal.heading.remove.order.template": "Produkt aus Bestellvorlage entfernen",
+  "navigation.main.aria_label": "Hauptnavigation",
+  "navigation.paging.aria_label": "Seitenzahlen",
+  "navigation.paging.current_page.aria_label": "Momentane Seite: {{0}}",
+  "navigation.paging.go_to_page.aria_label": "Zu Seite {{0}} gehen",
+  "navigation.paging.next_page.aria_label": "Zur nächsten Seite gehen",
+  "navigation.paging.previous_page.aria_label": "Zur vorherigen Seite gehen",
   "order.tracking.error": "Leider konnte keine Bestellung mit Ihren Daten gefunden werden.",
   "order_template.create.heading": "Bestellvorlage anlegen",
   "payment.error.PaymentInstrumentAlreadyExists": "Das Zahlungsmittel konnte nicht angelegt werden. Zahlungsdaten mit den angegebenen Parametern sind bereits vorhanden.",
@@ -925,6 +938,8 @@
   "product.itemNumber.label": "Artikelnummer:",
   "product.items.label": "{{0, plural, one{# Element} other{# Elemente}}}",
   "product.items.sorting.default.label": "Standardsortierung",
+  "product.items.view.grid_view.aria_label": "Rasteransicht",
+  "product.items.view.list_view.aria_label": "Listenansicht",
   "product.label.new.text": "NEU",
   "product.label.sale.text": "SALE",
   "product.label.topseller.text": "TOP",
@@ -971,6 +986,7 @@
   "product.product_links.replacement.title": "Ersatzartikel",
   "product.product_links.spareparts.title": "Ersatzteile",
   "product.product_links.upselling.title": "Alternatives",
+  "product.quantity.aria_label": "Menge",
   "product.quantity.decrease.text": "–",
   "product.quantity.greaterthan.text": "Geben Sie {{0}} oder mehr ein.",
   "product.quantity.increase.text": "+",
@@ -1030,6 +1046,7 @@
   "quickorder.page.breadcrumb": "Schnellbestellung",
   "quickorder.page.csv.file.invalid.format": "Das Dateiformat ist ungültig. Bitte verwenden Sie eine CSV-Datei.",
   "quickorder.page.csv.file.invalid.input": "Die Eingabe ist ungültig. Bitte prüfen Sie, ob Ihre CSV-Datei die richtige Struktur hat.",
+  "quickorder.page.csv.file.upload.aria_label": "CSV-Datei hochladen",
   "quickorder.page.csv.file.uploaded": "Die Datei wurde hochgeladen.",
   "quickorder.page.csv.reset.form": "Feld zurücksetzen",
   "quickorder.page.csv.sample": "Sie können auch unsere <a href=\"{{0}}\" download rel=\"nofollow\">Beispieldatei</a> herunterladen. Dort können Sie sehen, wie Sie eine CSV-Datei strukturieren sollten und welche Informationen wir benötigen. Sie können die Beispieldatei einfach mit ihren eigenen Daten anpassen.",
diff --git a/src/assets/i18n/en_US.json b/src/assets/i18n/en_US.json
index 23838f77b5..f2a4bf6afa 100644
--- a/src/assets/i18n/en_US.json
+++ b/src/assets/i18n/en_US.json
@@ -60,10 +60,12 @@
   "account.approvallist.table.buyer": "Buyer",
   "account.approvallist.table.date_of_order": "Creation Date",
   "account.approvallist.table.id_of_order": "Requisition No.",
+  "account.approvallist.table.id_of_order.aria_label": "Navigate to requisition details.",
   "account.approvallist.table.line_item_total": "Order Total",
   "account.approvallist.table.line_items": "Line Items",
   "account.approvallist.table.no_of_order": "Order No.",
   "account.approvallist.table.reject_date": "Rejection Date",
+  "account.budget.already_spent.costcenter.aria_label": "Spent budget of cost center {{0}}",
   "account.budget.already_spent.label": "Already Spent",
   "account.budget.approved_orders.label": "Orders",
   "account.budget.label": "{{0, select, =weekly{Budget (weekly)} =monthly{Budget (monthly)} =quarterly{Budget (quarterly)} =half-yearly{Budget (half-yearly)} =yearly{Budget (yearly)} =fixed{Budget (fixed)}}}",
@@ -161,6 +163,7 @@
   "account.forgotdata.email.label": "E-mail Address",
   "account.forgotdata.password_retrieval.heading": "Forgot your password?",
   "account.forgotdata.password_retrieval_info.text": "For security purposes, please provide your e-mail address and submit the form. If the information you entered is correct, we will send you an e-mail with a link. Follow this link to create a new password. If you have any problems or need help, please contact our <a href=\"route://contact\">Customer Service</a>.",
+  "account.go_to_account.aria_label": "Go to your account",
   "account.help.heading": "Help Topics",
   "account.login.addresses.message": "Please login to your account to update addresses.",
   "account.login.customer_approval.error.invalid": "Your account requires approval before you can login.",
@@ -215,6 +218,7 @@
   "account.order_history.heading": "Order History",
   "account.order_history.link": "Order History",
   "account.order_template.add_to_template.button.add_to_template.label": "Add to Order Template",
+  "account.order_template.add_to_template.checkbox.aria_label": "Select item to add to cart.",
   "account.order_template.added.confirmation": "{{0}} has been added to <a callback=\"callbackHideDialogModal\" href=\"{{2}}\">{{1}}</a>.",
   "account.order_template.delete.button.text": "Delete",
   "account.order_template.delete.do_you_really.text": "Do you really want to delete this order template?",
@@ -617,6 +621,7 @@
   "basket.add_quotelineitem.error": "The quote cannot be added to the shopping cart. It contains invalid products.",
   "basket.not_found.error": "The shopping cart could not be found.",
   "basket.validation.general.error": "Your shopping cart is not valid anymore. Please correct the errors indicated below.",
+  "breadcrumbs.aria_label": "Breadcrumbs",
   "captcha.incorrect": "The security verification failed. Please correct the error indicated below.",
   "checkout.account.confirm.button.label": "Confirm",
   "checkout.account.email.registered.heading": "Account",
@@ -634,9 +639,8 @@
   "checkout.address.delete.confirmation.heading": "Delete Address",
   "checkout.address.delete.confirmation.text": "Do you really want to delete this address?",
   "checkout.address.shipping.label": "Shipping Address",
-  "checkout.address.update.button.invoice.label": "Edit Invoice Address",
-  "checkout.address.update.button.shipping.label": "Edit Shipping Address",
-  "checkout.address.update.label": "Edit {{0}}",
+  "checkout.address.update.invoice.label": "Edit Invoice Address",
+  "checkout.address.update.shipping.label": "Edit Shipping Address",
   "checkout.addresses.billing_address.heading": "Invoice Address",
   "checkout.addresses.checkout_as_guest.heading": "Checkout as Guest",
   "checkout.addresses.email.label": "E-mail Address",
@@ -800,6 +804,7 @@
   "checkout.tax.TaxesLabel.TotalOrderVat": "VAT incl. in Total",
   "checkout.tax.text": "Tax",
   "checkout.termsandconditions.details.title": "Terms & Conditions",
+  "checkout.update.label": "Edit {{0}}",
   "checkout.variation.edit.button.label": "Edit",
   "checkout.widget.billing-address.heading": "Invoice Address",
   "checkout.widget.buyer.TaxationID": "Taxation ID:",
@@ -855,6 +860,8 @@
   "form.password.error.required": "Please enter a password.",
   "form.phone.error.invalid": "Please enter a valid phone number.",
   "form.phone.error.required": "Please enter your phone number.",
+  "header.navigation.collapse_category.aria_label": "Collapse category {{0}}",
+  "header.navigation.expand_category.aria_label": "Expand category {{0}}",
   "header.welcome.text": "Welcome to inSPIRED",
   "helpdesk.contact_us.heading": "Contact Us",
   "helpdesk.contact_us.link": "Contact Us",
@@ -887,6 +894,12 @@
   "locale.fr_FR.long": "Français",
   "locale.fr_FR.short": "fr",
   "modal.heading.remove.order.template": "Remove Product From Order Template",
+  "navigation.main.aria_label": "Main navigation",
+  "navigation.paging.aria_label": "Pagination",
+  "navigation.paging.current_page.aria_label": "Current page: {{0}}",
+  "navigation.paging.go_to_page.aria_label": "Go to page {{0}}",
+  "navigation.paging.next_page.aria_label": "Go to next page",
+  "navigation.paging.previous_page.aria_label": "Go to previous page",
   "order.tracking.error": "Unfortunately, we could not locate an order with the information you provided.",
   "order_template.create.heading": "Create Order Template",
   "payment.error.PaymentInstrumentAlreadyExists": "The payment instrument could not be created. Payment data with the given parameters already exists.",
@@ -925,6 +938,8 @@
   "product.itemNumber.label": "Product ID:",
   "product.items.label": "{{0, plural, one{# list item} other{# list items}}}",
   "product.items.sorting.default.label": "Default Sorting",
+  "product.items.view.grid_view.aria_label": "Grid view",
+  "product.items.view.list_view.aria_label": "List view",
   "product.label.new.text": "NEW",
   "product.label.sale.text": "SALE",
   "product.label.topseller.text": "TOP",
@@ -971,6 +986,7 @@
   "product.product_links.replacement.title": "Replacement",
   "product.product_links.spareparts.title": "Spare Parts",
   "product.product_links.upselling.title": "Alternatives",
+  "product.quantity.aria_label": "Quantity",
   "product.quantity.decrease.text": "–",
   "product.quantity.greaterthan.text": "Please enter {{0}} or more.",
   "product.quantity.increase.text": "+",
@@ -1030,6 +1046,7 @@
   "quickorder.page.breadcrumb": "Quick Order",
   "quickorder.page.csv.file.invalid.format": "The file format is invalid. Please use a CSV file.",
   "quickorder.page.csv.file.invalid.input": "The input is invalid. Please check if your CSV file has the correct structure.",
+  "quickorder.page.csv.file.upload.aria_label": "Upload CSV file",
   "quickorder.page.csv.file.uploaded": "The file has been uploaded.",
   "quickorder.page.csv.reset.form": "Reset field",
   "quickorder.page.csv.sample": "You can download our <a href=\"{{0}}\" download rel=\"nofollow\">sample CSV file</a>. It shows how to structure your CSV file and what information we need. You can easily customize the sample file with your own data.",
diff --git a/src/assets/i18n/fr_FR.json b/src/assets/i18n/fr_FR.json
index 41f8b9f6c1..82ff5ad838 100644
--- a/src/assets/i18n/fr_FR.json
+++ b/src/assets/i18n/fr_FR.json
@@ -60,10 +60,12 @@
   "account.approvallist.table.buyer": "Acheteur",
   "account.approvallist.table.date_of_order": "Date de création",
   "account.approvallist.table.id_of_order": "ID de la demande d’achat",
+  "account.approvallist.table.id_of_order.aria_label": "Naviguez jusqu'aux détails de la demande d'achat.",
   "account.approvallist.table.line_item_total": "Total",
   "account.approvallist.table.line_items": "Articles",
   "account.approvallist.table.no_of_order": "ID de la commande",
   "account.approvallist.table.reject_date": "Date de refus",
+  "account.budget.already_spent.costcenter.aria_label": "Dépense du budget du centre de coûts {{0}}",
   "account.budget.already_spent.label": "Déjà dépensé",
   "account.budget.approved_orders.label": "Commandes",
   "account.budget.label": "{{0, select, =weekly{Budget (hebdomadaire)} =monthly{Budget (mensuel)} =quarterly{Budget (trimestriel)} =half-yearly{Budget (semestriel)} =yearly{Budget (annuel)} =fixed{Budget (fixe)}}}",
@@ -161,6 +163,7 @@
   "account.forgotdata.email.label": "Courriel",
   "account.forgotdata.password_retrieval.heading": "Mot de passe oublié ?",
   "account.forgotdata.password_retrieval_info.text": "Pour des raisons de sécurité, veuillez fournir votre courriel et soumettre le formulaire. Si les informations que vous avez saisies sont correctes, nous vous enverrons un courriel avec un lien. Suivez ce lien pour créer un nouveau mot de passe. Si vous avez des problèmes ou si vous avez besoin d’aide, veuillez contacter notre <a href=\"route://contact\">service client</a>.",
+  "account.go_to_account.aria_label": "Accédez à votre compte",
   "account.help.heading": "Rubriques d’aide",
   "account.login.addresses.message": "Veuillez vous connecter à votre compte pour mettre à jour les adresses.",
   "account.login.customer_approval.error.invalid": "Votre compte client nécessite une approbation avant de pouvoir vous connecter.",
@@ -215,6 +218,7 @@
   "account.order_history.heading": "Historique de commandes",
   "account.order_history.link": "Historique de commandes",
   "account.order_template.add_to_template.button.add_to_template.label": "Ajouter au modèle de commande",
+  "account.order_template.add_to_template.checkbox.aria_label": "Sélectionner l'article à ajouter au panier.",
   "account.order_template.added.confirmation": "{{0}} a été ajouté à <a callback=\"callbackHideDialogModal\" href=\"{{2}}\">\"{{1}}\"</a>.",
   "account.order_template.delete.button.text": "Supprimer",
   "account.order_template.delete.do_you_really.text": "Voulez-vous vraiment supprimer ce modèle de commande ?",
@@ -616,8 +620,9 @@
   "basket.add_quote.error": "Le devis n’a pas pu être ajouté au panier.",
   "basket.add_quotelineitem.error": "Le devis ne peut pas être ajouté au panier. Il contient des produits non valides.",
   "basket.not_found.error": "Le panier n’a pas pu être trouvé.",
-  "basket.validation.general.error": "Votre panier n’est plus valide. Veuillez corriger les erreurs signalées ci-dessous.",
-  "captcha.incorrect": "Échec de la vérification de sécurité. Veuillez corriger l’erreur signalée ci-dessous.",
+  "basket.validation.general.error": "Votre panier n’est plus valide. Veuillez corriger les erreurs indiquées ci-dessous.",
+  "breadcrumbs.aria_label": "Breadcrumbs",
+  "captcha.incorrect": "Échec de la vérification de sécurité. Veuillez corriger l’erreur indiquée ci-dessous.",
   "checkout.account.confirm.button.label": "Confirmer",
   "checkout.account.email.registered.heading": "Compte",
   "checkout.account.email.registered.link": "Mon compte",
@@ -634,9 +639,8 @@
   "checkout.address.delete.confirmation.heading": "Supprimer l’adresse",
   "checkout.address.delete.confirmation.text": "Voulez-vous vraiment supprimer cette adresse ?",
   "checkout.address.shipping.label": "Adresse de livraison",
-  "checkout.address.update.button.invoice.label": "Modifier l'adresse de facturation",
-  "checkout.address.update.button.shipping.label": "Modifier l'adresse de livraison",
-  "checkout.address.update.label": "Modifier {{0}}",
+  "checkout.address.update.invoice.label": "Modifier l'adresse de facturation",
+  "checkout.address.update.shipping.label": "Modifier l'adresse de livraison",
   "checkout.addresses.billing_address.heading": "Adresse de facturation",
   "checkout.addresses.checkout_as_guest.heading": "Acheter en tant que visiteur",
   "checkout.addresses.email.label": "Courriel",
@@ -800,6 +804,7 @@
   "checkout.tax.TaxesLabel.TotalOrderVat": "TVA comprise dans le total de la commande",
   "checkout.tax.text": "Taxe",
   "checkout.termsandconditions.details.title": "Conditions générales",
+  "checkout.update.label": "Modifier {{0}}",
   "checkout.variation.edit.button.label": "Modifier",
   "checkout.widget.billing-address.heading": "Adresse de facturation",
   "checkout.widget.buyer.TaxationID": "Numéro d’identification fiscale:",
@@ -855,6 +860,8 @@
   "form.password.error.required": "Veuillez entrer un mot de passe.",
   "form.phone.error.invalid": "Veuillez entrer un numéro de téléphone valide.",
   "form.phone.error.required": "Veuillez entrer votre numéro de téléphone.",
+  "header.navigation.collapse_category.aria_label": "Fermer la catégorie {{0}}",
+  "header.navigation.expand_category.aria_label": "Développer la catégorie {{0}}",
   "header.welcome.text": "Bienvenue chez inSPIRED",
   "helpdesk.contact_us.heading": "Contact",
   "helpdesk.contact_us.link": "Contact",
@@ -887,7 +894,13 @@
   "locale.fr_FR.long": "Français",
   "locale.fr_FR.short": "fr",
   "modal.heading.remove.order.template": "Supprimer le produit du modèle de commande",
-  "order.tracking.error": "Malheureusement, nous n’avons pas pu localiser de commande avec les informations que vous nous avez fournies.",
+  "navigation.main.aria_label": "Principale navigation",
+  "navigation.paging.aria_label": "Numéros de page",
+  "navigation.paging.current_page.aria_label": "Page actuelle : {{0}}",
+  "navigation.paging.go_to_page.aria_label": "Aller à la page {{0}}",
+  "navigation.paging.next_page.aria_label": "Aller à la page suivante",
+  "navigation.paging.previous_page.aria_label": "Aller à la page précédente",
+  "order.tracking.error": "Malheureusement, nous n’avons pas pu localiser une commande avec les informations que vous avez fournies.",
   "order_template.create.heading": "Créer un modèle de commande",
   "payment.error.PaymentInstrumentAlreadyExists": "Le moyen de paiement n’a pas pu être mis en place. Les données de paiement avec les paramètres fournis existent déjà.",
   "personal.data.request.confirmation.confirmed.heading": "Déjà vérifiée",
@@ -925,6 +938,8 @@
   "product.itemNumber.label": "ID de produit :",
   "product.items.label": "{{0, plural, one{# article} other{# articles}}}",
   "product.items.sorting.default.label": "Tri par défaut",
+  "product.items.view.grid_view.aria_label": "Vue en grille",
+  "product.items.view.list_view.aria_label": "Vue de la liste",
   "product.label.new.text": "NOUVEAU",
   "product.label.sale.text": "SOLDES",
   "product.label.topseller.text": "POPULAIRE",
@@ -971,6 +986,7 @@
   "product.product_links.replacement.title": "Produit de substitution",
   "product.product_links.spareparts.title": "Pièces de rechange",
   "product.product_links.upselling.title": "Alternatives",
+  "product.quantity.aria_label": "Quantité",
   "product.quantity.decrease.text": "–",
   "product.quantity.greaterthan.text": "Veuillez entrer {{0}} ou plus.",
   "product.quantity.increase.text": "+",
@@ -1030,6 +1046,7 @@
   "quickorder.page.breadcrumb": "Commande rapide",
   "quickorder.page.csv.file.invalid.format": "Le format de fichier n’est pas valide. Veuillez utiliser un fichier CSV.",
   "quickorder.page.csv.file.invalid.input": "L’entrée n’est pas valide. Veuillez vérifier si la structure de votre fichier CSV est correcte.",
+  "quickorder.page.csv.file.upload.aria_label": "Télécharger le fichier CSV",
   "quickorder.page.csv.file.uploaded": "Le fichier a été téléversé.",
   "quickorder.page.csv.reset.form": "Réinitialiser le champ",
   "quickorder.page.csv.sample": "Vous pouvez télécharger notre <a href=\"{{0}}\" download rel=\"nofollow\">exemple de fichier CSV</a>. Il montre comment structurer votre fichier CSV et de quelles informations nous avons besoin. Vous pouvez facilement personnaliser les exemples de données avec les vôtres.",