fix: (CXSPA-8033) add aria hidden attribute to 'required' asterisks

* moved aria-hidden to abbr tag. * The 'required' word is still being narrated by picking up input's required attribute * closes https://jira.tools.sap/browse/CXSPA-8033
SAP · Oct 7, 2024 · 50ec874 · 50ec874
1 parent 51161b7
commit 50ec874
Show file tree

Hide file tree

Showing 12 changed files with 24 additions and 12 deletions.
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
@@ -22,9 +22,10 @@
         >
           <abbr
             *cxFeature="'a11yRequiredAsterisks'"
+            aria-hidden="true"
             class="text-decoration-none"
             title="{{ 'common.required' | cxTranslate }}"
-            ><span aria-hidden="true">*</span></abbr
+            >*</abbr
           >
         </ng-container>
       </label>

diff --git a/...bs/cart/quick-order/components/cart-quick-order-form/cart-quick-order-form.component.html b/...bs/cart/quick-order/components/cart-quick-order-form/cart-quick-order-form.component.html
@@ -17,9 +17,10 @@
               <!-- TODO: (CXSPA-5953) Remove feature flags next major -->
               <abbr
                 *cxFeature="'a11yRequiredAsterisks'"
+                aria-hidden="true"
                 class="text-decoration-none"
                 title="{{ 'common.required' | cxTranslate }}"
-                ><span aria-hidden="true">*</span></abbr
+                >*</abbr
               >
             </ng-container>
           </label>

diff --git a/...s/cart/saved-cart/components/saved-cart-form-dialog/saved-cart-form-dialog.component.html b/...s/cart/saved-cart/components/saved-cart-form-dialog/saved-cart-form-dialog.component.html
@@ -223,9 +223,10 @@
                   >{{ 'savedCartDialog.savedCartName' | cxTranslate }}
                   <abbr
                     *cxFeature="'a11yRequiredAsterisks'"
+                    aria-hidden="true"
                     class="text-decoration-none"
                     title="{{ 'common.required' | cxTranslate }}"
-                    ><span aria-hidden="true">*</span></abbr
+                    >*</abbr
                   ></span
                 >
                 <input

diff --git a/...onents/checkout-payment-method/checkout-payment-form/checkout-payment-form.component.html b/...onents/checkout-payment-method/checkout-payment-form/checkout-payment-form.component.html
@@ -599,9 +599,10 @@
 <ng-template #requiredAsterisk>
   <abbr
     *cxFeature="'a11yRequiredAsterisks'"
+    aria-hidden="true"
     class="text-decoration-none"
     title="{{ 'common.required' | cxTranslate }}"
-    ><span aria-hidden="true">*</span></abbr
+    >*</abbr
   >
 </ng-template>
 

diff --git a/...re-libs/checkout/base/components/checkout-place-order/checkout-place-order.component.html b/...re-libs/checkout/base/components/checkout-place-order/checkout-place-order.component.html
@@ -19,9 +19,10 @@
         </a>
         <abbr
           *cxFeature="'a11yRequiredAsterisks'"
+          aria-hidden="true"
           class="text-decoration-none"
           title="{{ 'common.required' | cxTranslate }}"
-          ><span aria-hidden="true">*</span></abbr
+          >*</abbr
         >
         <cx-form-errors
           [control]="checkoutSubmitForm.get('termsAndConditions')"

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
@@ -53,8 +53,9 @@
 <ng-template #requiredAsterisk>
   <abbr
     *cxFeature="'a11yRequiredAsterisks'"
+    aria-hidden="true"
     class="text-decoration-none"
     title="{{ 'common.required' | cxTranslate }}"
-    ><span aria-hidden="true">*</span></abbr
+    >*</abbr
   >
 </ng-template>
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
@@ -313,8 +313,9 @@
 <ng-template #requiredAsterisk>
   <abbr
     *cxFeature="'a11yRequiredAsterisks'"
+    aria-hidden="true"
     class="text-decoration-none"
     title="{{ 'common.required' | cxTranslate }}"
-    ><span aria-hidden="true">*</span></abbr
+    >*</abbr
   >
 </ng-template>
diff --git a/feature-libs/user/profile/components/register/register.component.html b/feature-libs/user/profile/components/register/register.component.html
@@ -318,9 +318,10 @@
 <ng-template #requiredAsterisk>
   <abbr
     *cxFeature="'a11yRequiredAsterisks'"
+    aria-hidden="true"
     class="text-decoration-none"
     title="{{ 'common.required' | cxTranslate }}"
-    ><span aria-hidden="true">*</span></abbr
+    >*</abbr
   >
 </ng-template>
 

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
@@ -113,8 +113,9 @@
 <ng-template #requiredAsterisk>
   <abbr
     *cxFeature="'a11yRequiredAsterisks'"
+    aria-hidden="true"
     class="text-decoration-none"
     title="{{ 'common.required' | cxTranslate }}"
-    ><span aria-hidden="true">*</span></abbr
+    >*</abbr
   >
 </ng-template>
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
@@ -132,8 +132,9 @@
 <ng-template #requiredAsterisk>
   <abbr
     *cxFeature="'a11yRequiredAsterisks'"
+    aria-hidden="true"
     class="text-decoration-none"
     title="{{ 'common.required' | cxTranslate }}"
-    ><span aria-hidden="true">*</span></abbr
+    >*</abbr
   >
 </ng-template>
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
@@ -132,8 +132,9 @@
 <ng-template #requiredAsterisk>
   <abbr
     *cxFeature="'a11yRequiredAsterisks'"
+    aria-hidden="true"
     class="text-decoration-none"
     title="{{ 'common.required' | cxTranslate }}"
-    ><span aria-hidden="true">*</span></abbr
+    >*</abbr
   >
 </ng-template>
diff --git a/...ontlib/cms-components/product/product-tabs/product-reviews/product-reviews.component.html b/...ontlib/cms-components/product/product-tabs/product-reviews/product-reviews.component.html
@@ -208,8 +208,9 @@ <h3>{{ 'productReview.overallRating' | cxTranslate }}</h3>
 <ng-template #requiredAsterisk>
   <abbr
     *cxFeature="'a11yRequiredAsterisks'"
+    aria-hidden="true"
     class="text-decoration-none"
     title="{{ 'common.required' | cxTranslate }}"
-    ><span aria-hidden="true">*</span></abbr
+    >*</abbr
   >
 </ng-template>