From 9e9254b85d850f1fe309f9d3e7a06c5ed144be4f Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Tue, 21 Nov 2023 10:57:46 -0500
Subject: [PATCH] CSR-1731 make it so cart toggle can be tabbed to.

Prevent items in cart from being tabbed to when cart is collapsed.
---
 src/fmg-components/cart/cart.vue | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/fmg-components/cart/cart.vue b/src/fmg-components/cart/cart.vue
index aa1a47349..1d1bba2b4 100644
--- a/src/fmg-components/cart/cart.vue
+++ b/src/fmg-components/cart/cart.vue
@@ -5,10 +5,10 @@
                 class="row vin-toggle flex align-items-center pt-4"
                 :class="[isExpanded ? 'expanded' : '']"
                 @click="toggleIsExpanded()">
-                <div class="col d-flex justify-content-between">
-                    <span class="label">{{ amountDueText }}</span
-                    ><span class="label amount-due">{{ getFormattedAmount("", amountDue) }}</span>
-                </div>
+                <a href="#!" tabindex="0" class="col d-flex justify-content-between py-0">
+                    <span class="label">{{ amountDueText }}</span>
+                    <span class="label amount-due">{{ getFormattedAmount("", amountDue) }}</span>
+                </a>
             </div>
             <div class="price-table">
                 <div class="service-type">
@@ -746,6 +746,7 @@ export default {
         color: $gray;
     }
     .label {
+        color: $black;
         font-weight: 500;
     }
     .amount-due {
@@ -755,6 +756,7 @@ export default {
         max-height: 0;
         transition: all 350ms ease-in;
         overflow: hidden;
+        visibility: hidden;
 
         div {
             display: flex;
@@ -858,6 +860,10 @@ export default {
             transition: all 150ms ease-in;
             overflow: hidden;
             padding-top: 1rem;
+            visibility: visible;
+        }
+        a {
+            text-decoration: none;
         }
     }
 }