From 835c0501a49ea3f859c835ddfd91dfc9c5a7cff9 Mon Sep 17 00:00:00 2001
From: "alex.saiannyi" <alexander.saiannyi@bigcommerce.com>
Date: Thu, 14 Jan 2021 14:30:43 +0200
Subject: [PATCH] fix(storefront): BCTHEME-369 fix announcement on adding to
 cart by screen reader

---
 CHANGELOG.md                                   |  1 +
 assets/js/theme/common/product-details.js      |  5 +++++
 templates/components/products/add-to-cart.html | 12 +++++++++---
 3 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5fde0240d1..68e30121ee 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,7 @@
 # Changelog
 
 ## Draft
+- Fixed announcement for product on adding to cart. [#1950](https://github.com/bigcommerce/cornerstone/pull/1950)
 - Carousel buttons do not receive focus. [#1937](https://github.com/bigcommerce/cornerstone/pull/1937)
 - Empty cart message not read by screen reader. [#1935](https://github.com/bigcommerce/cornerstone/pull/1935)
 - No tooltips provided for carousel buttons. [#1934](https://github.com/bigcommerce/cornerstone/pull/1934)
diff --git a/assets/js/theme/common/product-details.js b/assets/js/theme/common/product-details.js
index 15382dfd53..cabb1fc130 100644
--- a/assets/js/theme/common/product-details.js
+++ b/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',
+        });
     }
 
     /**
diff --git a/templates/components/products/add-to-cart.html b/templates/components/products/add-to-cart.html
index a5421ffdd4..9ff3ade1d3 100644
--- a/templates/components/products/add-to-cart.html
+++ b/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}}