From db60945ab5cdabaf79dfd63efa0a2e41bfe9d7fb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9Cbc-yevhenii-buliuk=E2=80=9D?=
 <“yevhenii.buliuk@bigcommerce.com”>
Date: Tue, 12 Jul 2022 12:18:03 +0300
Subject: [PATCH] fix(storefront): BCTHEME-1128 Form Input Error Message and
 Accessibility.

---
 CHANGELOG.md                                       |  1 +
 assets/js/theme/auth.js                            | 14 ++++++++++++++
 assets/js/theme/common/utils/form-utils.js         |  7 +++++--
 templates/components/common/forms/checkbox.html    |  3 ++-
 templates/components/common/forms/date.html        |  9 ++++++---
 templates/components/common/forms/multiline.html   |  3 ++-
 templates/components/common/forms/number.html      |  3 ++-
 templates/components/common/forms/password.html    |  3 ++-
 templates/components/common/forms/radio.html       |  3 ++-
 templates/components/common/forms/select.html      |  3 ++-
 .../components/common/forms/selectortext.html      |  3 ++-
 templates/components/common/forms/text.html        |  3 ++-
 12 files changed, 42 insertions(+), 13 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ee5e568f8e..be72876c57 100644
--- a/CHANGELOG.md
+++ b/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
diff --git a/assets/js/theme/auth.js b/assets/js/theme/auth.js
index dba4e76729..85a103f497 100644
--- a/assets/js/theme/auth.js
+++ b/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();
         });
     }
diff --git a/assets/js/theme/common/utils/form-utils.js b/assets/js/theme/common/utils/form-utils.js
index bebb29a536..90341d6da2 100644
--- a/assets/js/theme/common/utils/form-utils.js
+++ b/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}`);
         }
     }
 }
diff --git a/templates/components/common/forms/checkbox.html b/templates/components/common/forms/checkbox.html
index dfafd60f4d..419fdc35d6 100644
--- a/templates/components/common/forms/checkbox.html
+++ b/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}}
             >
diff --git a/templates/components/common/forms/date.html b/templates/components/common/forms/date.html
index d7d6e00097..42e1fa253a 100644
--- a/templates/components/common/forms/date.html
+++ b/templates/components/common/forms/date.html
@@ -7,36 +7,39 @@
     </label>
     <div class="form-row form-row--third">
         <div class="form-field">
-            <select class="form-select"
+            <select class="form-select focus-field"
                     name="{{month.name}}"
                     id="{{id}}_month"
                     data-label="month"
                     data-input
                     aria-required="{{required}}"
+                    aria-describedby="{{id}}_describedby"
                     {{#if private_id}}data-field-type="{{private_id}}"{{/if}}
             >
             {{> components/common/forms/date-options month isRequired=required}}
             </select>
         </div>
         <div class="form-field">
-            <select class="form-select"
+            <select class="form-select focus-field"
                     name="{{day.name}}"
                     id="{{id}}_day"
                     data-label="day"
                     data-input
                     aria-required="{{required}}"
+                    aria-describedby="{{id}}_describedby"
                     {{#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}}
diff --git a/templates/components/common/forms/multiline.html b/templates/components/common/forms/multiline.html
index c8fa1e5016..6cd86a4868 100644
--- a/templates/components/common/forms/multiline.html
+++ b/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}}
diff --git a/templates/components/common/forms/number.html b/templates/components/common/forms/number.html
index ef70dab8ee..4b2d3bbeb1 100644
--- a/templates/components/common/forms/number.html
+++ b/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>
diff --git a/templates/components/common/forms/password.html b/templates/components/common/forms/password.html
index 97964ec7fb..cc64033cc0 100644
--- a/templates/components/common/forms/password.html
+++ b/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>
diff --git a/templates/components/common/forms/radio.html b/templates/components/common/forms/radio.html
index 179caee799..a93b5e1417 100644
--- a/templates/components/common/forms/radio.html
+++ b/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}}
             >
diff --git a/templates/components/common/forms/select.html b/templates/components/common/forms/select.html
index 1f4a9e5f1f..f17ead18ca 100644
--- a/templates/components/common/forms/select.html
+++ b/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}}
     >
diff --git a/templates/components/common/forms/selectortext.html b/templates/components/common/forms/selectortext.html
index ff2ebb150a..b1d0b474b2 100644
--- a/templates/components/common/forms/selectortext.html
+++ b/templates/components/common/forms/selectortext.html
@@ -20,8 +20,9 @@
         {{/if}}
     </label>
     <select name="{{name}}"
-            class="form-select"
+            class="form-select focus-field"
             aria-required="{{required}}"
+            aria-describedby="{{id}}_describedby"
             id="{{id}}_select"
             data-label="{{label}}"
             data-input
diff --git a/templates/components/common/forms/text.html b/templates/components/common/forms/text.html
index cbbd4eca16..53b4d5c525 100644
--- a/templates/components/common/forms/text.html
+++ b/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}}