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

CSR-96: fixed aria labels

Browse source
This commit is contained in:
Adam Caouette 2022-03-08 09:24:45 -05:00
parent 18eccf277e
commit aec70a397f
3 changed files with 6 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,9 +1,8 @@
<template> <template>
<div class="dropdown-question"> <div class="dropdown-question">
<label :for="inputId" class="form-label">{{labelText}}</label> <label :for="inputId" :aria-label="ariaLabelText" class="form-label">{{labelText}}</label>
<select v-model="selectedOption" <select v-model="selectedOption"
class="form-select" class="form-select"
aria-label="Default select example"
:id="inputId" :id="inputId"
:name="inputId" :name="inputId"
:aria-disabled="isDisabled" :aria-disabled="isDisabled"
@ -33,7 +32,8 @@ export default {
required: true required: true
}, },
isDisabled: Boolean, isDisabled: Boolean,
isRequired: Boolean, isRequired: Boolean,
ariaLabelText: String,
}, },
data() { data() {

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

@ -1,6 +1,6 @@
<template> <template>
<div class="textbox-question" :class="hasError ? 'has-error' : ''"> <div class="textbox-question" :class="hasError ? 'has-error' : ''">
<label :for="inputId" class="form-label">{{labelText}}</label> <label :for="inputId" :aria-label="ariaLabelText" class="form-label">{{labelText}}</label>
<input v-model="value" v-maska="mask" <input v-model="value" v-maska="mask"
:type="type" :type="type"
class="form-control" class="form-control"
@ -10,8 +10,7 @@
:placeholder="placeholderText" :placeholder="placeholderText"
:aria-disabled="isDisabled" :aria-disabled="isDisabled"
:disabled="isDisabled" :disabled="isDisabled"
:aria-required="isRequired" :aria-required="isRequired"
:aria-label="ariaLabelText"
autocomplete="off" autocomplete="off"
:class="[hasIcon ? 'has-icon' : '', iconRight ? 'icon-right' : '']" /> :class="[hasIcon ? 'has-icon' : '', iconRight ? 'icon-right' : '']" />
<p class="mt-2 form-test-error" v-if="!suppressError"> <p class="mt-2 form-test-error" v-if="!suppressError">

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

@ -14,7 +14,7 @@
</div> </div>
<div class="row my-4"> <div class="row my-4">
<div class="col-6"> <div class="col-6">
<dropdownQuestion v-model="state" ref="state" inputId="8fdf9dc2e13e430eb57529499dceb3eb" :options="stateOptions" labelText="S&NoBreak;tate" /> <dropdownQuestion v-model="state" ref="state" inputId="8fdf9dc2e13e430eb57529499dceb3eb" :options="stateOptions" labelText="S&NoBreak;tate" ariaLabelText="State" />
</div> </div>
<div class="col-6"> <div class="col-6">
<textboxQuestion v-model="zip" ref="zip" inputId="01a9a1c2de0b4c9da8e023c9ae3be498" labelText="Z&NoBreak;IP code" ariaLabelText="ZIP code" mask="#####" /> <textboxQuestion v-model="zip" ref="zip" inputId="01a9a1c2de0b4c9da8e023c9ae3be498" labelText="Z&NoBreak;IP code" ariaLabelText="ZIP code" mask="#####" />