From 5a8f2f4526904f6989507b97a8e79d51b69ca261 Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Fri, 14 Jan 2022 10:11:19 -0500
Subject: [PATCH] CSR-254: additional tweaks

---
 src/layouts/form-test/form-test.vue             | 17 +++++++----------
 .../list-button-horizontal.vue                  |  5 +----
 src/ux-components/list-card/list-card.vue       |  8 ++++----
 3 files changed, 12 insertions(+), 18 deletions(-)

diff --git a/src/layouts/form-test/form-test.vue b/src/layouts/form-test/form-test.vue
index e263d91b2..98a65ee7e 100644
--- a/src/layouts/form-test/form-test.vue
+++ b/src/layouts/form-test/form-test.vue
@@ -21,12 +21,11 @@
       </h4>
       <listButtonHorizontal
         groupName="demo"
+        aria-required="true"
         buttonID="1"
         value="1"
         buttonLabelSubCopy=""
         textPosition="text-center"
-        loaderColor="blue"
-        loaderPosition="right"
         sizeInRem="1"
         :totalInGroup="3"
         :positionInGroup="1"
@@ -34,12 +33,11 @@
       />
       <listButtonHorizontal
         groupName="demo"
+        aria-required="true"
         buttonID="2"
         value="2"
         buttonLabelSubCopy=""
         textPosition="text-center"
-        loaderColor="blue"
-        loaderPosition="right"
         sizeInRem="1"
         :totalInGroup="3"
         :positionInGroup="2"
@@ -47,12 +45,11 @@
       />
       <listButtonHorizontal
         groupName="demo"
+        aria-required="true"
         buttonID="3"
         value="3"
         buttonLabelSubCopy=""
         textPosition="text-center"
-        loaderColor="blue"
-        loaderPosition="right"
         sizeInRem="1"
         :totalInGroup="3"
         :positionInGroup="3"
@@ -131,10 +128,10 @@
     <h4 class="mx-2 mt-4 mb-0">demo5: Where's your damage? (Required)</h4>
     <div
       role="radiogroup"
-      aria-labelledby="demo-group"
+      aria-labelledby="demo5-group"
       class="d-flex flex-row p-0"
     >
-      <h4 class="sr-only" id="demo-group">
+      <h4 class="sr-only" id="demo5-group">
         Where's your damage?
       </h4>
       <listCard
@@ -175,10 +172,10 @@
     <h4 class="mx-2 mt-4 mb-0">demo6: What's your windshield damage? (Required if demo5 "Windshield" is selected)</h4>
     <div
       role="radiogroup"
-      aria-labelledby="demo-group"
+      aria-labelledby="demo6-group"
       class="d-flex flex-row p-0"
     >
-      <h4 class="sr-only" id="demo-group">
+      <h4 class="sr-only" id="demo6-group">
         What's your windshield damage?
       </h4>
       <listCard
diff --git a/src/ux-components/list-button-horizontal/list-button-horizontal.vue b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
index 8baa430c8..a2469905f 100644
--- a/src/ux-components/list-button-horizontal/list-button-horizontal.vue
+++ b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
@@ -15,7 +15,6 @@
     />
     <label
       tabindex="-1"
-      aria-checked="false"
       :for="buttonID"
       :aria-labelledby="buttonID"
       class="d-flex flex-column justify-content-center py-3 px-4"
@@ -36,13 +35,12 @@
       :id="buttonID"
       :name="groupName"
       :value="buttonID"
-      aria-required="true"
+      :aria-required="isRequired"
       @click="handleClick(value)"
       :data-focus-target="groupName"
     />
     <label
       tabindex="-1"
-      aria-checked="false"
       :for="buttonID"
       :aria-labelledby="buttonID"
       class="d-flex flex-column justify-content-center py-3 px-4"
@@ -84,7 +82,6 @@ export default {
   },
   data() {
     return {
-      hasError: false,
       isLoaderDisplayed: false,
     };
   },
diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue
index f623a1dbc..3efe5d1ff 100644
--- a/src/ux-components/list-card/list-card.vue
+++ b/src/ux-components/list-card/list-card.vue
@@ -13,7 +13,7 @@
     <label
       :for="buttonID"
       class="d-flex flex-column w-100 align-items-center pt-4 pb-2"
-      tabindex="1"
+      tabindex="-1"
     >
       <img class="order-1" v-bind:src="require(`@/assets/img/icons/${buttonImage}`)" v-bind:alt="altText" />
       <p class="small m-0 order-3">{{buttonLabel}}</p>
@@ -33,7 +33,7 @@
     <label
       :for="buttonID"
       class="d-flex flex-column w-100 align-items-center pt-4 pb-2"
-      tabindex="1"
+      tabindex="-1"
     >
       <img class="order-1" v-bind:src="require(`@/assets/img/icons/${buttonImage}`)" v-bind:alt="altText" />
       <p class="small mt-2 mb-0 order-2">{{buttonLabel}}</p>
@@ -53,7 +53,7 @@
     <label
       :for="buttonID"
       class="d-flex flex-row w-100 align-items-center py-3 ps-3 pe-8"
-      tabindex="1"
+      tabindex="-1"
       :class="{'checkboxTop': buttonLabelSubCopy}"
     >
       <img class="ms-auto order-3" v-bind:src="require(`@/assets/img/icons/${buttonImage}`)" v-bind:alt="altText" />
@@ -76,7 +76,7 @@
     <label
       :for="buttonID"
       class="d-flex flex-row w-100 align-items-center py-3 ps-3 pe-8"
-      tabindex="1"
+      tabindex="-1"
       :class="{'checkboxTop': buttonLabelSubCopy}"
     >
       <img class="ms-auto order-3" v-bind:src="require(`@/assets/img/icons/${buttonImage}`)" v-bind:alt="altText" />