feat(a11y): improve My Account payment-details/address-book components readability support

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

@@ -119,7 +119,7 @@ export class CheckoutDeliveryAddressComponent implements OnInit {
     const isSelected: boolean = selected && selected.id === address.id;
 
     return {
-      role: 'region',
+      role: 'application',
       title: address.defaultAddress ? textDefaultDeliveryAddress : '',
       textBold: address.firstName + ' ' + address.lastName,
       text: [

feature-libs/checkout/base/components/checkout-payment-method/checkout-payment-method.component.ts

@@ -301,7 +301,7 @@ export class CheckoutPaymentMethodComponent implements OnInit, OnDestroy {
     const isSelected = selected?.id === paymentDetails.id;
 
     return {
-      role: 'region',
+      role: 'application',
       title: paymentDetails.defaultPayment
         ? cardLabels.textDefaultPaymentMethod
         : '',

feature-libs/user/profile/components/address-book/address-book.component.ts

@@ -109,7 +109,7 @@ export class AddressBookComponent implements OnInit {
           const numbers = getAddressNumbers(address, textPhone, textMobile);
 
           return {
-            role: 'region',
+            role: 'application',
             textBold: address.firstName + ' ' + address.lastName,
             text: [
               address.line1,

projects/storefrontlib/cms-components/myaccount/payment-methods/payment-methods.component.ts

@@ -83,7 +83,7 @@ export class PaymentMethodsComponent implements OnInit {
           }
           actions.push({ name: textDelete, event: 'edit' });
           const card: Card = {
-            role: 'region',
+            role: 'application',
             header: defaultPayment ? textDefaultPaymentMethod : undefined,
             textBold: accountHolderName,
             text: [cardNumber ?? '', textExpires],

projects/storefrontlib/shared/components/card/card.component.html

@@ -6,6 +6,7 @@
   [attr.aria-label]="
     content.label ? (content.label | cxTranslate: { number: this.index }) : null
   "
+  [attr.aria-describedby]="ariaDescribedBy"
   [class.cx-card-border]="border"
   [class.cx-card-fit-to-container]="fitToContainer"
 >
@@ -28,7 +29,7 @@
       {{ content.title }}
     </span>
     <!-- Card Content -->
-    <div class="cx-card-container">
+    <div class="cx-card-container" [id]="ariaDescribedBy">
       <!-- Card Label -->
       <div class="cx-card-label-container">
         <div *ngIf="content.textBold" class="cx-card-label-bold">

projects/storefrontlib/shared/components/card/card.component.ts

@@ -126,4 +126,8 @@ export class CardComponent implements OnInit {
   ngOnInit() {
     // Intentional empty method
   }
+
+  protected get ariaDescribedBy() {
+    return `cx-card-container-${this.index}`;
+  }
 }