From ac93b8fc6006d1acb3405865a416afd43d87949a Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Mon, 11 Apr 2022 17:03:37 -0400
Subject: [PATCH 1/2] CSR-459: fixes to error focus direction and error styling

---
 .../button-question/button-question.vue                |  4 +++-
 .../textbox-question/textbox-question.vue              |  2 +-
 src/styles/common-error-styles.scss                    | 10 ----------
 .../list-button-horizontal/list-button-horizontal.vue  | 10 ++++++----
 src/ux-components/list-button/list-button.vue          |  5 ++---
 src/ux-components/list-card/list-card.vue              |  4 +---
 6 files changed, 13 insertions(+), 22 deletions(-)

diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue
index 79937c780..7b208a51e 100644
--- a/src/common-components/button-question/button-question.vue
+++ b/src/common-components/button-question/button-question.vue
@@ -6,7 +6,9 @@
     </div>
     <div class="w-100 d-flex justify-content-center">
       <fieldset class="w-100" :class="getFieldSetClasses" :role="isMultiSelect ? 'group' : 'radiogroup'" :aria-labelledby="groupName ? groupName + '-radio-group' : ''">
-        <legend class="sr-only">{{groupName}}</legend>
+        <legend class="sr-only" :data-focus-target="groupName" tabindex="-1">
+          {{(isMultiSelect && answers.length > 1) ? 'Select one or more options below.' : 'Select an option below.' }}
+        </legend>
           <div :class="getComponentWrapperClasses">
             <component
               :is="buttonType"
diff --git a/src/common-components/textbox-question/textbox-question.vue b/src/common-components/textbox-question/textbox-question.vue
index d85b92b6b..47a7a1a32 100644
--- a/src/common-components/textbox-question/textbox-question.vue
+++ b/src/common-components/textbox-question/textbox-question.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="textbox-question" :class="hasError ? 'has-error' : ''">
+	<div class="textbox-question" :class="(errors.length > 0 || hasError) ? 'has-error' : ''">
 		<label :for="inputId" :aria-label="questionText" class="form-label" v-html="labelText"></label>
 		<input v-model="value" 
 			v-maska="mask"
diff --git a/src/styles/common-error-styles.scss b/src/styles/common-error-styles.scss
index fe1637e43..530f9c392 100644
--- a/src/styles/common-error-styles.scss
+++ b/src/styles/common-error-styles.scss
@@ -7,21 +7,11 @@
     input[type=radio]:focus + label {
       box-shadow: 0 0 0 2.5px $red;
     }
-    input[type=checkbox]:focus + label:hover,
-    input[type=radio]:focus + label {
-      box-shadow: 0 0 0 1px $red;
-    }
     &:hover {
       box-shadow: 0px 0px 0px 4px $red-200;
       border-radius: 10px !important;
-      border: 1px solid $red;
     }
   }
-
-  input[type=checkbox]:checked + label,
-  input[type=radio]:checked + label {
-    box-shadow: 0 0 0 2.5px transparent !important;
-  }
   &.list-button-horizontal {
     color: $red;
     label {
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 cef3d765c..bd1977ba3 100644
--- a/src/ux-components/list-button-horizontal/list-button-horizontal.vue
+++ b/src/ux-components/list-button-horizontal/list-button-horizontal.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     class="list-group list-button-horizontal d-flex flex-column w-100 mb-2"
-    :class="[errors.length > 0 ? 'has-error' : '', hasError ? 'has-error' : '']"
+    :class="[(errors.length > 0 || hasError) ? 'has-error' : '']"
     @mouseup="handleClick(value)"
     @keyup.space="handleClick(value)"
   >
@@ -11,7 +11,6 @@
       :name="groupName"
       :value="value"
       :aria-required="isRequired"
-      :data-focus-target="groupName"
       v-model="checkValue"
       @change="!selectingInitiatesLoad ? handleCheckChange() : ''"
     />
@@ -143,11 +142,11 @@ export default {
     height: 0;
     position: absolute;
     &:focus-visible + label {
-      box-shadow: 0 0 0 2px $blue;
+      box-shadow: 0 0 0 2.5px $blue;
       z-index: 2;
     }
     &:focus + label {
-      box-shadow: 0 0 0 2px $blue;
+      box-shadow: 0 0 0 2.5px $blue;
       z-index: 3;
     }
     &:checked + label {
@@ -156,6 +155,9 @@ export default {
       outline: none;
       z-index: 2;
     }
+    &:checked:focus + label {
+      box-shadow: 0 0 0 2.5px $blue;
+    }
     &:checked + label p:first-child {
       font-weight: 500;
     }
diff --git a/src/ux-components/list-button/list-button.vue b/src/ux-components/list-button/list-button.vue
index 775b19ff4..d48b2407d 100644
--- a/src/ux-components/list-button/list-button.vue
+++ b/src/ux-components/list-button/list-button.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     class="list-group list-button d-flex flex-column w-100 mb-2"
-    :class="[errors.length > 0 ? 'has-error' : '', hasError ? 'has-error' : '']"
+    :class="[(errors.length > 0 || hasError) ? 'has-error' : '']"
     @mouseup="handleClick(value)"
     @keyup.space="handleClick(value)"
   >
@@ -11,7 +11,6 @@
       :name="groupName"
       :value="value"
       :aria-required="isRequired"
-      :data-focus-target="groupName"
       v-model="checkValue"
       @change="!selectingInitiatesLoad ? handleCheckChange() : ''"
     >
@@ -97,7 +96,7 @@ export default {
       }
       this.handleChange(value);
     },
-    handleCheckChange(newValue, oldValue){
+    handleCheckChange(value, oldValue){
       const isInitialization = typeof(oldValue) === 'function';
       if (!isInitialization) {
         const emitEvent = {
diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue
index eb0570c58..a92b50468 100644
--- a/src/ux-components/list-card/list-card.vue
+++ b/src/ux-components/list-card/list-card.vue
@@ -4,8 +4,7 @@
       class="list-card w-100 rounded-3 d-flex align-items-center h-100"
       :class="[
         isWide ? 'horizontal' : '',
-        errors.length > 0 ? 'has-error' : '',
-        hasError ? 'has-error' : '',
+        (errors.length > 0 || hasError) ? 'has-error' : '',
       ]"
       @mouseup="handleChange(value)"
       @keyup.space="handleChange(value)"
@@ -16,7 +15,6 @@
         :name="groupName"
         :value="value"
         :aria-required="isRequired"
-        :data-focus-target="groupName"
         v-model="checkValue"
         @change="handleCheckChange(value)"
       />

From 754cdddfb2491bbbef00cc0f0ae41f864838b8fc Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Mon, 11 Apr 2022 17:07:41 -0400
Subject: [PATCH 2/2] CSR-459: fix unit test

---
 src/common-components/button-question/button-question.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue
index 7b208a51e..91c83fc2a 100644
--- a/src/common-components/button-question/button-question.vue
+++ b/src/common-components/button-question/button-question.vue
@@ -7,7 +7,7 @@
     <div class="w-100 d-flex justify-content-center">
       <fieldset class="w-100" :class="getFieldSetClasses" :role="isMultiSelect ? 'group' : 'radiogroup'" :aria-labelledby="groupName ? groupName + '-radio-group' : ''">
         <legend class="sr-only" :data-focus-target="groupName" tabindex="-1">
-          {{(isMultiSelect && answers.length > 1) ? 'Select one or more options below.' : 'Select an option below.' }}
+          {{(isMultiSelect && answers && answers.length > 1) ? 'Select one or more options below.' : 'Select an option below.' }}
         </legend>
           <div :class="getComponentWrapperClasses">
             <component