Merge pull request #1580 from Safelite/CSR-1819-add-screenreader-text-for-cart

CSR-1819 add screenreader text to cart to improve accessibility.

src/fmg-components/cart/cart.vue

@@ -5,7 +5,10 @@
                 class="row vin-toggle flex align-items-center pt-4"
                 :class="[isExpanded ? 'expanded' : '']"
                 @click="toggleIsExpanded()">
-                <a href="#!" class="col d-flex justify-content-between py-0">
+                <a
+                    aria-label="expand cart"
+                    href="#!"
+                    class="col d-flex justify-content-between py-0">
                     <span class="label">{{ amountDueText }}</span>
                     <span class="label amount-due">{{ getFormattedAmount("", amountDue) }}</span>
                 </a>
@@ -13,7 +16,8 @@
             <div class="price-table">
                 <div class="service-type">
                     <textBlock :cmsWidgetName="servicePackageTitleWidget" />
-                    <span>
+                    <span tabindex="0">
+                        <span class="sr-only">{{ screenReaderTotalAmountDueText }}</span>
                         {{ getFormattedAmount("", packagePrice) }}
                     </span>
                 </div>
@@ -27,7 +31,11 @@
                         linkType="text"
                         :text="removeLinkText"
                         href="#!"
-                        @click-event="removeItem(cartItem.cartItemType, cartItem.category)" />
+                        @click-event="removeItem(cartItem.cartItemType, cartItem.category)">
+                        <template v-slot:after-text>
+                            <span class="sr-only">{{ cartItem.name }}</span>
+                        </template>
+                    </textLink>
                 </div>
 
                 <!-- Nonpackaged Cart Items -->
@@ -56,25 +64,40 @@
                     <span v-else-if="cartItem == recycleFeeCartItem">
                         {{ recycleFeeCartItem.name }}
                     </span>
-                    <span>{{ getFormattedAmount(cartItem.category, cartItem.subTotal) }}</span>
+                    <span tabindex="0"
+                        ><span class="sr-only">{{ screenReaderRecycleFeeText }}</span
+                        >{{ getFormattedAmount(cartItem.category, cartItem.subTotal) }}</span
+                    >
                 </div>
 
                 <!-- Sub total, sales tax, total columns -->
                 <div class="sub-total">
                     <span>{{ subtotalText }}</span
-                    ><span>{{ getFormattedAmount("", subTotal) }}</span>
+                    ><span tabindex="0"
+                        ><span class="sr-only">{{ screenReaderSubTotalText }}</span
+                        >{{ getFormattedAmount("", subTotal) }}</span
+                    >
                 </div>
                 <div class="sales-tax">
                     <span>{{ salesTaxText }}</span
-                    ><span>{{ getFormattedAmount("", salesTax) }}</span>
+                    ><span tabindex="0"
+                        ><span class="sr-only">{{ screenReaderSalesTaxText }}</span
+                        >{{ getFormattedAmount("", salesTax) }}</span
+                    >
                 </div>
                 <div v-if="showAsPaid" class="amount-paid">
                     <span>{{ amountPaidText }}</span
-                    ><span>{{ getFormattedAmount("", amountPaid) }}</span>
+                    ><span tabindex="0"
+                        ><span class="sr-only">{{ screenReaderAmountPaidText }}</span
+                        >{{ getFormattedAmount("", amountPaid) }}</span
+                    >
                 </div>
                 <div class="amount-due">
                     <span>{{ amountDueText }}</span
-                    ><span>{{ getFormattedAmount("", amountDue) }}</span>
+                    ><span tabindex="0"
+                        ><span class="sr-only">{{ screenReaderTotalAmountDueText }}</span
+                        >{{ getFormattedAmount("", amountDue) }}</span
+                    >
                 </div>
             </div>
         </div>
@@ -187,6 +210,24 @@ export default {
         },
     },
     computed: {
+        screenReaderTotalAmountDueText() {
+            return this.getCmsContent("ScreenReaderTotalAmountDueWidget", "Text");
+        },
+        screenReaderRemoveVapsText() {
+            return this.getCmsContent("ScreenReaderRemoveVapsWidget", "Text");
+        },
+        screenReaderRecycleFeeText() {
+            return this.getCmsContent("ScreenReaderRecycleFeeWidget", "Text");
+        },
+        screenReaderSubTotalText() {
+            return this.getCmsContent("ScreenReaderSubTotalWidget", "Text");
+        },
+        screenReaderAmountPaidText() {
+            return this.getCmsContent("ScreenReaderAmountPaidWidget", "Text");
+        },
+        screenReaderSalesTaxText() {
+            return this.getCmsContent("ScreenReaderSalesTaxWidget", "Text");
+        },
         availableLineItems() {
             if (!this.lineItems || this.lineItems.length < 1) {
                 return [];