Skip to content

Commit 722ef39

Browse files
SwapnamolSwapnamol
committed
TD-4081:DIG306: Labels for form fields are missing
1 parent 5672130 commit 722ef39

File tree

14 files changed

+64
-56
lines changed

14 files changed

+64
-56
lines changed

‎LearningHub.Nhs.WebUI/Scripts/vuesrc/bookmark/togglebookmark.vue‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,8 @@
2424
<div class="modal-body-container p-3 mt-2 mb-2">
2525
<form>
2626
<div class="d-flex">
27-
<input class="form-control input titleInput" type="text" v-model="title" v-bind:maxlength="maxAllowedTitleLength" />
27+
<label class="nhsuk-u-visually-hidden" for="titleInput"></label>
28+
<input class="form-control input titleInput" id="titleInput" type="text" v-model="title" v-bind:maxlength="maxAllowedTitleLength" />
2829
</div>
2930
</form>
3031
</div>

‎LearningHub.Nhs.WebUI/Scripts/vuesrc/catalogue/catalogueaccessrequest.vue‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,8 @@
9898
</div>
9999
<div class="row mt-5">
100100
<div class="col">
101-
<textarea v-model="rejectionMessage" class="form-control rejection-message-input" rows="6"></textarea>
101+
<label class="nhsuk-u-visually-hidden" for="rejectionMessage"></label>
102+
<textarea v-model="rejectionMessage" id="rejectionMessage" class="form-control rejection-message-input" rows="6"></textarea>
102103
</div>
103104
</div>
104105
</div>

‎LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/ContributeAssessmentSettings.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -41,8 +41,8 @@
4141

4242
<div class="d-flex">
4343
<div class="selection pr-50">
44-
<div class="mb-4">Add a pass mark for this assessment. This is the percentage that the learner must achieve in order to pass.</div>
45-
<input class="text-input" type="text" v-model="assessmentDetails.passMark"/>
44+
<div class="mb-4"><label for="passmark">Add a pass mark for this assessment. This is the percentage that the learner must achieve in order to pass.</label></div>
45+
<input class="text-input" id="passmark" name="passmark" type="text" v-model="assessmentDetails.passMark"/>
4646
</div>
4747
<div class="tip" v-if="assessmentDetails.assessmentType === AssessmentTypeEnum.Informal">
4848
<h3>Tip</h3>

‎LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/ContributeTitle.vue‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@
55
<div class="d-flex flex-wrap justify-content-between align-items-center mx-n12 my-n2">
66
<h1 class="nhsuk-heading-xl">
77
<span v-if="!editing" class="contribute-title-component-title">{{ title || 'Untitled' }}</span>
8-
<input type="text" v-if="editing" v-model="title" placeholder="Untitled" ref="contributeTitleInput" />
8+
<label class="nhsuk-u-visually-hidden" for="contributeTitleInput"></label>
9+
<input type="text" id="contributeTitleInput" name="contributeTitleInput" v-if="editing" v-model="title" placeholder="Untitled" ref="contributeTitleInput" />
910
</h1>
1011
<LinkTextAndIcon v-if="!editing"
1112
v-on:click="editing = true"

‎LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/SelectResourceTitle.vue‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,10 @@
44
<div class="lh-container-xl">
55
<CharacterCount v-model="resourceDetails.title"
66
v-bind:characterLimit="255"
7-
v-bind:hasOtherError="isTitleRequiredAndMissing">
7+
v-bind:hasOtherError="isTitleRequiredAndMissing"
8+
v-bind:inputId ="resourceTitle">
89
<template v-slot:title class="nhsuk-heading-l">Add a title</template>
9-
<template v-slot:description>Give your resource a concise, useful title that will make sense to learners.</template>
10+
<template v-slot:description><label :for="resourceTitle">Give your resource a concise, useful title that will make sense to learners.</label></template>
1011
<template v-slot:otherErrorMessage v-if="isTitleRequiredAndMissing">You must enter a title</template>
1112
</CharacterCount>
1213
</div>
@@ -22,15 +23,16 @@
2223
export default Vue.extend({
2324
props: {
2425
resourceDetails: { type: Object } as PropOptions<ContributeResourceDetailModel>,
25-
isTypeSelected: Boolean
26+
isTypeSelected: Boolean,
27+
resourceTitle: { type: String, default: 'resourceTitle' }
2628
},
2729
components: {
2830
CharacterCount
2931
},
3032
computed: {
3133
isTitleRequiredAndMissing(): boolean {
3234
return this.isTypeSelected && this.resourceDetails.title.trim().length === 0;
33-
},
35+
},
3436
}
3537
});
3638
</script>

‎LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/components/questions/MatchGameAnswerOption.vue‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,9 @@
1515
</div>
1616
</div>
1717
<div v-if="blockType === BlockTypeEnum.Text">
18-
<input type="text" class="form-control text-input" maxlength="40" v-model="answerOption"/>
19-
<div class="footer-text">
18+
<label for="answerOption" class="nhsuk-u-visually-hidden"></label>
19+
<input type="text" form="answerOption" id="answerOption" name="answerOption" aria-describedby="answerOptionError" class="form-control text-input" maxlength="40" v-model="answerOption"/>
20+
<div class="footer-text" id="answerOptionError">
2021
You have {{ charactersRemaining }} characters remaining.
2122
</div>
2223
</div>

‎LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/components/questions/SingleChoiceAnswer.vue‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -27,10 +27,11 @@
2727
<hr class="cutoff-line">
2828
</div>
2929
<div>
30-
<input type="text" class="form-control text-input" maxlength="120" v-model="message"/>
31-
<div class="footer-text">
32-
You have {{ charactersRemaining }} characters remaining.
33-
</div>
30+
<label class="nhsuk-u-visually-hidden" for="message"></label>
31+
<input type="text" id="message" name="message" aria-describedby="messageError" class="form-control text-input" maxlength="120" v-model="message" />
32+
<div class="footer-text" id="messageError">
33+
You have {{ charactersRemaining }} characters remaining.
34+
</div>
3435
</div>
3536
</div>
3637
</template>

‎LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute/Content.vue‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,8 @@
2020
<div class="row">
2121
<div class="form-group col-12 mt-5">
2222
<h2 id="title-label" class="nhsuk-heading-l">Title<i v-if="$v.resourceDetailTitle.$invalid" class="warningTriangle fa-solid fa-triangle-exclamation"></i></h2>
23-
<div class="mb-3">Give your resource a concise, useful title that will make sense to learners.</div>
24-
<input type="text" class="form-control" aria-labelledby="title-label" maxlength="255" id="resourceDetail_title" v-model="resourceDetailTitle" @change="setTitle($event.target.value)" autocomplete="off" v-bind:disabled="resourceLoading">
23+
<div class="mb-3"><label for="resourceDetail_title">Give your resource a concise, useful title that will make sense to learners.</label></div>
24+
<input type="text" class="form-control" aria-labelledby="title-label" maxlength="255" id="resourceDetail_title" name="resourceDetail_title" v-model="resourceDetailTitle" @change="setTitle($event.target.value)" autocomplete="off" v-bind:disabled="resourceLoading">
2525
</div>
2626
</div>
2727
<div class="row mt-4">
@@ -357,9 +357,9 @@
357357
</p>
358358
</div>
359359
<div>
360-
<div class="modal-section-header">Notes</div>
360+
<div class="modal-section-header"><label for="notes">Notes</label></div>
361361
<p class="mt-1">Provide information to help learners understand why this new version has been created.</p>
362-
<textarea class="form-control" v-bind:class="{ 'input-validation-error': $v.publishNotes.$invalid && $v.publishNotes.$dirty }" rows="4" maxlength="4000" v-model="publishNotes"></textarea>
362+
<textarea class="form-control"id="notes" v-bind:class="{ 'input-validation-error': $v.publishNotes.$invalid && $v.publishNotes.$dirty }" rows="4" maxlength="4000" v-model="publishNotes"></textarea>
363363
<div class="error-text pt-3" v-if="$v.publishNotes.$invalid && $v.publishNotes.$dirty">
364364
<span class="text-danger">Enter notes.</span>
365365
</div>

‎LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute/ContentAudio.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@
3434

3535
<div class="row mt-5">
3636
<div class="form-group col-12">
37-
<h3 id="additionalinfo-label">Additional information <span class="optional">(optional)</span></h3>
37+
<h3 id="additionalinfo-label"><label for="additionalinfo">Additional information <span class="optional">(optional)</span></label></h3>
3838
</div>
3939
</div>
4040
<div class="row">
@@ -43,7 +43,7 @@
4343
for example, how it was developed or what is required for it to be used.
4444
</div>
4545
<div class="col-12 mt-3">
46-
<textarea class="form-control" aria-labelledby="additionalinfo-label" rows="4" maxlength="250" v-model="additionalInformation" @change="setAdditionalInformation($event.target.value)"></textarea>
46+
<textarea class="form-control" id="additionalinfo" aria-labelledby="additionalinfo-label" rows="4" maxlength="250" v-model="additionalInformation" @change="setAdditionalInformation($event.target.value)"></textarea>
4747
</div>
4848
<div class="col-12 footer-text">
4949
You can enter a maximum of 250 characters

‎LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute/ContentCommon.vue‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@
7878

7979
<div class="row mt-5">
8080
<div class="form-group col-12">
81-
<h2 id="keyword-label" class="nhsuk-heading-l">Keywords <i v-if="keywords.length==0" class="warningTriangle fa-solid fa-triangle-exclamation"></i></h2>
81+
<h2 id="keyword-label" class="nhsuk-heading-l"><label for="newKeyword">Keywords</label> <i v-if="keywords.length==0" class="warningTriangle fa-solid fa-triangle-exclamation"></i></h2>
8282
</div>
8383
</div>
8484
<div class="row">
@@ -92,11 +92,11 @@
9292
</span>
9393
</div>
9494

95-
<div class="col-12">
95+
<div class="col-12" id="keyworddesc">
9696
To help learners find this resource, type one or more relevant keywords separated by commas and click 'Add'.
9797
</div>
9898
<div class="col-12 mt-4 input-with-button">
99-
<input id="newKeyword" aria-labelledby="keyword-label" type="text" class="form-control" maxlength="260" v-model="newKeyword" v-bind:class="{ 'input-validation-error': keywordError }" @input="keywordError=false" @change="keywordChange" />
99+
<input id="newKeyword" aria-labelledby="keyword-label" aria-describedby="keyworddesc" type="text" class="form-control" maxlength="260" v-model="newKeyword" v-bind:class="{ 'input-validation-error': keywordError }" @input="keywordError=false" @change="keywordChange" />
100100
<button type="button" class="nhsuk-button nhsuk-button--secondary ml-3 nhsuk-u-margin-bottom-0" @click="addKeyword">&nbsp;Add</button>
101101
</div>
102102
<div class="col-12 footer-text">
@@ -165,34 +165,34 @@
165165
<div class="resource-area-body" v-if="authors.length < maxAllowedAuthors">
166166
<div class="form-group" v-bind:class="{ 'input-validation-error': authorError }">
167167
<div class="col-12 mb-0 error-text" v-if="authorError">
168-
<span class="text-danger">Enter the author name or organisation.</span>
168+
<span class="text-danger" data-valmsg-for="authorName">Enter the author name or organisation.</span>
169169
</div>
170170
<div class="col-12">
171171
<label class="mb-0" for="authorName">Author name</label>
172172
</div>
173173
<div class="col-12">
174-
<input type="text" id="authorName" class="form-control" v-bind:class="{ 'input-validation-error': authorError }" maxlength="100" v-model="authorName" v-bind:disabled="currentUserAuthor" @input="authorError=false" />
174+
<input type="text" id="authorName" name="authorName" class="form-control" aria-describedby="authorNamehint" v-bind:class="{ 'input-validation-error': authorError }" maxlength="100" v-model="authorName" v-bind:disabled="currentUserAuthor" @input="authorError=false" />
175175
</div>
176-
<div class="col-12 footer-text">
176+
<div class="col-12 footer-text" id="authorNamehint">
177177
You can enter a maximum of 100 characters
178178
</div>
179179
<div class="col-12">
180180
<label class="mb-0" for="authorOganisation">Organisation</label>
181181
</div>
182182
<div class="col-12">
183-
<input type="text" id="authorOganisation" class="form-control" v-bind:class="{ 'input-validation-error': authorError }" maxlength="100" v-model="authorOganisation" @input="authorError=false" />
183+
<input type="text" id="authorOganisation" name="authorOganisation" aria-describedby="authorOganisationhint" class="form-control" v-bind:class="{ 'input-validation-error': authorError }" maxlength="100" v-model="authorOganisation" @input="authorError=false" />
184184
</div>
185-
<div class="col-12 footer-text">
185+
<div class="col-12 footer-text" id="authorOganisationhint">
186186
You can enter a maximum of 100 characters
187187
</div>
188188
</div>
189189
<div class="col-12">
190190
<label class="mb-0" for="authorRole">Role <span class="optional">(optional)</span></label>
191191
</div>
192192
<div class="col-12">
193-
<input type="text" id="authorRole" class="form-control" maxlength="100" v-model="authorRole" />
193+
<input type="text" id="authorRole" name="authorRole" class="form-control" maxlength="100" v-model="authorRole" aria-describedby="authorRolehint" />
194194
</div>
195-
<div class="col-12 footer-text">
195+
<div class="col-12 footer-text" id="authorRolehint">
196196
You can enter a maximum of 100 characters
197197
</div>
198198
<div class="col-12 mt-4 input-with-button">

0 commit comments

Comments
 (0)