fix: (CXSPA-1001) - Delivery mode radiogroup (#18998)

Co-authored-by: Miguel Estrada <[email protected]>
SAP · Jul 16, 2024 · e6a39cb · e6a39cb
1 parent 58d55b3
commit e6a39cb
Show file tree

Hide file tree

Showing 5 changed files with 106 additions and 25 deletions.
diff --git a/...ibs/checkout/base/components/checkout-delivery-mode/checkout-delivery-mode.component.html b/...ibs/checkout/base/components/checkout-delivery-mode/checkout-delivery-mode.component.html
@@ -1,32 +1,39 @@
-<h2 class="cx-checkout-title d-none d-lg-block d-xl-block">
- {{ 'checkoutMode.deliveryMethod' | cxTranslate }}
-</h2>
+<fieldset *cxFeature="'a11yDeliveryModeRadiogroup'" role="radiogroup">
+ <legend class="cx-checkout-title d-none d-lg-block d-xl-block">
+ {{ 'checkoutMode.deliveryMethod' | cxTranslate }}
+ </legend>
 
-<ng-container
- *ngIf="
- !(isUpdating$ | async) &&
- (supportedDeliveryModes$ | async) as supportedDeliveryModes;
- else loading
- "
->
- <div role="status" [attr.aria-label]="'common.loaded' | cxTranslate"></div>
- <div [formGroup]="mode" class="cx-delivery-mode-wrapper">
- <div role="radiogroup">
+ <ng-container
+ *ngIf="
+ !(isUpdating$ | async) &&
+ (supportedDeliveryModes$ | async) as supportedDeliveryModes;
+ else loading
+ "
+ >
+ <div role="status" [attr.aria-label]="'common.loaded' | cxTranslate"></div>
+ <div [formGroup]="mode" class="cx-delivery-mode-wrapper">
  <div class="form-check" *ngFor="let mode of supportedDeliveryModes">
  <input
  [attr.aria-checked]="getAriaChecked(mode.code)"
  class="form-check-input"
- role="radio"
  type="radio"
- id="deliveryMode-{{ mode.code }}"
  (change)="changeMode(mode.code, $event)"
  (click)="changeMode(mode.code, $event)"
  [value]="mode.code"
  formControlName="deliveryModeId"
+ id="deliveryMode-{{ mode.code }}"
+ [attr.aria-label]="
+ mode.name +
+ ' ' +
+ mode.description +
+ ' ' +
+ mode.deliveryCost?.formattedValue
+ "
  />
  <label
  class="cx-delivery-label form-check-label form-radio-label"
  for="deliveryMode-{{ mode.code }}"
+ aria-hidden="true"
  >
  <div class="cx-delivery-mode">
  {{ mode.name }}
@@ -40,15 +47,70 @@ <h2 class="cx-checkout-title d-none d-lg-block d-xl-block">
  <div class="cx-delivery-details"></div>
  </label>
  </div>
+ <ng-template
+ [cxOutlet]="CartOutlets.DELIVERY_MODE"
+ [cxOutletContext]="{
+ item: activeCartFacade.getActive() | async
+ }"
+ >
+ </ng-template>
  </div>
- <ng-template
- [cxOutlet]="CartOutlets.DELIVERY_MODE"
- [cxOutletContext]="{
- item: activeCartFacade.getActive() | async
- }"
- >
- </ng-template>
- </div>
+ </ng-container>
+</fieldset>
+
+<ng-container *cxFeature="'!a11yDeliveryModeRadiogroup'">
+ <h2 class="cx-checkout-title d-none d-lg-block d-xl-block">
+ {{ 'checkoutMode.deliveryMethod' | cxTranslate }}
+ </h2>
+
+ <ng-container
+ *ngIf="
+ !(isUpdating$ | async) &&
+ (supportedDeliveryModes$ | async) as supportedDeliveryModes;
+ else loading
+ "
+ >
+ <div role="status" [attr.aria-label]="'common.loaded' | cxTranslate"></div>
+ <div [formGroup]="mode" class="cx-delivery-mode-wrapper">
+ <div role="radiogroup">
+ <div class="form-check" *ngFor="let mode of supportedDeliveryModes">
+ <input
+ [attr.aria-checked]="getAriaChecked(mode.code)"
+ class="form-check-input"
+ role="radio"
+ type="radio"
+ id="deliveryMode-{{ mode.code }}"
+ (change)="changeMode(mode.code, $event)"
+ (click)="changeMode(mode.code, $event)"
+ [value]="mode.code"
+ formControlName="deliveryModeId"
+ />
+ <label
+ class="cx-delivery-label form-check-label form-radio-label"
+ for="deliveryMode-{{ mode.code }}"
+ >
+ <div class="cx-delivery-mode">
+ {{ mode.name }}
+ <span class="cx-delivery-mode-description"
+ >({{ mode.description }})</span
+ >
+ </div>
+ <div class="cx-delivery-price">
+ {{ mode.deliveryCost?.formattedValue }}
+ </div>
+ <div class="cx-delivery-details"></div>
+ </label>
+ </div>
+ </div>
+ <ng-template
+ [cxOutlet]="CartOutlets.DELIVERY_MODE"
+ [cxOutletContext]="{
+ item: activeCartFacade.getActive() | async
+ }"
+ >
+ </ng-template>
+ </div>
+ </ng-container>
 </ng-container>
 
 <ng-container *ngIf="activeCartFacade.hasPickupItems() | async">

diff --git a/.../checkout/base/components/checkout-delivery-mode/checkout-delivery-mode.component.spec.ts b/.../checkout/base/components/checkout-delivery-mode/checkout-delivery-mode.component.spec.ts
@@ -24,6 +24,7 @@ import {
  QueryState,
 } from '@spartacus/core';
 import { OutletModule } from '@spartacus/storefront';
+import { MockFeatureDirective } from 'projects/storefrontlib/shared/test/mock-feature-directive';
 import { BehaviorSubject, EMPTY, of, throwError } from 'rxjs';
 import { CheckoutConfigService } from '../services/checkout-config.service';
 import { CheckoutStepService } from '../services/checkout-step.service';
@@ -131,7 +132,11 @@ describe('CheckoutDeliveryModeComponent', () => {
  beforeEach(waitForAsync(() => {
  TestBed.configureTestingModule({
  imports: [ReactiveFormsModule, I18nTestingModule, OutletModule],
- declarations: [CheckoutDeliveryModeComponent, MockSpinnerComponent],
+ declarations: [
+ CheckoutDeliveryModeComponent,
+ MockSpinnerComponent,
+ MockFeatureDirective,
+ ],
  providers: [
  {
  provide: CheckoutDeliveryModesFacade,

diff --git a/...ure-libs/checkout/base/components/checkout-delivery-mode/checkout-delivery-mode.module.ts b/...ure-libs/checkout/base/components/checkout-delivery-mode/checkout-delivery-mode.module.ts
@@ -7,7 +7,12 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
-import { CmsConfig, I18nModule, provideDefaultConfig } from '@spartacus/core';
+import {
+ CmsConfig,
+ FeaturesConfigModule,
+ I18nModule,
+ provideDefaultConfig,
+} from '@spartacus/core';
 import {
  OutletModule,
  PageComponentModule,
@@ -25,6 +30,7 @@ import { CheckoutDeliveryModeComponent } from './checkout-delivery-mode.componen
  SpinnerModule,
  OutletModule,
  PageComponentModule,
+ FeaturesConfigModule,
  ],
  providers: [
  provideDefaultConfig(<CmsConfig>{

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
@@ -358,6 +358,12 @@ export interface FeatureTogglesInterface {
  */
  a11yFacetsDialogFocusHandling?: boolean;
 
+ /**
+ * Enables radio group fieldset for 'CheckoutDeliveryModeComponent' form
+ * and further improves its screen reader readout.
+ */
+ a11yDeliveryModeRadiogroup?: boolean;
+
  /**
  * Removes 'aria-live' from 'StoreFinderComponent' and adds 'alert' role to child components elements.
  */
@@ -454,6 +460,7 @@ export const defaultFeatureToggles: Required<FeatureTogglesInterface> = {
  a11yFormErrorMuteIcon: false,
  a11yCxMessageFocus: false,
  a11yLinkBtnsToTertiaryBtns: false,
+ a11yDeliveryModeRadiogroup: false,
  occCartNameAndDescriptionInHttpRequestBody: false,
  cmsBottomHeaderSlotUsingFlexStyles: false,
 };
diff --git a/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts b/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts
@@ -338,6 +338,7 @@ if (environment.cpq) {
  a11yCxMessageFocus: true,
  occCartNameAndDescriptionInHttpRequestBody: true,
  a11yLinkBtnsToTertiaryBtns: true,
+ a11yDeliveryModeRadiogroup: true,
  cmsBottomHeaderSlotUsingFlexStyles: true,
  };
  return appFeatureToggles;