Merge pull request #370 from Safelite/bugfix/CSR-392

CSR-392: add aria-required fields where needed

src/common-components/button-question/button-question.vue

@@ -5,7 +5,7 @@
       <span class="fs-5 fw-bold w-100" :class="this.buttonType === 'radio' ? 'text-start' : 'text-center'">{{ questionText }}</span>
     </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' : ''">
+      <fieldset class="w-100" :aria-required=isRequired :class="getFieldSetClasses" :role="isMultiSelect ? 'group' : 'radiogroup'" :aria-labelledby="groupName ? groupName + '-radio-group' : ''">
         <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>

src/layouts/vehicle-damage/damage-location-question/damage-location-question.vue

@@ -6,6 +6,7 @@
             :answers="answersToDisplay"
             :groupName="groupName"
             buttonType="listCard"
+            isRequired
             v-model="selectedValues"
             validationRules="damage-location-required"
         />

src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue

@@ -11,6 +11,7 @@
                 v-model="selectedValues"
                 :validationRules="validationRules"
                 :suppressError="suppressError"
+                :isRequired=isRequired
             />
         </div>
     </transition>
@@ -36,6 +37,7 @@ export default ({
         validationRules: String,
         suppressError: Boolean,
         cmsWidgetName: String,
+        isRequired: Boolean,
     },
     methods: {
         initializeComponent(replaceOptions){

src/layouts/vehicle-damage/side-door-options/side-door-options.vue

@@ -10,6 +10,7 @@
                     buttonType="listCard"
                     v-model="selectedDoorSidesValues"
                     validationRules="damage-side-required"
+                    isRequired
                 />
             </div>
         </transition>
@@ -22,6 +23,7 @@
             filterByVehicleCategory
             v-model="selectedDriverSideReplaceOptionsValues"
             validationRules="driver-side-options-required"
+            isRequired
         />
         <replaceOptionsQuestion
             ref="passengerSideOptions"
@@ -32,6 +34,7 @@
             filterByVehicleCategory
             v-model="selectedPassengerSideReplaceOptionsValues"
             validationRules="passenger-side-options-required"
+            isRequired
         />
     </div>
 </template>

src/layouts/vehicle-damage/vehicle-damage.vue

@@ -44,6 +44,7 @@
             v-model="selectedRearReplaceOptions"
             groupName="BackGlassReplaceOptionsQuestion"
             validationRules="replace-options-required"
+            isRequired
           />
           <funnel-footer
             cmsWidgetName="FunnelFooterWidget"

src/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question.vue

@@ -9,6 +9,7 @@
                 useTextForValue
                 v-model="selectedChipCountValues"
                 :validationRules="validationRules"
+                isRequired
             />
         </div>
     </transition>

src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.vue

@@ -9,6 +9,7 @@
                 v-model="selectedValues"
                 :suppressError="suppressError"
                 :validationRules="validationRules"
+                isRequired
             />
         </div>
     </transition>

src/layouts/vehicle-damage/windshield-options/windshield-options.vue

@@ -27,6 +27,7 @@
             v-model="selectedWindshieldReplaceOptionsValues"
             validationRules="windshield-replace-options-required|prevent-split-and-single-together"
             :suppressError="hasSplitSingleConflict"
+            isRequired
         />
         <alert
             class="my-3"

src/layouts/vin-lookup/vin-lookup.vue

@@ -11,7 +11,7 @@
       <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
       <div class="row my-2">
         <div class="col">
-          <textboxQuestion cmsWidgetName="VinNumber" v-model="vin" inputId="vin" disableAutoFill validationRules="vin-required|vin-format" :isDisabled=isVinFieldReadOnly />
+          <textboxQuestion cmsWidgetName="VinNumber" v-model="vin" inputId="vin" isRequired disableAutoFill validationRules="vin-required|vin-format" :isDisabled=isVinFieldReadOnly />
         </div>
       </div>
       <div class="row my-2">
@@ -21,12 +21,12 @@
       </div>
       <div class="row my-2">
         <div class="col">
-          <textboxQuestion cmsWidgetName="ServiceZIP" v-model="zip" inputId="zip" mask="#####" disableAutoFill validationRules="zip-required" />
+          <textboxQuestion cmsWidgetName="ServiceZIP" v-model="zip" inputId="zip" mask="#####" isRequired disableAutoFill validationRules="zip-required" />
         </div>
       </div>
       <div class="row my-2">
         <div class="col">
-          <textboxQuestion cmsWidgetName="EmailAddress" v-model="email" inputId="email" disableAutoFill validationRules="email-address-required|email-address-format" />
+          <textboxQuestion cmsWidgetName="EmailAddress" v-model="email" inputId="email" isRequired disableAutoFill validationRules="email-address-required|email-address-format" />
         </div>
       </div>
       <alert