feat(a11y): add aria-label attribute to payment card graphics for Pay…

…ment Details cards
SAP · Oct 16, 2024 · 930739c · 930739c
1 parent 4f60be3
commit 930739c
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 2 deletions.
diff --git a/projects/assets/src/translations/en/payment.json b/projects/assets/src/translations/en/payment.json
@@ -40,7 +40,12 @@
     "defaultPaymentLabel": "Default payment method",
     "additionalPaymentLabel": "Additional payment method {{ number }}",
     "selected": "Selected",
-    "deletePaymentSuccess": "Payment method deleted successfully"
+    "deletePaymentSuccess": "Payment method deleted successfully",
+    "visa": "Visa Card",
+    "master": "Master Card",
+    "dinersClub": "Diners Club Card",
+    "amex": "American Express Card",
+    "credit": "Credit Card"
   },
   "paymentTypes": {
     "title": "Payment method",

diff --git a/projects/storefrontlib/cms-components/myaccount/payment-methods/payment-methods.component.ts b/projects/storefrontlib/cms-components/myaccount/payment-methods/payment-methods.component.ts
@@ -90,6 +90,7 @@ export class PaymentMethodsComponent implements OnInit {
             actions,
             deleteMsg: textDeleteConfirmation,
             img: this.getCardIcon(cardType?.code ?? ''),
+            imgLabel: this.getCardIconLabel(cardType?.code),
             label: defaultPayment
               ? 'paymentCard.defaultPaymentLabel'
               : 'paymentCard.additionalPaymentLabel',
@@ -140,4 +141,21 @@ export class PaymentMethodsComponent implements OnInit {
 
     return ccIcon;
   }
+
+  getCardIconLabel(code: string | undefined): string {
+    let ccIconLabel: string;
+    if (code === 'visa') {
+      ccIconLabel = 'paymentCard.visa';
+    } else if (code === 'master' || code === 'mastercard_eurocard') {
+      ccIconLabel = 'paymentCard.master';
+    } else if (code === 'diners') {
+      ccIconLabel = 'paymentCard.dinersClub';
+    } else if (code === 'amex') {
+      ccIconLabel = 'paymentCard.amex';
+    } else {
+      ccIconLabel = 'paymentCard.credit';
+    }
+
+    return ccIconLabel;
+  }
 }
diff --git a/projects/storefrontlib/shared/components/card/card.component.html b/projects/storefrontlib/shared/components/card/card.component.html
@@ -81,7 +81,14 @@
         <ng-content select="[label_container_bottom]"></ng-content>
       </div>
       <!-- Image -->
-      <div *ngIf="content.img" class="cx-card-img-container">
+      <div
+        *ngIf="content.img"
+        class="cx-card-img-container"
+        [attr.aria-label]="
+          content.imgLabel ?? 'paymentCard.credit' | cxTranslate
+        "
+        role="img"
+      >
         <cx-icon [type]="content.img"></cx-icon>
       </div>
     </div>

diff --git a/projects/storefrontlib/shared/components/card/card.component.ts b/projects/storefrontlib/shared/components/card/card.component.ts
@@ -24,6 +24,7 @@ export interface Card {
   text?: Array<string>;
   paragraphs?: Array<{ title?: string; text?: Array<string> }>;
   img?: string;
+  imgLabel?: string;
   actions?: Array<CardAction | CardLinkAction>;
   deleteMsg?: string;
   label?: string;