add aria live region to communicate cart changes

Author: Spencer Canner

src/components/cart.js

@@ -93,21 +93,8 @@ export default class Cart extends Component {
       const data = Object.assign({}, lineItem, this.options.viewData);
       const fullPrice = data.variant.priceV2.amount * data.quantity;
       const formattedPrice = formatMoney(fullPrice, this.moneyFormat);
-      const discountAllocations = data.discountAllocations;
-
-      const {discounts, totalDiscount} = discountAllocations.reduce((discountAcc, discount) => {
-        const targetSelection = discount.discountApplication.targetSelection;
-        if (LINE_ITEM_TARGET_SELECTIONS.indexOf(targetSelection) > -1) {
-          const discountAmount = discount.allocatedAmount.amount;
-          const discountDisplayText = discount.discountApplication.title || discount.discountApplication.code;
-          discountAcc.totalDiscount += discountAmount;
-          discountAcc.discounts.push({discount: `${discountDisplayText} (-${formatMoney(discountAmount, this.moneyFormat)})`});
-        }
-        return discountAcc;
-      }, {
-        discounts: [],
-        totalDiscount: 0,
-      });
+
+      const {discounts, totalDiscount} = this.discountsForLineItem(lineItem);
       data.discounts = discounts.length > 0 ? discounts : null;
       data.formattedFullPrice = totalDiscount > 0 ? formattedPrice : null;
       data.formattedActualPrice = formatMoney(fullPrice - totalDiscount, this.moneyFormat);
@@ -408,8 +395,15 @@ export default class Cart extends Component {
       this.toggles.forEach((toggle) => toggle.view.render());
       if (quantity > 0) {
         this.view.render();
+        const updatedLineItem = this.model.lineItems.find((item) => item.id === id);
+        this.updateSummaryText(`${this.options.text.itemTotalAccessibilityLabel} ${this.formattedLineItemTotal(updatedLineItem)}`);
       } else {
         this.view.animateRemoveNode(id);
+        if (this.model.lineItems.length > 0) {
+          this.updateSummaryText(this.options.text.itemRemovedAccessibilityLabel);
+        } else {
+          this.updateSummaryText(`${this.options.text.itemRemovedAccessibilityLabel} ${this.options.text.empty}`, true);
+        }
       }
       return checkout;
     });
@@ -437,6 +431,7 @@ export default class Cart extends Component {
         if (!openCart) {
           this.setFocus();
         }
+        this.updateSummaryText(this.options.text.itemAddedAccessibilityLabel);
         return checkout;
       });
     } else {
@@ -454,6 +449,7 @@ export default class Cart extends Component {
         if (!openCart) {
           this.setFocus();
         }
+        this.updateSummaryText(this.options.text.itemAddedAccessibilityLabel);
         return checkout;
       });
     }
@@ -495,4 +491,43 @@ export default class Cart extends Component {
       this.view.setFocus();
     }, 0);
   }
+
+  updateSummaryText(lineItemText, hideSubtotal) {
+    const summaryText = hideSubtotal ? lineItemText : `${lineItemText} ${this.options.text.subtotalAccessibilityLabel} ${this.formattedTotal}`;
+
+    const summaryNode = this.view.document.querySelector(this.selectors.cart.hiddenSummary);
+    summaryNode.textContent = summaryText;
+
+    setTimeout(() => {
+      summaryNode.textContent = '';
+    }, 1000);
+  }
+
+  formattedLineItemTotal(lineItem) {
+    const fullPrice = lineItem.variant.priceV2.amount * lineItem.quantity;
+    if (!this.options.contents.discounts) {
+      return formatMoney(fullPrice, this.moneyFormat);
+    }
+
+    const {totalDiscount} = this.discountsForLineItem(lineItem);
+    return formatMoney(fullPrice - totalDiscount, this.moneyFormat);
+  }
+
+  discountsForLineItem(lineItem) {
+    const discountAllocations = lineItem.discountAllocations;
+
+    return discountAllocations.reduce((discountAcc, discount) => {
+      const targetSelection = discount.discountApplication.targetSelection;
+      if (LINE_ITEM_TARGET_SELECTIONS.indexOf(targetSelection) > -1) {
+        const discountAmount = discount.allocatedAmount.amount;
+        const discountDisplayText = discount.discountApplication.title || discount.discountApplication.code;
+        discountAcc.totalDiscount += discountAmount;
+        discountAcc.discounts.push({discount: `${discountDisplayText} (-${formatMoney(discountAmount, this.moneyFormat)})`});
+      }
+      return discountAcc;
+    }, {
+      discounts: [],
+      totalDiscount: 0,
+    });
+  }
 }

src/defaults/components.js

@@ -230,6 +230,7 @@ const defaults = {
       note: 'shopify-buy__cart__note',
       noteDescription: 'shopify-buy__cart__note__description',
       noteTextArea: 'shopify-buy__cart__note__text-area',
+      hiddenSummary: 'shopify-buy__cart__summary visuallyhidden',
     },
     text: {
       title: 'Cart',
@@ -240,6 +241,10 @@ const defaults = {
       notice: 'Shipping and discount codes are added at checkout.',
       noteDescription: 'Special instructions for seller',
       closeAccessibilityLabel: 'Close cart',
+      subtotalAccessibilityLabel: 'Cart subtotal',
+      itemTotalAccessibilityLabel: 'Item total',
+      itemRemovedAccessibilityLabel: 'Item removed from cart.',
+      itemAddedAccessibilityLabel: 'Item added to cart.',
     },
   },
   lineItem: {

src/templates/cart.js

@@ -34,6 +34,7 @@ const cartTemplates = {
               {{/data.contents.note}}
               <p class="{{data.classes.cart.notice}}" data-element="cart.notice">{{data.text.notice}}</p>
               <button class="{{data.classes.cart.button}}" type="button" data-element="cart.button">{{data.text.button}}</button>
+              <span class="{{data.classes.cart.hiddenSummary}}" aria-live="polite" aria-atomic="true"></span>
             </div>
            {{/data.isEmpty}}`,
 };