fix: (CXSPA-8156) add landmark for checkout delivery address section

feature-libs/checkout/base/components/checkout-delivery-address/checkout-delivery-address.component.html

@@ -1,104 +1,116 @@
-<h2 class="cx-checkout-title d-none d-lg-block d-xl-block">
-  {{ 'checkoutAddress.shippingAddress' | cxTranslate }}
-</h2>
+<section
+  *ngIf="
+    featureConfigService?.isEnabled('a11yCheckoutDeliveryAddressAddLandmark');
+    else content
+  "
+  [attr.aria-label]="'checkoutAddress.shippingAddress' | cxTranslate"
+>
+  <ng-template [ngTemplateOutlet]="content"></ng-template>
+</section>
 
-<ng-container *ngIf="cards$ | async as cards">
-  <ng-container *ngIf="!(isUpdating$ | async); else loading">
-    <div
-      *cxFeature="'!a11yRemoveStatusLoadedRole'"
-      role="status"
-      [attr.aria-label]="'common.loaded' | cxTranslate"
-    ></div>
-    <ng-container
-      *ngIf="
-        cards?.length && !addressFormOpened;
-        then showExistingAddresses;
-        else newAddressForm
-      "
-    >
-    </ng-container>
+<ng-template #content>
+  <h2 class="cx-checkout-title d-none d-lg-block d-xl-block">
+    {{ 'checkoutAddress.shippingAddress' | cxTranslate }}
+  </h2>
+
+  <ng-container *ngIf="cards$ | async as cards">
+    <ng-container *ngIf="!(isUpdating$ | async); else loading">
+      <div
+        *cxFeature="'!a11yRemoveStatusLoadedRole'"
+        role="status"
+        [attr.aria-label]="'common.loaded' | cxTranslate"
+      ></div>
+      <ng-container
+        *ngIf="
+          cards?.length && !addressFormOpened;
+          then showExistingAddresses;
+          else newAddressForm
+        "
+      >
+      </ng-container>
 
-    <ng-template #showExistingAddresses>
-      <p class="cx-checkout-text">
-        {{ 'checkoutAddress.selectYourDeliveryAddress' | cxTranslate }}
-      </p>
+      <ng-template #showExistingAddresses>
+        <p class="cx-checkout-text">
+          {{ 'checkoutAddress.selectYourDeliveryAddress' | cxTranslate }}
+        </p>
 
-      <div class="cx-checkout-btns cx-checkout-btns-top">
-        <button
-          class="btn btn-block btn-secondary"
-          (click)="showNewAddressForm()"
-        >
-          {{ 'checkoutAddress.addNewAddress' | cxTranslate }}
-        </button>
-      </div>
+        <div class="cx-checkout-btns cx-checkout-btns-top">
+          <button
+            class="btn btn-block btn-secondary"
+            (click)="showNewAddressForm()"
+          >
+            {{ 'checkoutAddress.addNewAddress' | cxTranslate }}
+          </button>
+        </div>
 
-      <div class="cx-checkout-body row">
-        <div
-          class="cx-delivery-address-card col-md-12 col-lg-6"
-          *ngFor="let card of cards; let i = index"
-        >
+        <div class="cx-checkout-body row">
           <div
-            class="cx-delivery-address-card-inner"
-            (click)="selectAddress(card.address)"
+            class="cx-delivery-address-card col-md-12 col-lg-6"
+            *ngFor="let card of cards; let i = index"
           >
-            <cx-card
-              [border]="true"
-              [index]="i"
-              [fitToContainer]="true"
-              [content]="card.card"
-              (sendCard)="selectAddress(card.address)"
-            ></cx-card>
+            <div
+              class="cx-delivery-address-card-inner"
+              (click)="selectAddress(card.address)"
+            >
+              <cx-card
+                [border]="true"
+                [index]="i"
+                [fitToContainer]="true"
+                [content]="card.card"
+                (sendCard)="selectAddress(card.address)"
+              ></cx-card>
+            </div>
           </div>
         </div>
-      </div>
 
-      <div class="cx-checkout-btns cx-checkout-btns-bottom">
-        <button
-          class="btn btn-block btn-secondary"
-          (click)="showNewAddressForm()"
-        >
-          {{ 'checkoutAddress.addNewAddress' | cxTranslate }}
-        </button>
-      </div>
-
-      <div class="cx-checkout-btns row">
-        <div class="col-md-12 col-lg-6">
-          <button class="cx-btn btn btn-block btn-secondary" (click)="back()">
-            {{ backBtnText | cxTranslate }}
-          </button>
-        </div>
-        <div class="col-md-12 col-lg-6">
+        <div class="cx-checkout-btns cx-checkout-btns-bottom">
           <button
-            class="cx-btn btn btn-block btn-primary"
-            [disabled]="!(selectedAddress$ | async)?.id"
-            (click)="next()"
+            class="btn btn-block btn-secondary"
+            (click)="showNewAddressForm()"
           >
-            {{ 'common.continue' | cxTranslate }}
+            {{ 'checkoutAddress.addNewAddress' | cxTranslate }}
           </button>
         </div>
-      </div>
-    </ng-template>
 
-    <ng-template #newAddressForm>
-      <cx-address-form
-        *ngIf="cards.length; else initialAddressForm"
-        [showTitleCode]="true"
-        (backToAddress)="hideNewAddressForm(false)"
-        (submitAddress)="addAddress($event)"
-      ></cx-address-form>
-      <ng-template #initialAddressForm>
+        <div class="cx-checkout-btns row">
+          <div class="col-md-12 col-lg-6">
+            <button class="cx-btn btn btn-block btn-secondary" (click)="back()">
+              {{ backBtnText | cxTranslate }}
+            </button>
+          </div>
+          <div class="col-md-12 col-lg-6">
+            <button
+              class="cx-btn btn btn-block btn-primary"
+              [disabled]="!(selectedAddress$ | async)?.id"
+              (click)="next()"
+            >
+              {{ 'common.continue' | cxTranslate }}
+            </button>
+          </div>
+        </div>
+      </ng-template>
+
+      <ng-template #newAddressForm>
         <cx-address-form
+          *ngIf="cards.length; else initialAddressForm"
           [showTitleCode]="true"
-          [setAsDefaultField]="!isGuestCheckout"
-          [addressData]="selectedAddress"
-          cancelBtnLabel="{{ backBtnText | cxTranslate }}"
-          (backToAddress)="hideNewAddressForm(true)"
+          (backToAddress)="hideNewAddressForm(false)"
           (submitAddress)="addAddress($event)"
         ></cx-address-form>
+        <ng-template #initialAddressForm>
+          <cx-address-form
+            [showTitleCode]="true"
+            [setAsDefaultField]="!isGuestCheckout"
+            [addressData]="selectedAddress"
+            cancelBtnLabel="{{ backBtnText | cxTranslate }}"
+            (backToAddress)="hideNewAddressForm(true)"
+            (submitAddress)="addAddress($event)"
+          ></cx-address-form>
+        </ng-template>
       </ng-template>
-    </ng-template>
+    </ng-container>
   </ng-container>
-</ng-container>
+</ng-template>
 
 <ng-template #loading>
   <div class="cx-spinner">

projects/core/src/features-config/feature-toggles/config/feature-toggles.ts

@@ -588,6 +588,12 @@ export interface FeatureTogglesInterface {
    */
   a11yViewHoursButtonIconContrast?: boolean;
 
+  /**
+   * `CheckoutDeliveryAddressComponent` add a landmark for to get a
+   * 'new address button' associated with an appropriate content
+   */
+  a11yCheckoutDeliveryAddressAddLandmark?: boolean;
+
   /**
    * In OCC cart requests, it puts parameters of a cart name and cart description
    * into a request body, instead of query params.
@@ -761,6 +767,7 @@ export const defaultFeatureToggles: Required<FeatureTogglesInterface> = {
   a11yAddToWishlistFocus: false,
   a11ySearchBoxFocusOnEscape: false,
   a11yViewHoursButtonIconContrast: false,
+  a11yCheckoutDeliveryAddressAddLandmark: false,
   occCartNameAndDescriptionInHttpRequestBody: false,
   cmsBottomHeaderSlotUsingFlexStyles: false,
   useSiteThemeService: false,

projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts

@@ -377,6 +377,7 @@ if (environment.cpq) {
         a11yAddToWishlistFocus: true,
         a11ySearchBoxFocusOnEscape: true,
         a11yViewHoursButtonIconContrast: true,
+        a11yCheckoutDeliveryAddressAddLandmark: true,
         cmsBottomHeaderSlotUsingFlexStyles: true,
         useSiteThemeService: false,
         enableConsecutiveCharactersPasswordRequirement: true,