Merge pull request #335 from Safelite/bugfix/CSR-459

Bugfix/CSR-459

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 && answers.length > 1) ? 'Select one or more options below.' : 'Select an option below.' }}
+        </legend>
           <div :class="getComponentWrapperClasses">
             <component
               :is="buttonType"

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"

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 {

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;
     }

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 = {

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' : '',
+        (errors.length > 0 || hasError) ? 'has-error' : '',
-        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)"
       />