From a0262ed974b20901a2556bea49dcedfd9226d16d Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Tue, 28 Nov 2023 15:04:54 -0500
Subject: [PATCH] CSR-1819 add screenreader text to improve accessibility.

---
 src/fmg-components/cart/cart.vue | 39 +++++++++++++++++++++++++-------
 1 file changed, 31 insertions(+), 8 deletions(-)

diff --git a/src/fmg-components/cart/cart.vue b/src/fmg-components/cart/cart.vue
index c1a9608a8..242d37c11 100644
--- a/src/fmg-components/cart/cart.vue
+++ b/src/fmg-components/cart/cart.vue
@@ -5,7 +5,7 @@
                 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 +13,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 +28,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 +61,25 @@
                     <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 +192,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 [];