From 8fac778c54ad50d7690466a6e87fa127030806de Mon Sep 17 00:00:00 2001
From: Katie <katie.oh@safelite.com>
Date: Fri, 28 Oct 2022 09:19:37 -0400
Subject: [PATCH] CSR-909 Fix validation UI defect

---
 src/ux-components/list-button/list-button.vue |  1 -
 src/ux-components/list-card/list-card.vue     | 41 +++++++++++--------
 2 files changed, 23 insertions(+), 19 deletions(-)

diff --git a/src/ux-components/list-button/list-button.vue b/src/ux-components/list-button/list-button.vue
index 54ef98b35..64ae6d4af 100644
--- a/src/ux-components/list-button/list-button.vue
+++ b/src/ux-components/list-button/list-button.vue
@@ -34,7 +34,6 @@ export default {
     name: "listButton",
     mixins: [inputButtonWrapperMixin],
     props: {
-        selectingInitiatesLoad: Boolean,
         loaderColor: String,
         loaderPosition: {
             type: String,
diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue
index 7e27a6476..90e575ffd 100644
--- a/src/ux-components/list-card/list-card.vue
+++ b/src/ux-components/list-card/list-card.vue
@@ -14,15 +14,10 @@
                 :class="!isWide ? 'order-1' : 'ms-auto order-3'"
                 :src="buttonImage"
                 :alt="altText" />
-            <p
-                v-if="!isWide"
-                class="small order-3"
-                :class="isMultiSelect ? 'm-0' : 'mt-2 mb-0'">
+            <p v-if="!isWide" class="small order-3" :class="isMultiSelect ? 'm-0' : 'mt-2 mb-0'">
                 {{ buttonLabel }}
             </p>
-            <p
-                v-if="buttonLabelSubCopy && !isWide"
-                class="fs-7 m-0 order-4 sub-copy">
+            <p v-if="buttonLabelSubCopy && !isWide" class="fs-7 m-0 order-4 sub-copy">
                 {{ buttonLabelSubCopy }}
             </p>
             <div v-if="isWide" class="order-2">
@@ -62,12 +57,30 @@ export default {
 </script>
 
 <style lang="scss">
+@mixin list-card-focus($box-shadow-color) {
+    &:focus-visible + .list-card-content {
+        box-shadow: 0 0 0 2.5px $box-shadow-color;
+        border-radius: 0.5rem;
+    }
+    &:focus + .list-card-content {
+        box-shadow: 0 0 0 2.5px $box-shadow-color;
+        border-radius: 0.5rem;
+    }
+    &:checked:focus + .list-card-content {
+        box-shadow: 0 0 0 2.5px $box-shadow-color;
+    }
+}
 .list-card {
     border: 1px solid $gray-500;
 
     &.has-error {
         //Red border if invalid
         border: 1px solid $red;
+
+        input[type="checkbox"],
+        input[type="radio"] {
+            @include list-card-focus($red);
+        }
     }
 
     img {
@@ -113,17 +126,9 @@ export default {
             box-shadow: 0 0 0 1px $blue;
             border-radius: 0.5rem;
         }
-        &:focus-visible + .list-card-content {
-            box-shadow: 0 0 0 2.5px $blue;
-            border-radius: 0.5rem;
-        }
-        &:focus + .list-card-content {
-            box-shadow: 0 0 0 2.5px $blue;
-            border-radius: 0.5rem;
-        }
-        &:checked:focus + .list-card-content {
-            box-shadow: 0 0 0 2.5px $blue;
-        }
+
+        @include list-card-focus($blue);
+
         &:checked + .list-card-content {
             p {
                 color: $black;