fix(storefront): BCTHEME-372 Error message not announced automatically

CHANGELOG.md

@@ -1,6 +1,7 @@
 # Changelog
 
 ## Draft
+- Error message not announced automatically. [#1983](https://github.com/bigcommerce/cornerstone/pull/1983)
 - Make every product option group id unique. [#1979](https://github.com/bigcommerce/cornerstone/pull/1979)
 - Fixed required checkbox message displaying. [1963](https://github.com/bigcommerce/cornerstone/pull/1963)
 - Provided sufficient & informative text along with the color swatches [#1976](https://github.com/bigcommerce/cornerstone/pull/1976)

assets/js/theme/account.js

@@ -4,7 +4,13 @@ import nod from './common/nod';
 import Wishlist from './wishlist';
 import validation from './common/form-validation';
 import stateCountry from './common/state-country';
-import { classifyForm, Validators, insertStateHiddenField, createPasswordValidationErrorTextObject } from './common/utils/form-utils';
+import {
+    classifyForm,
+    Validators,
+    announceInputErrorMessage,
+    insertStateHiddenField,
+    createPasswordValidationErrorTextObject,
+} from './common/utils/form-utils';
 import { createTranslationDictionary } from './common/utils/translations-utils';
 import { creditCardType, storeInstrument, Validators as CCValidators, Formatters as CCFormatters } from './common/payment-method';
 import swal from './global/sweet-alert';
@@ -139,6 +145,7 @@ export default class Account extends PageManager {
         const $stateElement = $(stateSelector);
         const addressValidator = nod({
             submit: 'form[data-address-form] input[type="submit"]',
+            tap: announceInputErrorMessage,
         });
 
         addressValidator.add(validationModel);
@@ -226,7 +233,10 @@ export default class Account extends PageManager {
 
         const validationModel = validation($paymentMethodForm, this.context);
         const paymentMethodSelector = 'form[data-payment-method-form]';
-        const paymentMethodValidator = nod({ submit: `${paymentMethodSelector} input[type="submit"]` });
+        const paymentMethodValidator = nod({
+            submit: `${paymentMethodSelector} input[type="submit"]`,
+            tap: announceInputErrorMessage,
+        });
         const $stateElement = $(`${paymentMethodSelector} [data-field-type="State"]`);
 
         let $last;
@@ -317,6 +327,7 @@ export default class Account extends PageManager {
         const formEditSelector = 'form[data-edit-account-form]';
         const editValidator = nod({
             submit: '${formEditSelector} input[type="submit"]',
+            tap: announceInputErrorMessage,
         });
         const emailSelector = `${formEditSelector} [data-field-type="EmailAddress"]`;
         const $emailElement = $(emailSelector);
@@ -400,6 +411,7 @@ export default class Account extends PageManager {
     registerInboxValidation($inboxForm) {
         const inboxValidator = nod({
             submit: 'form[data-inbox-form] input[type="submit"]',
+            tap: announceInputErrorMessage,
         });
 
         inboxValidator.add([

assets/js/theme/auth.js

@@ -3,7 +3,12 @@ import stateCountry from './common/state-country';
 import nod from './common/nod';
 import validation from './common/form-validation';
 import forms from './common/models/forms';
-import { classifyForm, Validators, createPasswordValidationErrorTextObject } from './common/utils/form-utils';
+import {
+    classifyForm,
+    Validators,
+    createPasswordValidationErrorTextObject,
+    announceInputErrorMessage,
+} from './common/utils/form-utils';
 import { createTranslationDictionary } from './common/utils/translations-utils';
 
 export default class Auth extends PageManager {
@@ -19,6 +24,7 @@ export default class Auth extends PageManager {
 
         this.loginValidator = nod({
             submit: '.login-form input[type="submit"]',
+            tap: announceInputErrorMessage,
         });
 
         this.loginValidator.add([
@@ -56,6 +62,7 @@ export default class Auth extends PageManager {
     registerForgotPasswordValidation($forgotPasswordForm) {
         this.forgotPasswordValidator = nod({
             submit: '.forgot-password-form input[type="submit"]',
+            tap: announceInputErrorMessage,
         });
 
         this.forgotPasswordValidator.add([
@@ -86,6 +93,7 @@ export default class Auth extends PageManager {
         const newPasswordForm = '.new-password-form';
         const newPasswordValidator = nod({
             submit: $(`${newPasswordForm} input[type="submit"]`),
+            tap: announceInputErrorMessage,
         });
         const passwordSelector = $(`${newPasswordForm} input[name="password"]`);
         const password2Selector = $(`${newPasswordForm} input[name="password_confirm"]`);
@@ -103,6 +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,
         });
         const $stateElement = $('[data-field-type="State"]');
         const emailSelector = `${this.formCreateSelector} [data-field-type='EmailAddress']`;

assets/js/theme/cart/shipping-estimator.js

@@ -1,7 +1,7 @@
 import stateCountry from '../common/state-country';
 import nod from '../common/nod';
 import utils from '@bigcommerce/stencil-utils';
-import { Validators } from '../common/utils/form-utils';
+import { Validators, announceInputErrorMessage } from '../common/utils/form-utils';
 import collapsibleFactory from '../common/collapsible';
 import swal from '../global/sweet-alert';
 
@@ -22,6 +22,7 @@ export default class ShippingEstimator {
         this.shippingEstimator = 'form[data-shipping-estimator]';
         this.shippingValidator = nod({
             submit: `${this.shippingEstimator} .shipping-estimate-submit`,
+            tap: announceInputErrorMessage,
         });
 
         $('.shipping-estimate-submit', this.$element).on('click', event => {

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

@@ -124,6 +124,29 @@ function insertStateHiddenField($stateField) {
     $stateField.after($('<input />', stateFieldAttrs));
 }
 
+/**
+ * Announce form input error message by screen reader
+ * @param {params.element} dom input element where checking is happened
+ * @param {params.result} result of validation check
+ */
+function announceInputErrorMessage({ element, result }) {
+    if (result) {
+        return;
+    }
+    const activeInputContainer = $(element).parent();
+    // the reason for using span tag is nod-validate lib
+    // which does not add error message class while initialising form
+    const errorMessage = $(activeInputContainer).find('span');
+
+    if (errorMessage.length) {
+        const $errMessage = $(errorMessage[0]);
+
+        if (!$errMessage.attr('role')) {
+            $errMessage.attr('role', 'alert');
+        }
+    }
+}
+
 const Validators = {
     /**
      * Sets up a new validation when the form is dirty
@@ -310,4 +333,4 @@ const Validators = {
     },
 };
 
-export { Validators, insertStateHiddenField };
+export { Validators, insertStateHiddenField, announceInputErrorMessage };

assets/js/theme/contact-us.js

@@ -1,6 +1,7 @@
 import PageManager from './page-manager';
 import nod from './common/nod';
 import forms from './common/models/forms';
+import { announceInputErrorMessage } from './common/utils/form-utils';
 
 export default class ContactUs extends PageManager {
     onReady() {
@@ -11,6 +12,7 @@ export default class ContactUs extends PageManager {
         const formSelector = 'form[data-contact-form]';
         const contactUsValidator = nod({
             submit: `${formSelector} input[type="submit"]`,
+            tap: announceInputErrorMessage,
         });
         const $contactForm = $(formSelector);
 

assets/js/theme/gift-certificate.js

@@ -3,6 +3,7 @@ import nod from './common/nod';
 import giftCertChecker from './common/gift-certificate-validator';
 import formModel from './common/models/forms';
 import { createTranslationDictionary } from './common/utils/translations-utils';
+import { announceInputErrorMessage } from './common/utils/form-utils';
 import { api } from '@bigcommerce/stencil-utils';
 import { defaultModal } from './global/modal';
 
@@ -48,6 +49,7 @@ export default class GiftCertificate extends PageManager {
         const purchaseValidator = nod({
             submit: '#gift-certificate-form input[type="submit"]',
             delay: 300,
+            tap: announceInputErrorMessage,
         });
 
         if ($customAmounts.length) {
@@ -196,6 +198,7 @@ export default class GiftCertificate extends PageManager {
     checkCertBalanceValidator($balanceForm) {
         const balanceValidator = nod({
             submit: $balanceForm.find('input[type="submit"]'),
+            tap: announceInputErrorMessage,
         });
 
         balanceValidator.add({

assets/js/theme/product/reviews.js

@@ -2,11 +2,13 @@ import nod from '../common/nod';
 import { CollapsibleEvents } from '../common/collapsible';
 import forms from '../common/models/forms';
 import { safeString } from '../common/utils/safe-string';
+import { announceInputErrorMessage } from '../common/utils/form-utils';
 
 export default class {
     constructor($reviewForm) {
         this.validator = nod({
             submit: $reviewForm.find('input[type="submit"]'),
+            tap: announceInputErrorMessage,
         });
 
         this.$reviewsContent = $('#product-reviews');

assets/js/theme/search.js

@@ -1,6 +1,7 @@
 import { hooks } from '@bigcommerce/stencil-utils';
 import CatalogPage from './catalog';
 import FacetedSearch from './common/faceted-search';
+import { announceInputErrorMessage } from './common/utils/form-utils';
 import compareProducts from './global/compare-products';
 import urlUtils from './common/utils/url-utils';
 import Url from 'url';
@@ -318,6 +319,7 @@ export default class Search extends CatalogPage {
         this.$form = $form;
         this.validator = nod({
             submit: $form,
+            tap: announceInputErrorMessage,
         });
 
         return this;

assets/js/theme/wishlist.js

@@ -3,6 +3,7 @@ import 'foundation-sites/js/foundation/foundation.reveal';
 import nod from './common/nod';
 import PageManager from './page-manager';
 import { wishlistPaginatorHelper } from './common/utils/pagination-utils';
+import { announceInputErrorMessage } from './common/utils/form-utils';
 
 export default class WishList extends PageManager {
     constructor(context) {
@@ -33,6 +34,7 @@ export default class WishList extends PageManager {
     registerAddWishListValidation($addWishlistForm) {
         this.addWishlistValidator = nod({
             submit: '.wishlist-form input[type="submit"]',
+            tap: announceInputErrorMessage,
         });
 
         this.addWishlistValidator.add([