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

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">