feat: use aria-labels in forms

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>

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();
   });
 });

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>

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>

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', () => {

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],

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>

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>

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>

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>

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>

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>

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>

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',
                 },
               },
             ],

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"

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>

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 }">

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>

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>

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>

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>

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>