From 1f04bf54d1f10f6421e63c6f69f34ef0b17643a8 Mon Sep 17 00:00:00 2001
From: Alex Saiannyi <67792608+bc-alexsaiannyi@users.noreply.github.com>
Date: Tue, 5 Jan 2021 15:14:44 +0200
Subject: [PATCH] fix(storefront): BCTHEME-346 add announcement for shipping
 estimator error messages (#1932)

Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com>
---
 CHANGELOG.md                                      |  1 +
 assets/js/theme/cart/shipping-estimator.js        | 10 ++++++++++
 templates/components/cart/shipping-estimator.html |  2 +-
 3 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index da1c7b7908..859a61d846 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,7 @@
 # Changelog
 
 ## Draft
+- Added announcement on shipping estimator errors. [#1932](https://github.com/bigcommerce/cornerstone/pull/1932)
 - Add main tag on pages like Homepage, Category, Product etc to define the dominant content. [#1929](https://github.com/bigcommerce/cornerstone/pull/1929)
 - Fixed unable to change product quantity several times on cart page using keyboard. [#1927](https://github.com/bigcommerce/cornerstone/pull/1927)
 - Cornerstone - loading of thumbnail image delayed on cart page . [#1925](https://github.com/bigcommerce/cornerstone/pull/1925)
diff --git a/assets/js/theme/cart/shipping-estimator.js b/assets/js/theme/cart/shipping-estimator.js
index f3fc58b86a..6a30260f1d 100644
--- a/assets/js/theme/cart/shipping-estimator.js
+++ b/assets/js/theme/cart/shipping-estimator.js
@@ -17,12 +17,22 @@ export default class ShippingEstimator {
     }
 
     initFormValidation() {
+        const shippingEstimatorAlert = $('.shipping-quotes');
+
         this.shippingEstimator = 'form[data-shipping-estimator]';
         this.shippingValidator = nod({
             submit: `${this.shippingEstimator} .shipping-estimate-submit`,
         });
 
         $('.shipping-estimate-submit', this.$element).on('click', event => {
+            // estimator error messages are being injected in html as a result
+            // of user submit; clearing and adding role on submit provides
+            // regular announcement of these error messages
+            if (shippingEstimatorAlert.attr('role')) {
+                shippingEstimatorAlert.removeAttr('role');
+            }
+
+            shippingEstimatorAlert.attr('role', 'alert');
             // When switching between countries, the state/region is dynamic
             // Only perform a check for all fields when country has a value
             // Otherwise areAll('valid') will check country for validity
diff --git a/templates/components/cart/shipping-estimator.html b/templates/components/cart/shipping-estimator.html
index 382dfc2c8b..d07217747d 100644
--- a/templates/components/cart/shipping-estimator.html
+++ b/templates/components/cart/shipping-estimator.html
@@ -67,5 +67,5 @@
             <button class="button button--primary button--small shipping-estimate-submit">{{lang 'cart.shipping_estimator.estimate_shipping'}}</button>
         </dl>
     </form>
-    <div class="shipping-quotes"></div>
+    <div class="shipping-quotes" role="alert" aria-atomic="true" aria-live="assertive"></div>
 </div>