From 287bc4481b5fda3ac002a93ae8ef914a64d29a33 Mon Sep 17 00:00:00 2001
From: petarmarkov9449 <166535589+petarmarkov9449@users.noreply.github.com>
Date: Tue, 3 Dec 2024 09:21:20 +0100
Subject: [PATCH] feat: (CXSPA-8988) - Add missing labels for Combo boxes in
 Order Summary (#19659)

---
 .../en/checkoutScheduledReplenishment.json    |  3 +-
 ...chedule-replenishment-order.component.html | 58 ++++++++++++++++---
 .../feature-toggles/config/feature-toggles.ts |  2 +-
 3 files changed, 52 insertions(+), 11 deletions(-)

diff --git a/feature-libs/checkout/scheduled-replenishment/assets/translations/en/checkoutScheduledReplenishment.json b/feature-libs/checkout/scheduled-replenishment/assets/translations/en/checkoutScheduledReplenishment.json
index 61a3d54a97d..19e00cc1033 100644
--- a/feature-libs/checkout/scheduled-replenishment/assets/translations/en/checkoutScheduledReplenishment.json
+++ b/feature-libs/checkout/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/feature-libs/checkout/scheduled-replenishment/components/checkout-schedule-replenishment-order/checkout-schedule-replenishment-order.component.html b/feature-libs/checkout/scheduled-replenishment/components/checkout-schedule-replenishment-order/checkout-schedule-replenishment-order.component.html
index c5ba958fae3..ac54c190feb 100644
--- a/feature-libs/checkout/scheduled-replenishment/components/checkout-schedule-replenishment-order/checkout-schedule-replenishment-order.component.html
+++ b/feature-libs/checkout/scheduled-replenishment/components/checkout-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
index ef325827f58..24e82faa331 100644
--- 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;