fix(storefront): BCTHEME-369 fix announcement on adding to cart by sc…

…reen reader (#1950)

CHANGELOG.md

@@ -1,6 +1,7 @@
 # Changelog
 
 ## Draft
+- Fixed announcement for product on adding to cart. [#1950](https://github.com/bigcommerce/cornerstone/pull/1950)
 - Fixed non-text contrast on add to cart modal according to WCAG AA standard.  [#1946](https://github.com/bigcommerce/cornerstone/pull/1946)
 - Fixed announcement of reCAPTCHA hidden content by screen reader. [#1943](https://github.com/bigcommerce/cornerstone/pull/1943)
 - Carousel buttons do not receive focus. [#1937](https://github.com/bigcommerce/cornerstone/pull/1937)

assets/js/theme/common/product-details.js

@@ -334,6 +334,11 @@ export default class ProductDetails extends ProductDetailsBase {
                 this.redirectTo(response.data.cart_item.cart_url || this.context.urls.cart);
             }
         });
+
+        $addToCartBtn.next().attr({
+            role: 'status',
+            'aria-live': 'polite',
+        });
     }
 
     /**

templates/components/products/add-to-cart.html

@@ -40,8 +40,14 @@
     <p class="alertBox-column alertBox-message"></p>
 </div>
 {{#or customer (if theme_settings.restrict_to_login '!==' true)}}
-    <div class="form-action" role="status" aria-live="polite">
-        <input id="form-action-addToCart" data-wait-message="{{lang 'products.adding_to_cart'}}" class="button button--primary" type="submit"
-            value="{{#if product.pre_order}}{{lang 'products.pre_order'}}{{else}}{{lang 'products.add_to_cart'}}{{/if}}">
+    <div class="form-action">
+        <input 
+            id="form-action-addToCart"
+            data-wait-message="{{lang 'products.adding_to_cart'}}"
+            class="button button--primary"
+            type="submit"
+            value="{{#if product.pre_order}}{{lang 'products.pre_order'}}{{else}}{{lang 'products.add_to_cart'}}{{/if}}"
+        >
+        <span class="product-status-message aria-description--hidden">{{lang 'products.adding_to_cart'}} {{lang 'category.add_cart_announcement'}}</span>
     </div>
 {{/or}}