From 18eccf277eb3b321a7237f18dff7416f78eaf149 Mon Sep 17 00:00:00 2001
From: Leah Schumann <leah.schumann@safelite.com>
Date: Mon, 7 Mar 2022 14:29:58 -0500
Subject: [PATCH] checking in for accesibility testing on label hack

---
 .../dropdown-question/dropdown-question.vue   |  3 ++-
 .../textbox-question/textbox-question.vue     | 13 ++++++++---
 .../address-questions/address-questions.vue   | 22 +++++++++----------
 .../customer-questions/customer-questions.vue |  6 ++---
 4 files changed, 25 insertions(+), 19 deletions(-)

diff --git a/src/common-components/dropdown-question/dropdown-question.vue b/src/common-components/dropdown-question/dropdown-question.vue
index 5e6366a5b..3b8a53e45 100644
--- a/src/common-components/dropdown-question/dropdown-question.vue
+++ b/src/common-components/dropdown-question/dropdown-question.vue
@@ -4,7 +4,8 @@
     <select v-model="selectedOption"
             class="form-select" 
             aria-label="Default select example" 
-            :id="inputId" 
+            :id="inputId"
+            :name="inputId" 
             :aria-disabled="isDisabled" 
             :disabled="isDisabled" 
             :aria-required="isRequired">
diff --git a/src/common-components/textbox-question/textbox-question.vue b/src/common-components/textbox-question/textbox-question.vue
index 4fd56b1c7..42c865c06 100644
--- a/src/common-components/textbox-question/textbox-question.vue
+++ b/src/common-components/textbox-question/textbox-question.vue
@@ -2,15 +2,17 @@
   <div class="textbox-question" :class="hasError ? 'has-error' : ''">
     <label :for="inputId" class="form-label">{{labelText}}</label>
     <input v-model="value" v-maska="mask"
-      type="text" 
+      :type="type" 
       class="form-control" 
       :ref="inputId" 
       :id="inputId" 
+      :name="inputId"
       :placeholder="placeholderText" 
       :aria-disabled="isDisabled" 
       :disabled="isDisabled" 
-      :aria-required="isRequired"     
-      autocomplete="off" 
+      :aria-required="isRequired"
+      :aria-label="ariaLabelText"     
+      autocomplete="off"   
       :class="[hasIcon ? 'has-icon' : '', iconRight ? 'icon-right' : '']" />
     <p class="mt-2 form-test-error" v-if="!suppressError">
       There has been an error!
@@ -23,8 +25,13 @@
 export default {
   name: "textbox-question",
   props: {
+    type: {
+      type: String,
+      default: 'text',
+    },
     modelValue: String,
     labelText: String,
+    ariaLabelText: String,
     placeholderText: String,
     inputId: String,
     isDisabled: Boolean,
diff --git a/src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue b/src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue
index 1abd46980..c6ea0feca 100644
--- a/src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue
+++ b/src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue
@@ -1,30 +1,28 @@
 <template>
-    <form>
+    <form autocomplete="off">
         <div class="row my-4">
             <div class="col">
-                <textboxQuestion v-model="streetAddress" ref="autocomplete" inputId="autocomplete" placeholderText="Search" labelText="Street address" aria-haspopup="" hasIcon />
+                <textboxQuestion v-model="streetAddress" ref="autocomplete" inputId="autocomplete" placeholderText="Search" labelText="S&NoBreak;treet address" ariaLabelText="Street address" aria-haspopup="" hasIcon />
             </div>
         </div>
-    </form>
-    <transition name="fade" mode="out-in">
-        <div class="address-fields" v-if="showAddressFields" aria-live="polite">
-            <form>
+        <transition name="fade" mode="out-in">
+            <div class="address-fields" v-if="showAddressFields" aria-live="polite">
                 <div class="row my-4">
                     <div class="col">
-                        <textboxQuestion v-model="city" ref="city" inputId="city" labelText="City" />
+                        <textboxQuestion v-model="city" ref="city" inputId="cbf28188fdf2436688fd735915f7ee56" labelText="C&NoBreak;ity" ariaLabelText="City" />
                     </div>
                 </div>
                 <div class="row my-4">
                     <div class="col-6">
-                        <dropdownQuestion v-model="state" ref="state" inputId="state" :options="stateOptions" labelText="State"  />
+                        <dropdownQuestion v-model="state" ref="state" inputId="8fdf9dc2e13e430eb57529499dceb3eb" :options="stateOptions" labelText="S&NoBreak;tate"  />
                     </div>            
                     <div class="col-6">
-                        <textboxQuestion v-model="zip" ref="zip" inputId="zip" labelText="Zip" mask="#####" />
+                        <textboxQuestion v-model="zip" ref="zip" inputId="01a9a1c2de0b4c9da8e023c9ae3be498" labelText="Z&NoBreak;IP code" ariaLabelText="ZIP code" mask="#####" />
                     </div>      
                 </div> 
-            </form>
-        </div>
-    </transition> 
+            </div>
+        </transition> 
+    </form>
     <alert ref="alertVerificationWarning" v-show="displayVerificationWarning"
         alertClass="alert-warning"
         :alertHeadline="alertHeadlineVerificationWarning"
diff --git a/src/layouts/address-lookup/customer-questions/customer-questions.vue b/src/layouts/address-lookup/customer-questions/customer-questions.vue
index d0c767242..ec8fe9fee 100644
--- a/src/layouts/address-lookup/customer-questions/customer-questions.vue
+++ b/src/layouts/address-lookup/customer-questions/customer-questions.vue
@@ -2,17 +2,17 @@
     <addressQuestions ref="addressQuestions"/>
     <div class="row my-4">
       <div class="col">
-        <textboxQuestion v-model="firstName" ref="firstName" inputId="firstName" labelText="First name" />
+        <textboxQuestion v-model="firstName" ref="firstName" inputId="08497a2efd9a4a73a70360ab47b4838d" labelText="First name" />
       </div>
     </div> 
     <div class="row my-4">
       <div class="col">
-        <textboxQuestion v-model="lastName" ref="lastName" inputId="lastName" labelText="Last name" />
+        <textboxQuestion v-model="lastName" ref="lastName" inputId="0030e56a57e74a4ab92de7fb8e97fec5" labelText="Last name" />
       </div>
     </div>
     <div class="row my-4">
       <div class="col">
-        <textboxQuestion v-model="emailAddress" ref="emailAddress" inputId="emailAddress" labelText="Email address" />
+        <textboxQuestion v-model="emailAddress" ref="emailAddress" inputId="00450a91b8964a768ce3992e6feb890f" labelText="Email address" />
       </div>
     </div>  
 </template>