From 6ad6ab4e871f67018eaf75bc1b976dec9fc35520 Mon Sep 17 00:00:00 2001
From: Uros Lates <u.lates@sap.com>
Date: Mon, 14 Oct 2024 12:27:35 +0200
Subject: [PATCH 1/2] feat(a11y): add * to required billing address form fields
 on checkout pyament details

---
 .../checkout-payment-form.component.html      | 54 ++++++++++++-------
 1 file changed, 36 insertions(+), 18 deletions(-)

diff --git a/feature-libs/checkout/base/components/checkout-payment-method/checkout-payment-form/checkout-payment-form.component.html b/feature-libs/checkout/base/components/checkout-payment-method/checkout-payment-form/checkout-payment-form.component.html
index f3bfb736fce..c5c583a788f 100644
--- a/feature-libs/checkout/base/components/checkout-payment-method/checkout-payment-form/checkout-payment-form.component.html
+++ b/feature-libs/checkout/base/components/checkout-payment-method/checkout-payment-form/checkout-payment-form.component.html
@@ -305,9 +305,12 @@
                 <ng-container *ngIf="countries$ | async as countries">
                   <div *ngIf="countries.length !== 0">
                     <label>
-                      <span class="label-content required">{{
-                        'addressForm.country' | cxTranslate
-                      }}</span>
+                      <span class="label-content required">
+                        {{ 'addressForm.country' | cxTranslate }}
+                        <ng-template
+                          [ngTemplateOutlet]="requiredAsterisk"
+                        ></ng-template>
+                      </span>
                       <ng-select
                         [inputAttrs]="{ required: 'true' }"
                         [searchable]="true"
@@ -346,9 +349,12 @@
               </div>
               <div class="form-group">
                 <label>
-                  <span class="label-content required">{{
-                    'addressForm.firstName.label' | cxTranslate
-                  }}</span>
+                  <span class="label-content required">
+                    {{ 'addressForm.firstName.label' | cxTranslate }}
+                    <ng-template
+                      [ngTemplateOutlet]="requiredAsterisk"
+                    ></ng-template>
+                  </span>
                   <input
                     required="true"
                     class="form-control"
@@ -376,9 +382,12 @@
               </div>
               <div class="form-group">
                 <label>
-                  <span class="label-content required">{{
-                    'addressForm.lastName.label' | cxTranslate
-                  }}</span>
+                  <span class="label-content required">
+                    {{ 'addressForm.lastName.label' | cxTranslate }}
+                    <ng-template
+                      [ngTemplateOutlet]="requiredAsterisk"
+                    ></ng-template>
+                  </span>
                   <input
                     required="true"
                     type="text"
@@ -406,9 +415,12 @@
               </div>
               <div class="form-group">
                 <label>
-                  <span class="label-content required">{{
-                    'addressForm.address1' | cxTranslate
-                  }}</span>
+                  <span class="label-content required">
+                    {{ 'addressForm.address1' | cxTranslate }}
+                    <ng-template
+                      [ngTemplateOutlet]="requiredAsterisk"
+                    ></ng-template>
+                  </span>
                   <input
                     required="true"
                     type="text"
@@ -450,9 +462,12 @@
               <div class="row">
                 <div class="form-group col-md-6">
                   <label>
-                    <span class="label-content required">{{
-                      'addressForm.city.label' | cxTranslate
-                    }}</span>
+                    <span class="label-content required">
+                      {{ 'addressForm.city.label' | cxTranslate }}
+                      <ng-template
+                        [ngTemplateOutlet]="requiredAsterisk"
+                      ></ng-template>
+                    </span>
                     <input
                       required="true"
                       type="text"
@@ -480,9 +495,12 @@
                 </div>
                 <div class="form-group col-md-6">
                   <label>
-                    <span class="label-content required">{{
-                      'addressForm.zipCode.label' | cxTranslate
-                    }}</span>
+                    <span class="label-content required">
+                      {{ 'addressForm.zipCode.label' | cxTranslate }}
+                      <ng-template
+                        [ngTemplateOutlet]="requiredAsterisk"
+                      ></ng-template>
+                    </span>
                     <input
                       required="true"
                       type="text"

From 87227fb06d5a9190556e4303b1fb16477e15133e Mon Sep 17 00:00:00 2001
From: Uros Lates <u.lates@sap.com>
Date: Thu, 17 Oct 2024 13:30:52 +0200
Subject: [PATCH 2/2] fix: address PR comment - make * non-readable.

---
 .../checkout-payment-form/checkout-payment-form.component.html   | 1 +
 1 file changed, 1 insertion(+)

diff --git a/feature-libs/checkout/base/components/checkout-payment-method/checkout-payment-form/checkout-payment-form.component.html b/feature-libs/checkout/base/components/checkout-payment-method/checkout-payment-form/checkout-payment-form.component.html
index c5c583a788f..78288a133d2 100644
--- a/feature-libs/checkout/base/components/checkout-payment-method/checkout-payment-form/checkout-payment-form.component.html
+++ b/feature-libs/checkout/base/components/checkout-payment-method/checkout-payment-form/checkout-payment-form.component.html
@@ -618,6 +618,7 @@
   <abbr
     *cxFeature="'a11yRequiredAsterisks'"
     class="text-decoration-none"
+    aria-hidden="true"
     title="{{ 'common.required' | cxTranslate }}"
     >*</abbr
   >