feat(storefront):add to cart notification

CHANGELOG.md

@@ -4,6 +4,7 @@
 - Quick search query param needs to be fixed while navigating to search page. [#230](https://jira.bigcommerce.com/browse/BCTHEME-230)
 
 ## Draft
+- Added announcement for "aadd to cart" button on PLP and PDP. [#1860](https://github.com/bigcommerce/cornerstone/pull/1860)
 - Create unified focus styling in Cornerstone. [#1812](https://github.com/bigcommerce/cornerstone/pull/1812)
 - Review link in quick modal focused twice. [#1797](https://github.com/bigcommerce/cornerstone/pull/1797)
 - Fixed product image doesn't change on click when viewing a product with multiple images in IE11 [#1748](https://github.com/bigcommerce/cornerstone/pull/1748)

assets/js/theme/category.js

@@ -5,6 +5,13 @@ import FacetedSearch from './common/faceted-search';
 
 export default class Category extends CatalogPage {
     onReady() {
+        $('[data-button-type="add-cart"]').on('click', (e) => {
+            $(e.currentTarget).next().attr({
+                role: 'status',
+                'aria-live': 'polite',
+            });
+        });
+
         compareProducts(this.context.urls);
 
         if ($('#facetedSearch').length > 0) {

lang/en.json

@@ -216,6 +216,7 @@
         "label": "Categories",
         "shop_by_price": "Shop By Price",
         "shop_by_price_range_aria": "Price range from {from} to {to}",
+        "add_cart_announcement": "The item has been added",
         "reset": "Reset",
         "view_all": {
             "name": "All {category}"

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

@@ -40,7 +40,7 @@
     <p class="alertBox-column alertBox-message"></p>
 </div>
 {{#or customer (if theme_settings.restrict_to_login '!==' true)}}
-    <div class="form-action">
+    <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>

templates/components/products/card.html

@@ -53,7 +53,8 @@
                             <a href="{{pre_order_add_to_cart_url}}" data-event-type="product-click" class="button button--small card-figcaption-button">{{lang 'products.pre_order'}}</a>
                         {{/if}}
                         {{#if add_to_cart_url }}
-                            <a href="{{add_to_cart_url}}" data-event-type="product-click" class="button button--small card-figcaption-button">{{lang 'products.add_to_cart'}}</a>
+                            <a href="{{add_to_cart_url}}" data-event-type="product-click" data-button-type="add-cart" class="button button--small card-figcaption-button">{{lang 'products.add_to_cart'}}</a>
+                            <span class="product-status-message aria-description--hidden">{{lang 'category.add_cart_announcement'}}</span>
                         {{/if}}
                         {{#if out_of_stock_message }}
                             <a href="{{url}}" data-event-type="product-click" class="button button--small card-figcaption-button" data-product-id="{{id}}">{{out_of_stock_message}}</a>