fix(storefront): BCTHEME-1128 Form Input Error Message and Accessibil…

…ity.

CHANGELOG.md

@@ -5,6 +5,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## Draft
+- Form Input Error Message and Accessibility. [#2235](https://github.com/bigcommerce/cornerstone/issues/2235).
 
 ## 6.5.0 (06-24-2022)
 - Category icons do not appear in Search Form [#2221]https://github.com/bigcommerce/cornerstone/pull/2221

assets/js/theme/auth.js

@@ -112,6 +112,7 @@ export default class Auth extends PageManager {
         const createAccountValidator = nod({
             submit: `${this.formCreateSelector} input[type='submit']`,
             tap: announceInputErrorMessage,
+            delay: 0,
         });
         const $stateElement = $('[data-field-type="State"]');
         const emailSelector = `${this.formCreateSelector} [data-field-type='EmailAddress']`;
@@ -177,6 +178,19 @@ export default class Auth extends PageManager {
                 return;
             }
 
+            const errorFormFields = $createAccountForm.find('.form-field--error .focus-field');
+            const formFieldErrorMessages = $createAccountForm.find('span.form-inlineMessage');
+
+            $(formFieldErrorMessages).each((index, message) => {
+                if (index > 0) {
+                    $(message).removeAttr('id');
+                    $(message).removeAttr('role');
+                    $(message).removeAttr('aria-live');
+                }
+            });
+
+            errorFormFields[0].focus();
+
             event.preventDefault();
         });
     }

assets/js/theme/common/utils/form-utils.js

@@ -141,9 +141,12 @@ function announceInputErrorMessage({ element, result }) {
 
     if (errorMessage.length) {
         const $errMessage = $(errorMessage[0]);
+        const ariaDescribedby = $(element).attr('aria-describedby');
 
-        if (!$errMessage.attr('role')) {
-            $errMessage.attr('role', 'alert');
+        if (!$errMessage.attr('role') && !$errMessage.attr('aria-live') && !$errMessage.attr('id')) {
+            $errMessage.attr('role', 'status');
+            $errMessage.attr('aria-live', 'polite');
+            $errMessage.attr('id', `${ariaDescribedby}`);
         }
     }
 }

templates/components/common/forms/checkbox.html

@@ -12,7 +12,8 @@
                    id="{{name}}"
                    data-input
                    data-label="{{label}}"
-                   class="form-checkbox"
+                   class="form-checkbox focus-field"
+                   aria-describedby="{{id}}_describedby"
                    {{#if checked}}checked{{/if}}
                    {{#if private_id}}data-field-type="{{private_id}}"{{/if}}
             >

templates/components/common/forms/date.html

@@ -13,6 +13,8 @@
                     data-label="month"
                     data-input
                     aria-required="{{required}}"
+                    aria-labelledby="{{id}}"
+                    aria-live="polite"
                     {{#if private_id}}data-field-type="{{private_id}}"{{/if}}
             >
             {{> components/common/forms/date-options month isRequired=required}}
@@ -25,18 +27,21 @@
                     data-label="day"
                     data-input
                     aria-required="{{required}}"
+                    aria-labelledby="{{id}}"
+                    aria-live="polite"
                     {{#if private_id}}data-field-type="{{private_id}}"{{/if}}
             >
             {{> components/common/forms/date-options day isRequired=required}}
             </select>
         </div>
         <div class="form-field">
-            <select class="form-select"
+            <select class="form-select focus-field"
                     name="{{year.name}}"
                     id="{{id}}_year"
                     data-label="year"
                     data-input
                     aria-required="{{required}}"
+                    aria-describedby="{{id}}_describedby"
                     {{#if private_id}}data-field-type="{{private_id}}"{{/if}}
             >
             {{> components/common/forms/date-options year isRequired=required}}

templates/components/common/forms/multiline.html

@@ -9,8 +9,9 @@
               data-label="{{label}}"
               rows="{{rows}}"
               aria-required="{{required}}"
+              aria-describedby="{{id}}_describedby"
               data-input
-              class="form-input"
+              class="form-input focus-field"
               {{#if private_id}}data-field-type="{{private_id}}"{{/if}}
     >
         {{value}}

templates/components/common/forms/number.html

@@ -3,7 +3,7 @@
         {{#if required}}<small>{{lang 'common.required' }}</small>{{/if}}
     </label>
     <input type="number"
-           class="form-input"
+           class="form-input focus-field"
            data-label="{{label}}"
            data-input
            data-rule="lowerThan"
@@ -14,6 +14,7 @@
            id="{{id}}_input"
            name="{{name}}"
            aria-required="{{required}}"
+           aria-describedby="{{id}}_describedby"
            {{#if private_id}}data-field-type="{{private_id}}"{{/if}}
     >
 </div>

templates/components/common/forms/password.html

@@ -5,13 +5,14 @@
         {{/if}}
     </label>
     <input type="password"
-           class="form-input"
+           class="form-input focus-field"
            id="{{id}}_input"
            data-label="{{label}}"
            name="{{name}}"
            value="{{value}}"
            autocomplete="off"
            aria-required="{{required}}"
+           aria-describedby="{{id}}_describedby"
            {{#if private_id}}data-field-type="{{private_id}}"{{/if}}
     >
 </div>

templates/components/common/forms/radio.html

@@ -8,13 +8,14 @@
         {{#each radios}}
             <input
                 type="radio"
-                class="form-radio"
+                class="form-radio focus-field"
                 name="{{../name}}"
                 id="{{../name}}_{{@index}}"
                 value="{{value}}"
                 data-label="{{label}}"
                 data-input
                 aria-required="{{required}}"
+                aria-describedby="{{id}}_describedby"
                 {{#if checked}}checked{{/if}}
                 {{#if private_id}}data-field-type="{{private_id}}"{{/if}}
             >

templates/components/common/forms/select.html

@@ -3,11 +3,12 @@
     <label class="form-label" for="{{id}}_select">{{label}}
         {{#if required}}<small>{{lang 'common.required' }}</small>{{/if}}
     </label>
-    <select class="{{class}} form-select"
+    <select class="{{class}} form-select focus-field"
             id="{{id}}_select"
             data-label="{{label}}"
             data-input
             aria-required="{{required}}"
+            aria-describedby="{{id}}_describedby"
             name="{{name}}"
             {{#if private_id}} data-field-type="{{private_id}}" {{/if}}
     >

templates/components/common/forms/selectortext.html

@@ -7,8 +7,9 @@
                id="{{id}}_input"
                name="{{name}}"
                value="{{value}}"
-               class="form-input"
+               class="form-input focus-field"
                aria-required="{{required}}"
+               aria-describedby="{{id}}_describedby"
                data-label="{{label}}"
                data-input
         />
@@ -22,6 +23,8 @@
     <select name="{{name}}"
             class="form-select"
             aria-required="{{required}}"
+            aria-labelledby="{{id}}"
+            aria-live="polite"
             id="{{id}}_select"
             data-label="{{label}}"
             data-input

templates/components/common/forms/text.html

@@ -5,10 +5,11 @@
     <input type="text"
            name="{{name}}"
            id="{{id}}_input"
-           class="form-input"
+           class="form-input focus-field"
            data-label="{{label}}"
            data-input
            aria-required="{{required}}"
+           aria-describedby="{{id}}_describedby"
            {{#if value}} value="{{value}}"{{/if}}
            {{#if maxlength}}maxlength="{{maxlength}}"{{/if}}
            {{#if placeholder}} placeholder="{{placeholder}}"{{/if}}