fix: (CXSPA-9010) Previous field error message read.

feature-libs/asm/components/asm-create-customer-form/asm-create-customer-form.component.html

@@ -49,13 +49,16 @@ <h2 id="asm-create-customer-form-title" class="title modal-title">
                   placeholder="{{
                     'asm.createCustomerForm.firstName.placeholder' | cxTranslate
                   }}"
-                  [attr.aria-describedby]="'firstNameError'"
+                  [attr.aria-invalid]="
+                    registerForm.get('firstName')?.touched &&
+                    registerForm.get('firstName')?.invalid
+                  "
+                  [attr.aria-errormessage]="'firstNameError'"
                   formControlName="firstName"
                   name="text"
                 />
                 <cx-form-errors
                   id="firstNameError"
-                  aria-live="off"
                   [control]="registerForm.get('firstName')"
                 ></cx-form-errors>
               </label>
@@ -72,13 +75,16 @@ <h2 id="asm-create-customer-form-title" class="title modal-title">
                   placeholder="{{
                     'asm.createCustomerForm.lastName.placeholder' | cxTranslate
                   }}"
-                  [attr.aria-describedby]="'lastNameError'"
+                  [attr.aria-invalid]="
+                    registerForm.get('lastName')?.touched &&
+                    registerForm.get('lastName')?.invalid
+                  "
+                  [attr.aria-errormessage]="'lastNameError'"
                   name="text"
                   formControlName="lastName"
                 />
                 <cx-form-errors
                   id="lastNameError"
-                  aria-live="off"
                   [control]="registerForm.get('lastName')"
                 ></cx-form-errors>
               </label>
@@ -96,13 +102,16 @@ <h2 id="asm-create-customer-form-title" class="title modal-title">
                     'asm.createCustomerForm.emailAddress.placeholder'
                       | cxTranslate
                   }}"
-                  [attr.aria-describedby]="'emailError'"
+                  [attr.aria-invalid]="
+                    registerForm.get('email')?.touched &&
+                    registerForm.get('email')?.invalid
+                  "
+                  [attr.aria-errormessage]="'emailError'"
                   name="email"
                   formControlName="email"
                 />
                 <cx-form-errors
                   id="emailError"
-                  aria-live="off"
                   [control]="registerForm.get('email')"
                 ></cx-form-errors>
               </label>

feature-libs/asm/components/csagent-login-form/csagent-login-form.component.html

@@ -12,14 +12,17 @@
       type="text"
       formControlName="userId"
       [attr.aria-label]="'asm.loginForm.userId.label' | cxTranslate"
-      [attr.aria-describedby]="'userIdError'"
+      [attr.aria-invalid]="
+        csAgentLoginForm.get('userId')?.touched &&
+        csAgentLoginForm.get('userId')?.invalid
+      "
+      [attr.aria-errormessage]="'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,
       }"
@@ -41,15 +44,18 @@
       type="password"
       formControlName="password"
       [attr.aria-label]="'asm.loginForm.password.label' | cxTranslate"
-      [attr.aria-describedby]="'passwordError'"
+      [attr.aria-invalid]="
+        csAgentLoginForm.get('password')?.touched &&
+        csAgentLoginForm.get('password')?.invalid
+      "
+      [attr.aria-errormessage]="'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,
       }"

feature-libs/asm/components/customer-selection/customer-selection.component.html

@@ -175,7 +175,11 @@
         type="text"
         formControlName="searchTerm"
         [attr.aria-label]="'asm.customerSearch.searchTerm.label' | cxTranslate"
-        [attr.aria-describedby]="'searchTermError'"
+        [attr.aria-invalid]="
+          customerSelectionForm.get('searchTerm')?.touched &&
+          customerSelectionForm.get('searchTerm')?.invalid
+        "
+        [attr.aria-errormessage]="'searchTermError'"
         placeholder="{{ 'asm.customerSearch.searchTerm.label' | cxTranslate }}"
         (keydown.arrowdown)="focusFirstItem($event)"
         (keydown.end)="setSelectionEnd($event)"
@@ -185,7 +189,6 @@
       <cx-form-errors
         *cxFeature="'formErrorsDescriptiveMessages'"
         id="searchTermError"
-        aria-live="off"
         [translationParams]="{
           label: 'asm.customerSearch.searchTerm.label' | cxTranslate,
         }"

feature-libs/cart/base/components/cart-coupon/cart-coupon.component.html

@@ -62,7 +62,11 @@
           <!-- TODO: (CXSPA-7479) Remove feature flags next major -->
           <input
             [attr.aria-labelledby]="'card-coupon-input-label'"
-            [attr.aria-describedby]="'couponCodeError'"
+            [attr.aria-invalid]="
+              couponForm.get('couponCode')?.touched &&
+              couponForm.get('couponCode')?.invalid
+            "
+            [attr.aria-errormessage]="'couponCodeError'"
             required="true"
             type="text"
             class="form-control input-coupon-code"
@@ -81,7 +85,6 @@
           <cx-form-errors
             *cxFeature="'formErrorsDescriptiveMessages'"
             id="couponCodeError"
-            aria-live="off"
             [translationParams]="{
               label: 'voucher.placeholder' | cxTranslate,
             }"

feature-libs/cart/import-export/components/import-to-cart/import-entries-dialog/import-to-new-saved-cart-form/import-to-new-saved-cart-form.component.html

@@ -47,11 +47,13 @@
         formControlName="name"
         required
         type="text"
-        [attr.aria-describedby]="'nameError'"
+        [attr.aria-invalid]="
+          form.get('name')?.touched && form.get('name')?.invalid
+        "
+        [attr.aria-errormessage]="'nameError'"
       />
       <cx-form-errors
         id="nameError"
-        aria-live="off"
         [control]="form.get('name')"
       ></cx-form-errors>
     </label>
@@ -70,8 +72,15 @@
         class="form-control"
         formControlName="description"
         rows="5"
+        [attr.aria-invalid]="
+          form.get('description')?.touched && form.get('description')?.invalid
+        "
+        [attr.aria-errormessage]="'descriptionError'"
       ></textarea>
-      <cx-form-errors [control]="form.get('description')"></cx-form-errors>
+      <cx-form-errors
+        id="descriptionError"
+        [control]="form.get('description')"
+      ></cx-form-errors>
 
       <p class="cx-import-entries-input-hint">
         {{

feature-libs/cart/saved-cart/components/saved-cart-form-dialog/saved-cart-form-dialog.component.html

@@ -228,7 +228,10 @@
                   required="true"
                   [maxLength]="nameMaxLength"
                   class="form-control"
-                  [attr.aria-describedby]="'nameError'"
+                  [attr.aria-invalid]="
+                    form.get('name')?.touched && form.get('name')?.invalid
+                  "
+                  [attr.aria-errormessage]="'nameError'"
                   formControlName="name"
                   required
                   type="text"
@@ -238,7 +241,6 @@
                 <cx-form-errors
                   *cxFeature="'formErrorsDescriptiveMessages'"
                   id="nameError"
-                  aria-live="off"
                   [translationParams]="{
                     label: 'savedCartDialog.savedCartName' | cxTranslate,
                   }"
@@ -264,7 +266,11 @@
               <textarea
                 [maxLength]="descriptionMaxLength"
                 class="form-control"
-                [attr.aria-describedby]="'descriptionError'"
+                [attr.aria-invalid]="
+                  form.get('description')?.touched &&
+                  form.get('description')?.invalid
+                "
+                [attr.aria-errormessage]="'descriptionError'"
                 formControlName="description"
                 rows="5"
               ></textarea>
@@ -273,7 +279,6 @@
               <cx-form-errors
                 *cxFeature="'formErrorsDescriptiveMessages'"
                 id="descriptionError"
-                aria-live="off"
                 [translationParams]="{
                   label: 'savedCartDialog.savedCartDescription' | cxTranslate,
                 }"

feature-libs/checkout/base/components/checkout-billing-address/checkout-billing-address-form.component.html

@@ -58,13 +58,19 @@
                 placeholder="{{ 'addressForm.selectOne' | cxTranslate }}"
                 (change)="countrySelected($event)"
                 formControlName="isocode"
+                [attr.aria-invalid]="
+                  billingAddressForm.get('isocode')?.touched &&
+                  billingAddressForm.get('isocode')?.invalid
+                "
+                [attr.aria-errormessage]="'isocodeError'"
                 id="country-payment-select"
                 [cxNgSelectA11y]="{
                   ariaLabel: 'addressForm.country' | cxTranslate,
                 }"
               >
               </ng-select>
               <cx-form-errors
+                id="isocodeError"
                 [control]="billingAddressForm.get('country.isocode')"
               ></cx-form-errors>
             </label>
@@ -85,11 +91,14 @@
               'addressForm.firstName.placeholder' | cxTranslate
             }}"
             formControlName="firstName"
-            [attr.aria-describedby]="'firstNameError'"
+            [attr.aria-invalid]="
+              billingAddressForm.get('firstName')?.touched &&
+              billingAddressForm.get('firstName')?.invalid
+            "
+            [attr.aria-errormessage]="'firstNameError'"
           />
           <cx-form-errors
             id="firstNameError"
-            aria-live="off"
             [control]="billingAddressForm.get('firstName')"
           ></cx-form-errors>
         </label>
@@ -106,11 +115,14 @@
             class="form-control"
             placeholder="{{ 'addressForm.lastName.placeholder' | cxTranslate }}"
             formControlName="lastName"
-            [attr.aria-describedby]="'lastNameError'"
+            [attr.aria-invalid]="
+              billingAddressForm.get('lastName')?.touched &&
+              billingAddressForm.get('lastName')?.invalid
+            "
+            [attr.aria-errormessage]="'lastNameError'"
           />
           <cx-form-errors
             id="lastNameError"
-            aria-live="off"
             [control]="billingAddressForm.get('lastName')"
           ></cx-form-errors>
         </label>
@@ -127,11 +139,14 @@
             class="form-control"
             placeholder="{{ 'addressForm.streetAddress' | cxTranslate }}"
             formControlName="line1"
-            [attr.aria-describedby]="'line1Error'"
+            [attr.aria-invalid]="
+              billingAddressForm.get('line1')?.touched &&
+              billingAddressForm.get('line1')?.invalid
+            "
+            [attr.aria-errormessage]="'line1Error'"
           />
           <cx-form-errors
             id="line1Error"
-            aria-live="off"
             [control]="billingAddressForm.get('line1')"
           ></cx-form-errors>
         </label>
@@ -162,11 +177,14 @@
               class="form-control"
               placeholder="{{ 'addressForm.city.placeholder' | cxTranslate }}"
               formControlName="town"
-              [attr.aria-describedby]="'townError'"
+              [attr.aria-invalid]="
+                billingAddressForm.get('town')?.touched &&
+                billingAddressForm.get('town')?.invalid
+              "
+              [attr.aria-errormessage]="'townError'"
             />
             <cx-form-errors
               id="townError"
-              aria-live="off"
               [control]="billingAddressForm.get('town')"
             ></cx-form-errors>
           </label>
@@ -185,11 +203,14 @@
                 'addressForm.zipCode.placeholder' | cxTranslate
               }}"
               formControlName="postalCode"
-              [attr.aria-describedby]="'postalCodeError'"
+              [attr.aria-invalid]="
+                billingAddressForm.get('postalCode')?.touched &&
+                billingAddressForm.get('postalCode')?.invalid
+              "
+              [attr.aria-errormessage]="'postalCodeError'"
             />
             <cx-form-errors
               id="postalCodeError"
-              aria-live="off"
               [control]="billingAddressForm.get('postalCode')"
             ></cx-form-errors>
           </label>
@@ -208,6 +229,11 @@
                   [inputAttrs]="{ required: 'true' }"
                   class="region-select"
                   formControlName="isocodeShort"
+                  [attr.aria-invalid]="
+                    billingAddressForm.get('isocodeShort')?.touched &&
+                    billingAddressForm.get('isocodeShort')?.invalid
+                  "
+                  [attr.aria-errormessage]="'isocodeShortError'"
                   [searchable]="true"
                   [clearable]="false"
                   [items]="regions"
@@ -221,6 +247,7 @@
                 >
                 </ng-select>
                 <cx-form-errors
+                  id="isocodeShortError"
                   [control]="billingAddressForm.get('region.isocodeShort')"
                 ></cx-form-errors>
               </label>

feature-libs/checkout/base/components/checkout-login/checkout-login.component.html

@@ -15,14 +15,17 @@
         placeholder="{{
           'checkoutLogin.emailAddress.placeholder' | cxTranslate
         }}"
-        [attr.aria-describedby]="'emailError'"
+        [attr.aria-invalid]="
+          checkoutLoginForm.get('email')?.touched &&
+          checkoutLoginForm.get('email')?.invalid
+        "
+        [attr.aria-errormessage]="'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,
         }"
@@ -51,14 +54,17 @@
         placeholder="{{
           'checkoutLogin.confirmEmail.placeholder' | cxTranslate
         }}"
-        [attr.aria-describedby]="'emailConfirmationError'"
+        [attr.aria-invalid]="
+          checkoutLoginForm.get('emailConfirmation')?.touched &&
+          checkoutLoginForm.get('emailConfirmation')?.invalid
+        "
+        [attr.aria-errormessage]="'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,
         }"