From 3ed6d4b926207ddbc2f4f3fee21847325242eb01 Mon Sep 17 00:00:00 2001
From: Stanislav Sukhanov <sukhanov.stas@gmail.com>
Date: Thu, 3 Oct 2024 11:25:09 +0200
Subject: [PATCH 1/3] fix: (CXSPA-8033) add aria hidden attribute tp 'required'
 asterisks   * closes https://jira.tools.sap/browse/CXSPA-8033

---
 .../components/cart-coupon/cart-coupon.component.html    | 2 +-
 .../cart-quick-order-form.component.html                 | 2 +-
 .../saved-cart-form-dialog.component.html                | 2 +-
 .../checkout-payment-form.component.html                 | 2 +-
 .../checkout-place-order.component.html                  | 2 +-
 .../components/login-form/login-form.component.html      | 9 ---------
 .../otp-login-form/otp-login-form.component.html         | 2 +-
 .../address-form/address-form.component.html             | 2 +-
 .../profile/components/register/register.component.html  | 2 +-
 .../components/update-email/update-email.component.html  | 2 +-
 .../update-password/update-password.component.html       | 2 +-
 .../update-profile/update-profile.component.html         | 2 +-
 .../product-reviews/product-reviews.component.html       | 2 +-
 13 files changed, 12 insertions(+), 21 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
index d5cf777ba5f..6542f83c4a0 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
@@ -24,7 +24,7 @@
             *cxFeature="'a11yRequiredAsterisks'"
             class="text-decoration-none"
             title="{{ 'common.required' | cxTranslate }}"
-            >*</abbr
+            ><span aria-hidden="true">*</span></abbr
           >
         </ng-container>
       </label>
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..53cbecfe073 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
@@ -19,7 +19,7 @@
                 *cxFeature="'a11yRequiredAsterisks'"
                 class="text-decoration-none"
                 title="{{ 'common.required' | cxTranslate }}"
-                >*</abbr
+                ><span aria-hidden="true">*</span></abbr
               >
             </ng-container>
           </label>
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..127711f01df 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
@@ -225,7 +225,7 @@
                     *cxFeature="'a11yRequiredAsterisks'"
                     class="text-decoration-none"
                     title="{{ 'common.required' | cxTranslate }}"
-                    >*</abbr
+                    ><span aria-hidden="true">*</span></abbr
                   ></span
                 >
                 <input
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..204a4f7f79f 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
@@ -601,7 +601,7 @@
     *cxFeature="'a11yRequiredAsterisks'"
     class="text-decoration-none"
     title="{{ 'common.required' | cxTranslate }}"
-    >*</abbr
+    ><span aria-hidden="true">*</span></abbr
   >
 </ng-template>
 
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..19cbc60a1eb 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
@@ -21,7 +21,7 @@
           *cxFeature="'a11yRequiredAsterisks'"
           class="text-decoration-none"
           title="{{ 'common.required' | cxTranslate }}"
-          >*</abbr
+          ><span aria-hidden="true">*</span></abbr
         >
         <cx-form-errors
           [control]="checkoutSubmitForm.get('termsAndConditions')"
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..ff8530ff986 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
@@ -70,12 +70,3 @@
     {{ 'loginForm.signIn' | cxTranslate }}
   </button>
 </form>
-
-<ng-template #requiredAsterisk>
-  <abbr
-    *cxFeature="'a11yRequiredAsterisks'"
-    class="text-decoration-none"
-    title="{{ 'common.required' | cxTranslate }}"
-    >*</abbr
-  >
-</ng-template>
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..755378c2415 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
@@ -55,6 +55,6 @@
     *cxFeature="'a11yRequiredAsterisks'"
     class="text-decoration-none"
     title="{{ 'common.required' | cxTranslate }}"
-    >*</abbr
+    ><span aria-hidden="true">*</span></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
index 7fd1e1b3c36..c489262091e 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
@@ -315,6 +315,6 @@
     *cxFeature="'a11yRequiredAsterisks'"
     class="text-decoration-none"
     title="{{ 'common.required' | cxTranslate }}"
-    >*</abbr
+    ><span aria-hidden="true">*</span></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
index a2bd016fc86..c241f8ff046 100644
--- a/feature-libs/user/profile/components/register/register.component.html
+++ b/feature-libs/user/profile/components/register/register.component.html
@@ -320,7 +320,7 @@
     *cxFeature="'a11yRequiredAsterisks'"
     class="text-decoration-none"
     title="{{ 'common.required' | cxTranslate }}"
-    >*</abbr
+    ><span aria-hidden="true">*</span></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
index d382b11af40..66baf57295b 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
@@ -116,6 +116,6 @@
     *cxFeature="'a11yRequiredAsterisks'"
     class="text-decoration-none"
     title="{{ 'common.required' | cxTranslate }}"
-    >*</abbr
+    ><span aria-hidden="true">*</span></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
index 839ffd387aa..4b80bd3a0af 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
@@ -135,6 +135,6 @@
     *cxFeature="'a11yRequiredAsterisks'"
     class="text-decoration-none"
     title="{{ 'common.required' | cxTranslate }}"
-    >*</abbr
+    ><span aria-hidden="true">*</span></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
index 077922e9c96..2dd1c2ae3c1 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
@@ -135,6 +135,6 @@
     *cxFeature="'a11yRequiredAsterisks'"
     class="text-decoration-none"
     title="{{ 'common.required' | cxTranslate }}"
-    >*</abbr
+    ><span aria-hidden="true">*</span></abbr
   >
 </ng-template>
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..cba18052339 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
@@ -210,6 +210,6 @@ <h3>{{ 'productReview.overallRating' | cxTranslate }}</h3>
     *cxFeature="'a11yRequiredAsterisks'"
     class="text-decoration-none"
     title="{{ 'common.required' | cxTranslate }}"
-    >*</abbr
+    ><span aria-hidden="true">*</span></abbr
   >
 </ng-template>

From 76badd3acaf64169129148dc6cf4729aa4129385 Mon Sep 17 00:00:00 2001
From: Stanislav Sukhanov <sukhanov.stas@gmail.com>
Date: Mon, 7 Oct 2024 11:58:17 +0200
Subject: [PATCH 2/3] 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
---
 .../base/components/cart-coupon/cart-coupon.component.html     | 3 ++-
 .../cart-quick-order-form/cart-quick-order-form.component.html | 3 ++-
 .../saved-cart-form-dialog.component.html                      | 3 ++-
 .../checkout-payment-form/checkout-payment-form.component.html | 3 ++-
 .../checkout-place-order/checkout-place-order.component.html   | 3 ++-
 .../components/otp-login-form/otp-login-form.component.html    | 3 ++-
 .../address-book/address-form/address-form.component.html      | 3 ++-
 .../user/profile/components/register/register.component.html   | 3 ++-
 .../components/update-email/update-email.component.html        | 3 ++-
 .../components/update-password/update-password.component.html  | 3 ++-
 .../components/update-profile/update-profile.component.html    | 3 ++-
 .../product-reviews/product-reviews.component.html             | 3 ++-
 12 files changed, 24 insertions(+), 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
index 6542f83c4a0..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,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/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 53cbecfe073..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,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/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 127711f01df..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,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/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 204a4f7f79f..b3ca756e8cf 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
@@ -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/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 19cbc60a1eb..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,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
index 755378c2415..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,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
index c489262091e..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,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
index c241f8ff046..f331fe73b62 100644
--- 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
index 66baf57295b..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,8 +114,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
index 4b80bd3a0af..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,8 +133,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
index 2dd1c2ae3c1..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,8 +133,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/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 cba18052339..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,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>

From a6913809fc38a35a3a20ed5fdb6a6a84167e16ea Mon Sep 17 00:00:00 2001
From: Stanislav Sukhanov <sukhanov.stas@gmail.com>
Date: Tue, 15 Oct 2024 10:40:57 +0200
Subject: [PATCH 3/3] fix: (CXSPA-8033) add aria hidden attribute to 'required'
 asterisks

  * restored asterisks on ForgotPassword and LoginForm

  * closes https://jira.tools.sap/browse/CXSPA-8033
---
 .../login-form/login-form.component.html          | 15 +++++++++++++++
 .../forgot-password.component.html                | 10 ++++++++++
 2 files changed, 25 insertions(+)

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 ff8530ff986..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"
@@ -70,3 +75,13 @@
     {{ 'loginForm.signIn' | cxTranslate }}
   </button>
 </form>
+
+<ng-template #requiredAsterisk>
+  <abbr
+    *cxFeature="'a11yRequiredAsterisks'"
+    class="text-decoration-none"
+    aria-hidden="true"
+    title="{{ 'common.required' | cxTranslate }}"
+    >*</abbr
+  >
+</ng-template>
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"