From 386d6f8916882f362a95a558c38b1623e0fc3087 Mon Sep 17 00:00:00 2001
From: "alex.saiannyi" <alexander.saiannyi@bigcommerce.com>
Date: Tue, 22 Dec 2020 17:59:44 +0200
Subject: [PATCH] fix(storefront): BCTHEME-346 add announcement for shipping
 estimator error messages

---
 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 0c7c96ce11..08b47c7c69 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)
 
 ## 5.0.0 (12-14-2020)
 - Parse HTML entities in jsContext. [#1917](https://github.com/bigcommerce/cornerstone/pull/1917)
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>