Add aria live region to communicate cart changes

[spencercanner]

Why
Screen readers users should be able to interpret how the cart changes as they add/remove items, and update quantities. An aria-live region should be added so the dynamic aspects of the cart can be communicated to screen readers when the user interacts with the line items.

How

• Since multiple aria-live regions can slow down screen readers, a single region was introduced at the bottom of the cart footer to contain information about the line item and cart updates
• The region is visually hidden
• The aria-live region text content will be dynamically updated based on the user's interaction and state of the cart. After a timeout, the text content will be removed so this information is not announced when the virtual cursor gets to the element.
  • aria-hidden could also be added to the live region after the timeout but certain screen readers weren't announcing changes to the elements contents when it was transitioning from aria-hidden="true" to aria-hidden="false"
• The following information will be communicated:
  • When the add to cart button is clicked, the aria-live region will communicate that the item has been added, and the new cart subtotal
  • When the line item quantity is changed, the aria-live region will communicate the new line item subtotal, and the new cart subtotal.
    • If the cart is configured to show discounts (default), then the discounted line item price, and discounted cart subtotal will be announced. otherwise, the full line item and cart prices will be announced. The quantity inputs were moved before the price in the DOM in Move line item quantity before price in the dom #740, so the user should be able to get more detailed info about line item discounts after making changes to the quantity.
  • When the line item is removed (quantity set to 0), the aria-live region will communicate that the item has been removed and the new cart subtotal
  • When the last line item is removed, the aria-live region will communicate that the item has been removed and the cart is empty.
• Some discount-related code was abstracted so the line item discounts could be calculated for the line items HTML and the cart summary text

Note: there is a known issue in VoiceOver which will cause aria-live regions in an iFrame to be announced twice.

To 🎩

Setup

• Create an automatic discount that applies to a specific product
• Create a buy button for that product and another non-discounted product, with a button destination of cart, using the default cart contents options (cart with discounts)
• Empty cart if there are currently items in it

Item added scenario

• Navigate a virtual cursor to the discounted item's add to cart button
• Verify that the screen reader announces that the item has been added to the cart, and the cart's subtotal

Item updates

• Update the line item quantity using the inputs, and increment/decrement button
• Verify that the screen reader announced the new line item price (price after discounts) and cart subtotal

Item removal

• Add the non-discounted item and discounted item to cart
• Use the quantity input to one product's the quantity to 0
• Verify that the screen reader announces that the item has been removed from the cart, and the cart's subtotal
• Use the quantity decrement button to decrease the other product's quantity to 0
• Verify that the screen reader announces that the item has been removed from the cart, and the cart is empty

Edge case - cart without discounts

• Update buy button config, setting options > cart > contents > discounts to false
• Add the discounted item to cart
• Increase the quantity using the quantity input or increment button
• Verify that the screen reader announced the new line item price (price before discounts)

• VoiceOver Safari
• NVDA Firefox
• Sanity checkout line item automatic discounts in chrome
  • Percentage, fixed amount, and buy X get Y applied to specific products and collections