fix: (CXSPA-9009) - Fix convey input field errors on repeat navigation (

#19852)
SAP · Jan 16, 2025 · 22476ef · 22476ef
1 parent e7b7e65
commit 22476ef
Show file tree

Hide file tree

Showing 39 changed files with 342 additions and 9 deletions.
diff --git a/feature-libs/asm/components/asm-create-customer-form/asm-create-customer-form.component.html b/feature-libs/asm/components/asm-create-customer-form/asm-create-customer-form.component.html
@@ -49,10 +49,13 @@ <h2 id="asm-create-customer-form-title" class="title modal-title">
                   placeholder="{{
                     'asm.createCustomerForm.firstName.placeholder' | cxTranslate
                   }}"
+                  [attr.aria-describedby]="'firstNameError'"
                   formControlName="firstName"
                   name="text"
                 />
                 <cx-form-errors
+                  id="firstNameError"
+                  aria-live="off"
                   [control]="registerForm.get('firstName')"
                 ></cx-form-errors>
               </label>
@@ -69,10 +72,13 @@ <h2 id="asm-create-customer-form-title" class="title modal-title">
                   placeholder="{{
                     'asm.createCustomerForm.lastName.placeholder' | cxTranslate
                   }}"
+                  [attr.aria-describedby]="'lastNameError'"
                   name="text"
                   formControlName="lastName"
                 />
                 <cx-form-errors
+                  id="lastNameError"
+                  aria-live="off"
                   [control]="registerForm.get('lastName')"
                 ></cx-form-errors>
               </label>
@@ -90,10 +96,13 @@ <h2 id="asm-create-customer-form-title" class="title modal-title">
                     'asm.createCustomerForm.emailAddress.placeholder'
                       | cxTranslate
                   }}"
+                  [attr.aria-describedby]="'emailError'"
                   name="email"
                   formControlName="email"
                 />
                 <cx-form-errors
+                  id="emailError"
+                  aria-live="off"
                   [control]="registerForm.get('email')"
                 ></cx-form-errors>
               </label>

diff --git a/feature-libs/asm/components/csagent-login-form/csagent-login-form.component.html b/feature-libs/asm/components/csagent-login-form/csagent-login-form.component.html
@@ -12,11 +12,14 @@
       type="text"
       formControlName="userId"
       [attr.aria-label]="'asm.loginForm.userId.label' | cxTranslate"
+      [attr.aria-describedby]="'userIdError'"
     />
 
     <!-- TODO: (CXSPA-7315) Remove feature toggle in the next major -->
     <cx-form-errors
       *cxFeature="'formErrorsDescriptiveMessages'"
+      id="userIdError"
+      aria-live="off"
       [translationParams]="{
         label: 'asm.loginForm.userId.label' | cxTranslate,
       }"
@@ -38,12 +41,15 @@
       type="password"
       formControlName="password"
       [attr.aria-label]="'asm.loginForm.password.label' | cxTranslate"
+      [attr.aria-describedby]="'passwordError'"
       cxPasswordVisibilitySwitch
     />
 
     <!-- TODO: (CXSPA-7315) Remove feature toggle in the next major -->
     <cx-form-errors
       *cxFeature="'formErrorsDescriptiveMessages'"
+      id="passwordError"
+      aria-live="off"
       [translationParams]="{
         label: 'asm.loginForm.password.label' | cxTranslate,
       }"

diff --git a/feature-libs/asm/components/customer-selection/customer-selection.component.html b/feature-libs/asm/components/customer-selection/customer-selection.component.html
@@ -175,6 +175,7 @@
         type="text"
         formControlName="searchTerm"
         [attr.aria-label]="'asm.customerSearch.searchTerm.label' | cxTranslate"
+        [attr.aria-describedby]="'searchTermError'"
         placeholder="{{ 'asm.customerSearch.searchTerm.label' | cxTranslate }}"
         (keydown.arrowdown)="focusFirstItem($event)"
         (keydown.end)="setSelectionEnd($event)"
@@ -183,6 +184,8 @@
       <!-- TODO: (CXSPA-7315) Remove feature toggle in the next major -->
       <cx-form-errors
         *cxFeature="'formErrorsDescriptiveMessages'"
+        id="searchTermError"
+        aria-live="off"
         [translationParams]="{
           label: 'asm.customerSearch.searchTerm.label' | cxTranslate,
         }"

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
@@ -64,6 +64,7 @@
           <!-- TODO: (CXSPA-7479) Remove feature flags next major -->
           <input
             [attr.aria-labelledby]="'card-coupon-input-label'"
+            [attr.aria-describedby]="'couponCodeError'"
             required="true"
             type="text"
             class="form-control input-coupon-code"
@@ -81,6 +82,8 @@
           <!-- TODO: (CXSPA-7315) Remove feature toggle in the next major -->
           <cx-form-errors
             *cxFeature="'formErrorsDescriptiveMessages'"
+            id="couponCodeError"
+            aria-live="off"
             [translationParams]="{
               label: 'voucher.placeholder' | cxTranslate,
             }"

diff --git a/...entries-dialog/import-to-new-saved-cart-form/import-to-new-saved-cart-form.component.html b/...entries-dialog/import-to-new-saved-cart-form/import-to-new-saved-cart-form.component.html
@@ -49,8 +49,13 @@
         formControlName="name"
         required
         type="text"
+        [attr.aria-describedby]="'nameError'"
       />
-      <cx-form-errors [control]="form.get('name')"></cx-form-errors>
+      <cx-form-errors
+        id="nameError"
+        aria-live="off"
+        [control]="form.get('name')"
+      ></cx-form-errors>
     </label>
   </div>
 

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
@@ -236,6 +236,7 @@
                   required="true"
                   [maxLength]="nameMaxLength"
                   class="form-control"
+                  [attr.aria-describedby]="'nameError'"
                   formControlName="name"
                   required
                   type="text"
@@ -244,6 +245,8 @@
                 <!-- TODO: (CXSPA-7315) Remove feature toggle in the next major -->
                 <cx-form-errors
                   *cxFeature="'formErrorsDescriptiveMessages'"
+                  id="nameError"
+                  aria-live="off"
                   [translationParams]="{
                     label: 'savedCartDialog.savedCartName' | cxTranslate,
                   }"
@@ -269,13 +272,16 @@
               <textarea
                 [maxLength]="descriptionMaxLength"
                 class="form-control"
+                [attr.aria-describedby]="'descriptionError'"
                 formControlName="description"
                 rows="5"
               ></textarea>
 
               <!-- TODO: (CXSPA-7315) Remove feature toggle in the next major -->
               <cx-form-errors
                 *cxFeature="'formErrorsDescriptiveMessages'"
+                id="descriptionError"
+                aria-live="off"
                 [translationParams]="{
                   label: 'savedCartDialog.savedCartDescription' | cxTranslate,
                 }"

diff --git a/...out/base/components/checkout-billing-address/checkout-billing-address-form.component.html b/...out/base/components/checkout-billing-address/checkout-billing-address-form.component.html
@@ -89,8 +89,11 @@
               'addressForm.firstName.placeholder' | cxTranslate
             }}"
             formControlName="firstName"
+            [attr.aria-describedby]="'firstNameError'"
           />
           <cx-form-errors
+            id="firstNameError"
+            aria-live="off"
             [control]="billingAddressForm.get('firstName')"
           ></cx-form-errors>
         </label>
@@ -107,8 +110,11 @@
             class="form-control"
             placeholder="{{ 'addressForm.lastName.placeholder' | cxTranslate }}"
             formControlName="lastName"
+            [attr.aria-describedby]="'lastNameError'"
           />
           <cx-form-errors
+            id="lastNameError"
+            aria-live="off"
             [control]="billingAddressForm.get('lastName')"
           ></cx-form-errors>
         </label>
@@ -125,8 +131,11 @@
             class="form-control"
             placeholder="{{ 'addressForm.streetAddress' | cxTranslate }}"
             formControlName="line1"
+            [attr.aria-describedby]="'line1Error'"
           />
           <cx-form-errors
+            id="line1Error"
+            aria-live="off"
             [control]="billingAddressForm.get('line1')"
           ></cx-form-errors>
         </label>
@@ -157,8 +166,11 @@
               class="form-control"
               placeholder="{{ 'addressForm.city.placeholder' | cxTranslate }}"
               formControlName="town"
+              [attr.aria-describedby]="'townError'"
             />
             <cx-form-errors
+              id="townError"
+              aria-live="off"
               [control]="billingAddressForm.get('town')"
             ></cx-form-errors>
           </label>
@@ -177,8 +189,11 @@
                 'addressForm.zipCode.placeholder' | cxTranslate
               }}"
               formControlName="postalCode"
+              [attr.aria-describedby]="'postalCodeError'"
             />
             <cx-form-errors
+              id="postalCodeError"
+              aria-live="off"
               [control]="billingAddressForm.get('postalCode')"
             ></cx-form-errors>
           </label>

diff --git a/feature-libs/checkout/base/components/checkout-login/checkout-login.component.html b/feature-libs/checkout/base/components/checkout-login/checkout-login.component.html
@@ -17,11 +17,14 @@
         placeholder="{{
           'checkoutLogin.emailAddress.placeholder' | cxTranslate
         }}"
+        [attr.aria-describedby]="'emailError'"
       />
 
       <!-- TODO: (CXSPA-7315) Remove feature toggle in the next major -->
       <cx-form-errors
         *cxFeature="'formErrorsDescriptiveMessages'"
+        id="emailError"
+        aria-live="off"
         [translationParams]="{
           label: 'checkoutLogin.emailAddress.label' | cxTranslate,
         }"
@@ -50,11 +53,14 @@
         placeholder="{{
           'checkoutLogin.confirmEmail.placeholder' | cxTranslate
         }}"
+        [attr.aria-describedby]="'emailConfirmationError'"
       />
 
       <!-- TODO: (CXSPA-7315) Remove feature toggle in the next major -->
       <cx-form-errors
         *cxFeature="'formErrorsDescriptiveMessages'"
+        id="emailConfirmationError"
+        aria-live="off"
         [translationParams]="{
           label: 'checkoutLogin.confirmEmail.label' | cxTranslate,
         }"

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
@@ -70,11 +70,14 @@
                 'paymentForm.accountHolderName.placeholder' | cxTranslate
               }}"
               formControlName="accountHolderName"
+              [attr.aria-describedby]="'accountHolderNameError'"
             />
 
             <!-- TODO: (CXSPA-7315) Remove feature toggle in the next major -->
             <cx-form-errors
               *cxFeature="'formErrorsDescriptiveMessages'"
+              id="accountHolderNameError"
+              aria-live="off"
               [translationParams]="{
                 label: 'paymentForm.accountHolderName.label' | cxTranslate,
               }"
@@ -99,11 +102,14 @@
               type="text"
               class="form-control"
               formControlName="cardNumber"
+              [attr.aria-describedby]="'cardNumberError'"
             />
 
             <!-- TODO: (CXSPA-7315) Remove feature toggle in the next major -->
             <cx-form-errors
               *cxFeature="'formErrorsDescriptiveMessages'"
+              id="cardNumberError"
+              aria-live="off"
               [translationParams]="{
                 label: 'paymentForm.cardNumber' | cxTranslate,
               }"
@@ -217,11 +223,14 @@
                 class="form-control"
                 id="cVVNumber"
                 formControlName="cvn"
+                [attr.aria-describedby]="'cvnError'"
               />
 
               <!-- TODO: (CXSPA-7315) Remove feature toggle in the next major -->
               <cx-form-errors
                 *cxFeature="'formErrorsDescriptiveMessages'"
+                id="cvnError"
+                aria-live="off"
                 [translationParams]="{
                   label: 'paymentForm.securityCode' | cxTranslate,
                 }"
@@ -363,11 +372,14 @@
                       'addressForm.firstName.placeholder' | cxTranslate
                     }}"
                     formControlName="firstName"
+                    [attr.aria-describedby]="'firstNameError'"
                   />
 
                   <!-- TODO: (CXSPA-7315) Remove feature toggle in the next major -->
                   <cx-form-errors
                     *cxFeature="'formErrorsDescriptiveMessages'"
+                    id="firstNameError"
+                    aria-live="off"
                     [translationParams]="{
                       label: 'addressForm.firstName.label' | cxTranslate,
                     }"
@@ -396,11 +408,14 @@
                       'addressForm.lastName.placeholder' | cxTranslate
                     }}"
                     formControlName="lastName"
+                    [attr.aria-describedby]="'lastNameError'"
                   />
 
                   <!-- TODO: (CXSPA-7315) Remove feature toggle in the next major -->
                   <cx-form-errors
                     *cxFeature="'formErrorsDescriptiveMessages'"
+                    id="lastNameError"
+                    aria-live="off"
                     [translationParams]="{
                       label: 'addressForm.lastName.label' | cxTranslate,
                     }"
@@ -429,11 +444,14 @@
                       'addressForm.streetAddress' | cxTranslate
                     }}"
                     formControlName="line1"
+                    [attr.aria-describedby]="'line1Error'"
                   />
 
                   <!-- TODO: (CXSPA-7315) Remove feature toggle in the next major -->
                   <cx-form-errors
                     *cxFeature="'formErrorsDescriptiveMessages'"
+                    id="line1Error"
+                    aria-live="off"
                     [translationParams]="{
                       label: 'addressForm.address1' | cxTranslate,
                     }"
@@ -476,11 +494,14 @@
                         'addressForm.city.placeholder' | cxTranslate
                       }}"
                       formControlName="town"
+                      [attr.aria-describedby]="'townError'"
                     />
 
                     <!-- TODO: (CXSPA-7315) Remove feature toggle in the next major -->
                     <cx-form-errors
                       *cxFeature="'formErrorsDescriptiveMessages'"
+                      id="townError"
+                      aria-live="off"
                       [translationParams]="{
                         label: 'addressForm.city.label' | cxTranslate,
                       }"
@@ -509,11 +530,14 @@
                         'addressForm.zipCode.placeholder' | cxTranslate
                       }}"
                       formControlName="postalCode"
+                      [attr.aria-describedby]="'postalCodeError'"
                     />
 
                     <!-- TODO: (CXSPA-7315) Remove feature toggle in the next major -->
                     <cx-form-errors
                       *cxFeature="'formErrorsDescriptiveMessages'"
+                      id="postalCodeError"
+                      aria-live="off"
                       [translationParams]="{
                         label: 'addressForm.zipCode.label' | cxTranslate,
                       }"

diff --git a/...ting-close/customer-ticketing-close-dialog/customer-ticketing-close-dialog.component.html b/...ting-close/customer-ticketing-close-dialog/customer-ticketing-close-dialog.component.html
@@ -34,10 +34,15 @@
             [maxLength]="inputCharactersLimit"
             class="form-control"
             formControlName="message"
+            [attr.aria-describedby]="'messageError'"
             rows="5"
           ></textarea>
 
-          <cx-form-errors [control]="form.get('message')"></cx-form-errors>
+          <cx-form-errors
+            id="messageError"
+            aria-live="off"
+            [control]="form.get('message')"
+          ></cx-form-errors>
 
           <p class="cx-customer-ticket-input-hint">
             {{

diff --git a/...g-reopen/customer-ticketing-reopen-dialog/customer-ticketing-reopen-dialog.component.html b/...g-reopen/customer-ticketing-reopen-dialog/customer-ticketing-reopen-dialog.component.html
@@ -34,9 +34,14 @@
             class="form-control"
             formControlName="message"
             rows="5"
+            [attr.aria-describedby]="'messageError'"
           ></textarea>
 
-          <cx-form-errors [control]="form.get('message')"></cx-form-errors>
+          <cx-form-errors
+            id="messageError"
+            aria-live="off"
+            [control]="form.get('message')"
+          ></cx-form-errors>
 
           <p class="cx-customer-ticket-input-hint">
             {{