From 6d20b3be1923cc0b44332e18c3c3f3dd81a34860 Mon Sep 17 00:00:00 2001
From: Stanislav Sukhanov <sukhanov.stas@gmail.com>
Date: Thu, 17 Oct 2024 18:13:44 +0200
Subject: [PATCH] fix: (CXSPA-8033) add aria hidden attribute to 'required'
 asterisks (#19327)

---
 .../components/cart-coupon/cart-coupon.component.html  |  1 +
 .../cart-quick-order-form.component.html               |  1 +
 .../saved-cart-form-dialog.component.html              |  1 +
 .../checkout-payment-form.component.html               |  1 +
 .../checkout-place-order.component.html                |  1 +
 .../components/login-form/login-form.component.html    |  6 ++++++
 .../otp-login-form/otp-login-form.component.html       |  1 +
 .../address-form/address-form.component.html           |  1 +
 .../forgot-password/forgot-password.component.html     | 10 ++++++++++
 .../components/register/register.component.html        |  1 +
 .../update-email/update-email.component.html           |  1 +
 .../update-password/update-password.component.html     |  1 +
 .../update-profile/update-profile.component.html       |  1 +
 .../product-reviews/product-reviews.component.html     |  1 +
 14 files changed, 28 insertions(+)

diff --git a/feature-libs/cart/base/components/cart-coupon/cart-coupon.component.html b/feature-libs/cart/base/components/cart-coupon/cart-coupon.component.html
index d5cf777ba5f..aaaf112fb41 100644
--- a/feature-libs/cart/base/components/cart-coupon/cart-coupon.component.html
+++ b/feature-libs/cart/base/components/cart-coupon/cart-coupon.component.html
@@ -22,6 +22,7 @@
         >
           <abbr
             *cxFeature="'a11yRequiredAsterisks'"
+            aria-hidden="true"
             class="text-decoration-none"
             title="{{ 'common.required' | cxTranslate }}"
             >*</abbr
diff --git a/feature-libs/cart/quick-order/components/cart-quick-order-form/cart-quick-order-form.component.html b/feature-libs/cart/quick-order/components/cart-quick-order-form/cart-quick-order-form.component.html
index 73f3e6cdd48..f082d78f610 100644
--- a/feature-libs/cart/quick-order/components/cart-quick-order-form/cart-quick-order-form.component.html
+++ b/feature-libs/cart/quick-order/components/cart-quick-order-form/cart-quick-order-form.component.html
@@ -17,6 +17,7 @@
               <!-- TODO: (CXSPA-5953) Remove feature flags next major -->
               <abbr
                 *cxFeature="'a11yRequiredAsterisks'"
+                aria-hidden="true"
                 class="text-decoration-none"
                 title="{{ 'common.required' | cxTranslate }}"
                 >*</abbr
diff --git a/feature-libs/cart/saved-cart/components/saved-cart-form-dialog/saved-cart-form-dialog.component.html b/feature-libs/cart/saved-cart/components/saved-cart-form-dialog/saved-cart-form-dialog.component.html
index deacfdbd6c0..aaf6ecdef9f 100644
--- a/feature-libs/cart/saved-cart/components/saved-cart-form-dialog/saved-cart-form-dialog.component.html
+++ b/feature-libs/cart/saved-cart/components/saved-cart-form-dialog/saved-cart-form-dialog.component.html
@@ -223,6 +223,7 @@
                   >{{ 'savedCartDialog.savedCartName' | cxTranslate }}
                   <abbr
                     *cxFeature="'a11yRequiredAsterisks'"
+                    aria-hidden="true"
                     class="text-decoration-none"
                     title="{{ 'common.required' | cxTranslate }}"
                     >*</abbr
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 78288a133d2..6dfa9ec37bc 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
@@ -617,6 +617,7 @@
 <ng-template #requiredAsterisk>
   <abbr
     *cxFeature="'a11yRequiredAsterisks'"
+    aria-hidden="true"
     class="text-decoration-none"
     aria-hidden="true"
     title="{{ 'common.required' | cxTranslate }}"
diff --git a/feature-libs/checkout/base/components/checkout-place-order/checkout-place-order.component.html b/feature-libs/checkout/base/components/checkout-place-order/checkout-place-order.component.html
index 1032221c866..e2ca3244a9d 100644
--- a/feature-libs/checkout/base/components/checkout-place-order/checkout-place-order.component.html
+++ b/feature-libs/checkout/base/components/checkout-place-order/checkout-place-order.component.html
@@ -19,6 +19,7 @@
         </a>
         <abbr
           *cxFeature="'a11yRequiredAsterisks'"
+          aria-hidden="true"
           class="text-decoration-none"
           title="{{ 'common.required' | cxTranslate }}"
           >*</abbr
diff --git a/feature-libs/user/account/components/login-form/login-form.component.html b/feature-libs/user/account/components/login-form/login-form.component.html
index 86c69ec4abd..6c3cc083357 100644
--- a/feature-libs/user/account/components/login-form/login-form.component.html
+++ b/feature-libs/user/account/components/login-form/login-form.component.html
@@ -2,9 +2,13 @@
 
 <form (ngSubmit)="onSubmit()" [formGroup]="form">
   <!-- TODO: (CXSPA-5953) Remove feature flags next major -->
+  <p *cxFeature="'a11yRequiredAsterisks'" class="form-legend">
+    {{ 'formLegend.required' | cxTranslate }}
+  </p>
   <label>
     <span class="label-content">
       {{ 'loginForm.emailAddress.label' | cxTranslate }}
+      <ng-template [ngTemplateOutlet]="requiredAsterisk"></ng-template>
     </span>
     <input
       required="true"
@@ -32,6 +36,7 @@
   <label>
     <span class="label-content">
       {{ 'loginForm.password.label' | cxTranslate }}
+      <ng-template [ngTemplateOutlet]="requiredAsterisk"></ng-template>
     </span>
     <input
       required="true"
@@ -75,6 +80,7 @@
   <abbr
     *cxFeature="'a11yRequiredAsterisks'"
     class="text-decoration-none"
+    aria-hidden="true"
     title="{{ 'common.required' | cxTranslate }}"
     >*</abbr
   >
diff --git a/feature-libs/user/account/components/otp-login-form/otp-login-form.component.html b/feature-libs/user/account/components/otp-login-form/otp-login-form.component.html
index be40dacc4ba..fede8c27b34 100644
--- a/feature-libs/user/account/components/otp-login-form/otp-login-form.component.html
+++ b/feature-libs/user/account/components/otp-login-form/otp-login-form.component.html
@@ -53,6 +53,7 @@
 <ng-template #requiredAsterisk>
   <abbr
     *cxFeature="'a11yRequiredAsterisks'"
+    aria-hidden="true"
     class="text-decoration-none"
     title="{{ 'common.required' | cxTranslate }}"
     >*</abbr
diff --git a/feature-libs/user/profile/components/address-book/address-form/address-form.component.html b/feature-libs/user/profile/components/address-book/address-form/address-form.component.html
index 7fd1e1b3c36..d68453f90fd 100644
--- a/feature-libs/user/profile/components/address-book/address-form/address-form.component.html
+++ b/feature-libs/user/profile/components/address-book/address-form/address-form.component.html
@@ -313,6 +313,7 @@
 <ng-template #requiredAsterisk>
   <abbr
     *cxFeature="'a11yRequiredAsterisks'"
+    aria-hidden="true"
     class="text-decoration-none"
     title="{{ 'common.required' | cxTranslate }}"
     >*</abbr
diff --git a/feature-libs/user/profile/components/forgot-password/forgot-password.component.html b/feature-libs/user/profile/components/forgot-password/forgot-password.component.html
index 40f7317aabd..91d9dea4d77 100644
--- a/feature-libs/user/profile/components/forgot-password/forgot-password.component.html
+++ b/feature-libs/user/profile/components/forgot-password/forgot-password.component.html
@@ -1,9 +1,19 @@
 <cx-spinner class="overlay" *ngIf="isUpdating$ | async"> </cx-spinner>
 <!-- TODO: (CXSPA-5953) Remove feature flags next major -->
+<p *cxFeature="'a11yRequiredAsterisks'" class="form-legend">
+  {{ 'formLegend.required' | cxTranslate }}
+</p>
 <form (ngSubmit)="onSubmit()" [formGroup]="form">
   <label>
     <span class="label-content"
       >{{ 'forgottenPassword.emailAddress.label' | cxTranslate }}
+      <abbr
+        *cxFeature="'a11yRequiredAsterisks'"
+        aria-hidden="true"
+        class="text-decoration-none"
+        title="{{ 'common.required' | cxTranslate }}"
+        >*</abbr
+      >
     </span>
     <input
       required="true"
diff --git a/feature-libs/user/profile/components/register/register.component.html b/feature-libs/user/profile/components/register/register.component.html
index a2bd016fc86..f331fe73b62 100644
--- a/feature-libs/user/profile/components/register/register.component.html
+++ b/feature-libs/user/profile/components/register/register.component.html
@@ -318,6 +318,7 @@
 <ng-template #requiredAsterisk>
   <abbr
     *cxFeature="'a11yRequiredAsterisks'"
+    aria-hidden="true"
     class="text-decoration-none"
     title="{{ 'common.required' | cxTranslate }}"
     >*</abbr
diff --git a/feature-libs/user/profile/components/update-email/update-email.component.html b/feature-libs/user/profile/components/update-email/update-email.component.html
index d382b11af40..636b36aefdb 100644
--- a/feature-libs/user/profile/components/update-email/update-email.component.html
+++ b/feature-libs/user/profile/components/update-email/update-email.component.html
@@ -114,6 +114,7 @@
 <ng-template #requiredAsterisk>
   <abbr
     *cxFeature="'a11yRequiredAsterisks'"
+    aria-hidden="true"
     class="text-decoration-none"
     title="{{ 'common.required' | cxTranslate }}"
     >*</abbr
diff --git a/feature-libs/user/profile/components/update-password/update-password.component.html b/feature-libs/user/profile/components/update-password/update-password.component.html
index 839ffd387aa..c5c7834deeb 100644
--- a/feature-libs/user/profile/components/update-password/update-password.component.html
+++ b/feature-libs/user/profile/components/update-password/update-password.component.html
@@ -133,6 +133,7 @@
 <ng-template #requiredAsterisk>
   <abbr
     *cxFeature="'a11yRequiredAsterisks'"
+    aria-hidden="true"
     class="text-decoration-none"
     title="{{ 'common.required' | cxTranslate }}"
     >*</abbr
diff --git a/feature-libs/user/profile/components/update-profile/update-profile.component.html b/feature-libs/user/profile/components/update-profile/update-profile.component.html
index 077922e9c96..b3c97c9ec0c 100644
--- a/feature-libs/user/profile/components/update-profile/update-profile.component.html
+++ b/feature-libs/user/profile/components/update-profile/update-profile.component.html
@@ -133,6 +133,7 @@
 <ng-template #requiredAsterisk>
   <abbr
     *cxFeature="'a11yRequiredAsterisks'"
+    aria-hidden="true"
     class="text-decoration-none"
     title="{{ 'common.required' | cxTranslate }}"
     >*</abbr
diff --git a/projects/storefrontlib/cms-components/product/product-tabs/product-reviews/product-reviews.component.html b/projects/storefrontlib/cms-components/product/product-tabs/product-reviews/product-reviews.component.html
index f803ce75ed7..288488d4790 100644
--- a/projects/storefrontlib/cms-components/product/product-tabs/product-reviews/product-reviews.component.html
+++ b/projects/storefrontlib/cms-components/product/product-tabs/product-reviews/product-reviews.component.html
@@ -208,6 +208,7 @@ <h3>{{ 'productReview.overallRating' | cxTranslate }}</h3>
 <ng-template #requiredAsterisk>
   <abbr
     *cxFeature="'a11yRequiredAsterisks'"
+    aria-hidden="true"
     class="text-decoration-none"
     title="{{ 'common.required' | cxTranslate }}"
     >*</abbr