fix(storefront): BCTHEME-346 add announcement for shipping estimator …

…error messages (bigcommerce#1932) Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com>
sacr3dc0w · Mar 31, 2021 · 1f04bf5 · 1f04bf5
1 parent 6feb2c6
commit 1f04bf5
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 1 deletion.
diff --git 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
@@ -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
@@ -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>