feat: (CXSPA-8988) - Add missing labels for Combo boxes in Order Summ…

…ary (#19659)
SAP · Dec 3, 2024 · 287bc44 · 287bc44
1 parent 66aaa74
commit 287bc44
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 11 deletions.
diff --git a/...eckout/scheduled-replenishment/assets/translations/en/checkoutScheduledReplenishment.json b/...eckout/scheduled-replenishment/assets/translations/en/checkoutScheduledReplenishment.json
@@ -9,6 +9,7 @@
     "recurrencePeriodType_MONTHLY": "Month",
     "dayOfMonth": "On day",
     "startOn": "Start on",
-    "repeatOnDays": "Repeat on the following days"
+    "repeatOnDays": "Repeat on the following days",
+    "duration": "Duration"
   }
 }
diff --git a/...heckout-schedule-replenishment-order/checkout-schedule-replenishment-order.component.html b/...heckout-schedule-replenishment-order/checkout-schedule-replenishment-order.component.html
@@ -50,11 +50,20 @@
   >
     <div class="cx-replenishment-form-data-container">
       <div *ngIf="!isMonthly" class="cx-days">
-        <span class="form-data-label">{{
-          'checkoutScheduledReplenishment.every' | cxTranslate
-        }}</span>
+        <span
+          class="form-data-label"
+          *cxFeature="'!a11yScheduleReplenishment'"
+          >{{ 'checkoutScheduledReplenishment.every' | cxTranslate }}</span
+        >
+        <label
+          class="form-data-label"
+          *cxFeature="'a11yScheduleReplenishment'"
+          for="order-replenishment-period-type"
+          >{{ 'checkoutScheduledReplenishment.every' | cxTranslate }}</label
+        >
         <ng-container *ngIf="isWeekly; else isDaily">
           <select
+            id="order-replenishment-period-type"
             class="form-control"
             (change)="changeNumberOfWeeks($event.target.value)"
           >
@@ -71,6 +80,7 @@
         </ng-container>
         <ng-template #isDaily>
           <select
+            id="order-replenishment-period-type"
             class="form-control"
             (change)="changeNumberOfDays($event.target.value)"
           >
@@ -85,10 +95,29 @@
         </ng-template>
       </div>
       <div class="cx-month">
-        <span *ngIf="isMonthly" class="form-data-label">{{
-          'checkoutScheduledReplenishment.every' | cxTranslate
-        }}</span>
+        <ng-container *cxFeature="'!a11yScheduleReplenishment'">
+          <span *ngIf="isMonthly" class="form-data-label">{{
+            'checkoutScheduledReplenishment.every' | cxTranslate
+          }}</span>
+        </ng-container>
+        <ng-container *cxFeature="'a11yScheduleReplenishment'">
+          <label
+            *ngIf="isMonthly"
+            class="form-data-label"
+            for="order-replenishment-recurrence-period"
+            >{{ 'checkoutScheduledReplenishment.every' | cxTranslate }}</label
+          >
+          <label
+            *ngIf="!isMonthly"
+            class="form-data-label"
+            for="order-replenishment-recurrence-period"
+            >{{
+              'checkoutScheduledReplenishment.duration' | cxTranslate
+            }}</label
+          >
+        </ng-container>
         <select
+          id="order-replenishment-recurrence-period"
           class="form-control"
           (change)="changeRecurrencePeriodType($event.target.value)"
         >
@@ -105,11 +134,22 @@
         </select>
       </div>
       <div *ngIf="isMonthly" class="cx-dayMonth">
-        <span class="form-data-label">{{
-          'checkoutScheduledReplenishment.dayOfMonth' | cxTranslate
-        }}</span>
+        <span
+          class="form-data-label"
+          *cxFeature="'!a11yScheduleReplenishment'"
+          >{{ 'checkoutScheduledReplenishment.dayOfMonth' | cxTranslate }}</span
+        >
+        <label
+          class="form-data-label"
+          *cxFeature="'a11yScheduleReplenishment'"
+          for="order-replenishment-day-of-month"
+          >{{
+            'checkoutScheduledReplenishment.dayOfMonth' | cxTranslate
+          }}</label
+        >
         <div class="cx-day-of-month">
           <select
+            id="order-replenishment-day-of-month"
             class="form-control"
             (change)="changeDayOfTheMonth($event.target.value)"
           >

diff --git a/projects/core/src/features-config/feature-toggles/config/feature-toggles.ts b/projects/core/src/features-config/feature-toggles/config/feature-toggles.ts
@@ -212,7 +212,7 @@ export interface FeatureTogglesInterface {
   a11yPopoverFocus?: boolean;
 
   /**
-   * Adds Datepicker label and corrects heading order for 'CheckoutScheduleReplenishmentOrderComponent'.
+   * Adds Datepicker and Combobox label and corrects heading order for 'CheckoutScheduleReplenishmentOrderComponent'.
    */
   a11yScheduleReplenishment?: boolean;