Merge pull request #2230 from huntario/BCTHEME-1092

fix(storefront): BCTHEME-1092 Make screen reader say all errors then …
bigcommerce · Jul 28, 2022 · 02cad1c · 02cad1c
2 parents 1a3409c + cdc38d0
commit 02cad1c
Show file tree

Hide file tree

Showing 10 changed files with 36 additions and 8 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Incorrect translation key for Diners Club card type. [#2237](https://github.com/bigcommerce/cornerstone/issues/2237).
 - Make screen reader say error messages when editing customer account. [#2233](https://github.com/bigcommerce/cornerstone/pull/2233)
 - Bump webpack-bundle-analyzer [#2229]https://github.com/bigcommerce/cornerstone/pull/2229
+- Make screen reader say all errors then each error while tabbing. [#2230]https://github.com/bigcommerce/cornerstone/pull/2230
 
 ## 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
@@ -111,7 +111,7 @@ export default class Auth extends PageManager {
         const validationModel = validation($createAccountForm, this.context);
         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']`;
@@ -170,15 +170,20 @@ export default class Auth extends PageManager {
             );
         }
 
-        $createAccountForm.on('submit', event => {
-            createAccountValidator.performCheck();
+        $createAccountForm.on('submit', (event) => {
+            this.submitAction(event, createAccountValidator);
+        });
+    }
 
-            if (createAccountValidator.areAll('valid')) {
-                return;
-            }
+    submitAction(event, validator) {
+        validator.performCheck();
 
-            event.preventDefault();
-        });
+        if (validator.areAll('valid')) {
+            return;
+        }
+        event.preventDefault();
+        const earliestError = $('span.form-inlineMessage:first').prev('input');
+        earliestError.focus();
     }
 
     /**

diff --git a/templates/components/common/forms/checkbox.html b/templates/components/common/forms/checkbox.html
@@ -13,6 +13,8 @@
                    data-input
                    data-label="{{label}}"
                    class="form-checkbox"
+                   aria-labelledby="{{id}}"
+                   aria-live="polite"
                    {{#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
@@ -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,6 +27,8 @@
                     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}}
@@ -37,6 +41,8 @@
                     data-label="year"
                     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 year isRequired=required}}

diff --git a/templates/components/common/forms/multiline.html b/templates/components/common/forms/multiline.html
@@ -9,6 +9,8 @@
               data-label="{{label}}"
               rows="{{rows}}"
               aria-required="{{required}}"
+              aria-labelledby="{{id}}"
+              aria-live="polite"
               data-input
               class="form-input"
               {{#if private_id}}data-field-type="{{private_id}}"{{/if}}

diff --git a/templates/components/common/forms/number.html b/templates/components/common/forms/number.html
@@ -14,6 +14,8 @@
            id="{{id}}_input"
            name="{{name}}"
            aria-required="{{required}}"
+           aria-labelledby="{{id}}"
+           aria-live="polite"
            {{#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
@@ -15,6 +15,8 @@
                 data-label="{{label}}"
                 data-input
                 aria-required="{{required}}"
+                aria-labelledby="{{id}}"
+                aria-live="polite"
                 {{#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
@@ -8,6 +8,8 @@
             data-label="{{label}}"
             data-input
             aria-required="{{required}}"
+            aria-labelledby="{{id}}"
+            aria-live="polite"
             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
@@ -9,6 +9,8 @@
                value="{{value}}"
                class="form-input"
                aria-required="{{required}}"
+               aria-labelledby="{{id}}"
+               aria-live="polite"
                data-label="{{label}}"
                data-input
         />
@@ -22,6 +24,8 @@
     <select name="{{name}}"
             class="form-select"
             aria-required="{{required}}"
+            aria-labelledby="{{id}}"
+            aria-live="polite"
             id="{{id}}_select"
             data-label="{{label}}"
             data-input

diff --git a/templates/components/common/forms/text.html b/templates/components/common/forms/text.html
@@ -9,6 +9,8 @@
            data-label="{{label}}"
            data-input
            aria-required="{{required}}"
+           aria-labelledby="{{id}}"
+           aria-live="polite"
            {{#if value}} value="{{value}}"{{/if}}
            {{#if maxlength}}maxlength="{{maxlength}}"{{/if}}
            {{#if placeholder}} placeholder="{{placeholder}}"{{/if}}