From 894a0a5f37333d66ff65d36bd70ced2c0d526dc1 Mon Sep 17 00:00:00 2001
From: Stanislav Sukhanov <sukhanov.stas@gmail.com>
Date: Wed, 16 Oct 2024 12:55:37 +0200
Subject: [PATCH] fix: (CXSPA-8156) add landmark for checkout delivery address
 section

  * add a landmark for checkout delivery address component to get a 'new address button' associated with an appropriate content.

  * closes https://jira.tools.sap/browse/CXSPA-8156
---
 .../checkout-delivery-address.component.html  | 167 +++++++++---------
 1 file changed, 86 insertions(+), 81 deletions(-)

diff --git a/feature-libs/checkout/base/components/checkout-delivery-address/checkout-delivery-address.component.html b/feature-libs/checkout/base/components/checkout-delivery-address/checkout-delivery-address.component.html
index 6e586fd5e3e..f4e37acbc39 100644
--- a/feature-libs/checkout/base/components/checkout-delivery-address/checkout-delivery-address.component.html
+++ b/feature-libs/checkout/base/components/checkout-delivery-address/checkout-delivery-address.component.html
@@ -1,104 +1,109 @@
-<h2 class="cx-checkout-title d-none d-lg-block d-xl-block">
-  {{ 'checkoutAddress.shippingAddress' | cxTranslate }}
-</h2>
+<section [attr.aria-labelledby]="'shipping-address-header'">
+  <h2
+    id="shipping-address-header"
+    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-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>
+</section>
 
 <ng-template #loading>
   <div class="cx-spinner">