fix: (CXSPA-2248) - Checkout schedule replenishment order Fieldset (#…

…18596) Co-authored-by: Piotr Bartkowiak <[email protected]>
SAP · Mar 27, 2024 · 99903cb · 99903cb
1 parent 52330cc
commit 99903cb
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 20 deletions.
diff --git a/...heckout-schedule-replenishment-order/checkout-schedule-replenishment-order.component.html b/...heckout-schedule-replenishment-order/checkout-schedule-replenishment-order.component.html
@@ -146,26 +146,50 @@
         />
       </div>
     </div>
-
-    <div
-      *ngIf="isWeekly"
-      class="cx-replenishment-form-data-container cx-repeat-days-container"
-    >
-      <span class="cx-repeat-days form-data-label">{{
-        'checkoutScheduledReplenishment.repeatOnDays' | cxTranslate
-      }}</span>
-      <div *ngFor="let day of daysOfWeek" class="form-check">
-        <label for="day-{{ day }}" class="cx-week-day">{{
-          day | titlecase
-        }}</label
-        ><input
-          id="day-{{ day }}"
-          type="checkbox"
-          class="form-check-input"
-          [checked]="hasDaysOfWeekChecked(day)"
-          (change)="changeRepeatDays(day, $event.target.checked)"
-        />
+    <!-- TODO: (CXSPA-6446) Remove feature flag next major release -->
+    <ng-container *cxFeature="'a11yReplenishmentOrderFieldset'">
+      <fieldset
+        *ngIf="isWeekly"
+        class="cx-replenishment-form-data-container cx-repeat-days-container"
+      >
+        <legend class="cx-repeat-days form-data-label">
+          {{ 'checkoutScheduledReplenishment.repeatOnDays' | cxTranslate }}
+        </legend>
+        <div *ngFor="let day of daysOfWeek" class="form-check">
+          <label for="day-{{ day }}" class="cx-week-day">{{
+            day | titlecase
+          }}</label
+          ><input
+            id="day-{{ day }}"
+            type="checkbox"
+            class="form-check-input"
+            [checked]="hasDaysOfWeekChecked(day)"
+            (change)="changeRepeatDays(day, $event.target.checked)"
+          />
+        </div>
+      </fieldset>
+    </ng-container>
+    <ng-container *cxFeature="'!a11yReplenishmentOrderFieldset'">
+      <div
+        *ngIf="isWeekly"
+        class="cx-replenishment-form-data-container cx-repeat-days-container"
+      >
+        <span class="cx-repeat-days form-data-label">{{
+          'checkoutScheduledReplenishment.repeatOnDays' | cxTranslate
+        }}</span>
+        <div *ngFor="let day of daysOfWeek" class="form-check">
+          <label for="day-{{ day }}" class="cx-week-day">{{
+            day | titlecase
+          }}</label
+          ><input
+            id="day-{{ day }}"
+            type="checkbox"
+            class="form-check-input"
+            [checked]="hasDaysOfWeekChecked(day)"
+            (change)="changeRepeatDays(day, $event.target.checked)"
+          />
+        </div>
       </div>
-    </div>
+    </ng-container>
   </ng-container>
 </div>
diff --git a/.../checkout-schedule-replenishment-order/checkout-schedule-replenishment-order.component.ts b/.../checkout-schedule-replenishment-order/checkout-schedule-replenishment-order.component.ts
@@ -50,6 +50,7 @@ export class CheckoutScheduleReplenishmentOrderComponent
   constructor(
     protected checkoutReplenishmentFormService: CheckoutReplenishmentFormService
   ) {
+    useFeatureStyles('a11yReplenishmentOrderFieldset');
     useFeatureStyles('a11yScheduleReplenishment');
   }
 

diff --git a/...-libs/checkout/scheduled-replenishment/styles/components/steps/review/_review-submit.scss b/...-libs/checkout/scheduled-replenishment/styles/components/steps/review/_review-submit.scss
@@ -103,6 +103,10 @@
         }
 
         .cx-repeat-days {
+          //TODO: (CXSPA-6446) Remove feature flag next major release
+          @include forFeature('a11yReplenishmentOrderFieldset') {
+            font-size: inherit;
+          }
           flex: 0 100%;
           margin-bottom: 14px;
           align-self: start;

diff --git a/projects/storefrontapp/src/app/app.module.ts b/projects/storefrontapp/src/app/app.module.ts
@@ -103,6 +103,7 @@ if (!environment.production) {
         a11ySortingOptionsTruncation: true,
         a11yExpandedFocusIndicator: true,
         a11yCheckoutDeliveryFocus: true,
+        a11yReplenishmentOrderFieldset: true,
       },
     }),
     provideConfig(<StoreFinderConfig>{