jason/DigitalConsumer.FixMyGlass
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

checking in for accesibility testing on label hack

Browse source
This commit is contained in:
Leah Schumann 2022-03-07 14:29:58 -05:00
parent 1ce165c5a8
commit 18eccf277e
4 changed files with 25 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/common-components/dropdown-question/dropdown-question.vue
View file

@ -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">

13
src/common-components/textbox-question/textbox-question.vue
View file

@ -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,

22
src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue
View file

@ -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"

6
src/layouts/address-lookup/customer-questions/customer-questions.vue
View file

@ -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>