fix(storefront): BCTHEME-1093 Make screen reader say all errors on me…

…ssage page
fusionary · Jul 28, 2022 · 38b11c3 · 38b11c3
1 parent 02cad1c
commit 38b11c3
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 5 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Cannot Vault 16-digit Diners Club cards - creditcards module version is out of date [#2239](https://github.com/bigcommerce/cornerstone/issues/2239)
 - 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)
+- On customer message page, screen reader should say each error [#2234]https://github.com/bigcommerce/cornerstone/pull/2234
 - 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
 

diff --git a/assets/js/theme/account.js b/assets/js/theme/account.js
@@ -404,7 +404,7 @@ export default class Account extends PageManager {
     registerInboxValidation($inboxForm) {
         const inboxValidator = nod({
             submit: 'form[data-inbox-form] input[type="submit"]',
-            tap: announceInputErrorMessage,
+            delay: 0,
         });
 
         inboxValidator.add([
@@ -445,6 +445,8 @@ export default class Account extends PageManager {
             }
 
             event.preventDefault();
+            const earliestError = $('span.form-inlineMessage:first').prev('input');
+            earliestError.focus();
         });
     }
 }
diff --git a/templates/components/account/messages-form.html b/templates/components/account/messages-form.html
@@ -15,20 +15,20 @@ <h2>{{lang 'forms.inbox.send_message'}}</h2>
                 {{/each}}
             </select>
         </div>
-        <div class="form-field">
+        <div class="form-field" id="message_subject_field_id">
             <label class="form-label" for="message_subject">
                 {{lang 'forms.inbox.subject' }}
                 <small>{{lang 'common.required' }}</small>
             </label>
-            <input type="text" class="form-input" name="message_subject" id="message_subject">
+            <input aria-labelledby="message_subject_field_id" aria-live="polite" type="text" class="form-input" name="message_subject" id="message_subject">
         </div>
-        <div class="form-field">
+        <div class="form-field" id="message_content_field_id">
             <label class="form-label" for="message_content">
                 {{lang 'forms.inbox.message' }}
                 <small>{{lang 'common.required' }}</small>
             </label>
 
-            <textarea class="form-input" name="message_content" id="message_content" rows="7" ></textarea>
+            <textarea aria-labelledby="message_content_field_id" aria-live="polite" class="form-input" name="message_content" id="message_content" rows="7" ></textarea>
         </div>
         <div class="form-actions">
             <input class="button button--primary" type="submit" value="{{lang 'forms.inbox.submit_value' }}">