From f89d56803c18106ce37411049ad226175dc6d9d9 Mon Sep 17 00:00:00 2001
From: Swapnamol Abraham <Swapnamol.Abraham@hee.nhs.uk>
Date: Fri, 1 Nov 2024 15:17:13 +0000
Subject: [PATCH] TD-4080: DIG302: Placeholder text cannot be used to label
 forms

---
 .../Scripts/vuesrc/catalogue/managecatalogue.vue   |  1 +
 .../vuesrc/contribute-resource/Contribute.vue      |  5 ++++-
 .../ContributeAssessmentSettings.vue               | 10 ++++++----
 .../contribute-resource/ContributeAuthorsTab.vue   | 10 +++++++---
 .../vuesrc/contribute-resource/ContributeBlock.vue |  6 ++++--
 .../ContributeImageCarouselBlock.vue               |  6 ++++--
 .../ContributeImageCarouselBlockItem.vue           |  4 +++-
 .../ContributeWholeSlideImage.vue                  | 12 ++++++++----
 .../content-tab/MediaBlockCarouselImage.vue        |  6 ++++--
 .../components/content-tab/MediaBlockImage.vue     |  7 +++++--
 .../components/questions/MultipleChoiceAnswer.vue  | 14 ++++++++------
 .../CharacterCountWithSaveCancelButtons.vue        |  3 ++-
 .../EditSaveFieldWithCharacterCount.vue            |  2 ++
 .../resource/blocks/AnnotationFullPageEdit.vue     |  5 ++++-
 14 files changed, 62 insertions(+), 29 deletions(-)

diff --git a/LearningHub.Nhs.WebUI/Scripts/vuesrc/catalogue/managecatalogue.vue b/LearningHub.Nhs.WebUI/Scripts/vuesrc/catalogue/managecatalogue.vue
index e72eb5b05..d76b0bef1 100644
--- a/LearningHub.Nhs.WebUI/Scripts/vuesrc/catalogue/managecatalogue.vue
+++ b/LearningHub.Nhs.WebUI/Scripts/vuesrc/catalogue/managecatalogue.vue
@@ -76,6 +76,7 @@
                             <div class="row">
                                 <div class="col" style="min-width:400px; width:400px;">
                                     <div class="input-group pt-4" id="input-group-searchbar-md">
+                                        <label class="nhsuk-label nhsuk-u-visually-hidden" for="input-search-md">Find a user by their email address</label>
                                         <input class="form-control small pl-4" v-model="emailAddressFilter" type="search" placeholder="Find a user by their email address" aria-label="Search your learning activity" id="input-search-md" @change="loadUsers();" v-on:keyup="searchUsersKeyUp($event.keyCode)">
                                         <span class="input-group-append">
                                             <button class="btn btn-outline-secondary btn-search" type="button" name="button-search" aria-label="search" v-on:click="loadUsers()" style="margin-top: 0;">
diff --git a/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/Contribute.vue b/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/Contribute.vue
index 0f958304b..f25aa0b7f 100644
--- a/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/Contribute.vue
+++ b/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/Contribute.vue
@@ -49,11 +49,13 @@
 
                     <div class="contribute-title-wrapper lh-padding-fluid">
                         <div class="lh-container-xl pt-20 pb-2">
+                   
                             <EditSaveFieldWithCharacterCount v-model="resourceDetails.title"
                                                              addEditLabel="title"
                                                              :characterLimit="255"
                                                              :isH1="true"
-                                                             size="large"></EditSaveFieldWithCharacterCount>
+                                                             size="large"
+                                                             :inputId="title"></EditSaveFieldWithCharacterCount>
                         </div>
                         <h3 v-if="resourceDetails.resourceType === ResourceType.ASSESSMENT"
                             class="pb-15 lh-container-xl">
@@ -290,6 +292,7 @@
     export default Vue.extend({
         props: {
             resourceVersionId: String,
+            title: { type: String, default: 'title' },
         },
         components: {
             ContributeActionsBar,
diff --git a/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/ContributeAssessmentSettings.vue b/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/ContributeAssessmentSettings.vue
index 09925626c..3c01b6050 100644
--- a/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/ContributeAssessmentSettings.vue
+++ b/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/ContributeAssessmentSettings.vue
@@ -53,8 +53,8 @@
 
                         <div class="d-flex" v-if="assessmentDetails.assessmentType === AssessmentTypeEnum.Formal">
                             <div class="selection pr-50">
-                                <div class="mb-4">Define how many attempts the learner can have.</div>
-                                <input class="text-input" type="text" v-model="assessmentDetails.maximumAttempts" />
+                                <div class="mb-4"><label for="maximumAttempts">Define how many attempts the learner can have.</label></div>
+                                <input class="text-input" type="text" id="maximumAttempts" name="maximumAttempts" v-model="assessmentDetails.maximumAttempts" />
                             </div>
                             <div class="tip">
                                 <h3>Tip</h3>
@@ -65,11 +65,12 @@
 
                         <div class="d-flex">
                             <div class="selection pr-50">
-                                <div>Provide guidance for the learner at the end of this assessment. <i v-if="!IsVisible" class="warningTriangle fas fa-exclamation-triangle warm-yellow"></i></div>
+                                <div>Provide guidance for the learner at the end of this assessment.<i v-if="!IsVisible" class="warningTriangle fas fa-exclamation-triangle warm-yellow"></i></div>
                                 <EditSaveFieldWithCharacterCount v-model="assessmentDetails.endGuidance.blocks[0].title"
                                                                  addEditLabel="title"
                                                                  v-bind:characterLimit="60"
-                                                                 v-bind:isH3="true" />
+                                                                 v-bind:isH3="true" 
+                                                                 v-bind:inputId="message"/>
                                 <ckeditorwithhint v-on:blur="setEndGuidance"
                                                   v-on:inputValidity="setGuidanceValidity"
                                                   :maxLength="1000"
@@ -107,6 +108,7 @@
         props: {
             blockCollection: { type: Object } as PropOptions<BlockCollectionModel>,
             firstTimeOpen: Boolean,
+            message: { type: String, default: 'message' },
         },
         components: {
             ExpansionPanel,
diff --git a/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/ContributeAuthorsTab.vue b/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/ContributeAuthorsTab.vue
index 3454b62a0..9881f3e42 100644
--- a/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/ContributeAuthorsTab.vue
+++ b/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/ContributeAuthorsTab.vue
@@ -28,7 +28,7 @@
                             </label>
                         </div>
                         <CharacterCount v-model="authorName"
-                                        v-bind:inputId="authorName"
+                                        v-bind:inputId="txtauthorName"
                                         v-bind:characterLimit="100"
                                         v-bind:disabled="authorIsContributor"
                                         :showTitle="false"
@@ -38,7 +38,7 @@
                             </template>
                         </CharacterCount>
                         <CharacterCount v-model="authorOrganisation"
-                                        v-bind:inputId="authorOrganisation"
+                                        v-bind:inputId="txtauthorOrganisation"
                                         v-bind:characterLimit="100"
                                         :showTitle="false"
                                         class="mt-15">
@@ -47,7 +47,7 @@
                             </template>
                         </CharacterCount>
                         <CharacterCount v-model="authorRole"
-                                        v-bind:inputId="authorRole"
+                                        v-bind:inputId="txtauthorRole"
                                         v-bind:characterLimit="100"
                                         :showTitle="false"
                                         class="mt-15">
@@ -86,12 +86,16 @@
         props: {
             resourceDetails: { type: Object } as PropOptions<ContributeResourceDetailModel>,
             configuration: { type: Object } as PropOptions<ContributeConfiguration>,
+            txtauthorName: { type: String, default: 'authorName' },
+            txtauthorOrganisation: { type: String, default: 'authorOrganisation' },
+            txtauthorRole: { type: String, default: 'authorRole' },
         },
         components: {
             AuthorsList,
             Button,
             CharacterCount,
             LinkTextAndIcon,
+
         },
         data() {
             return {
diff --git a/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/ContributeBlock.vue b/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/ContributeBlock.vue
index 4c6aa1ec4..e81dc188b 100644
--- a/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/ContributeBlock.vue
+++ b/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/ContributeBlock.vue
@@ -28,7 +28,8 @@
                                                          v-model="block.title"
                                                          addEditLabel="title"
                                                          :characterLimit="60"
-                                                         :isH3="true"></EditSaveFieldWithCharacterCount>
+                                                         :isH3="true"
+                                                         :inputId="title"></EditSaveFieldWithCharacterCount>
                         <h3 class="my-0"
                             v-else>
                             {{ block.title }}
@@ -158,7 +159,8 @@
             enableDown: Boolean,
             resourceType: { type: Number } as PropOptions<ResourceType>,
             canBeDuplicated: Boolean,
-            selectedToDuplicate: Boolean
+            selectedToDuplicate: Boolean,
+            title: { type: String, default: 'title' },
         },
         data() {
             return {
diff --git a/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/ContributeImageCarouselBlock.vue b/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/ContributeImageCarouselBlock.vue
index 9c0c626bb..589e4a69a 100644
--- a/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/ContributeImageCarouselBlock.vue
+++ b/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/ContributeImageCarouselBlock.vue
@@ -2,7 +2,7 @@
     <div class="contribute-image-carousel-block">
         <div class="contribute-image-carousel-block-description">
             <div>
-                <b>Description text</b>
+                <label for="description"> <b>Description text</b></label>
                 <Tick v-bind:complete="!!imageCarouselBlock.description"></Tick>
                 <p>
                     Provide a short description for the Carousel. This will be displayed to the user in the header bar beneath the title.
@@ -13,7 +13,8 @@
                     <EditSaveFieldWithCharacterCount v-model="imageCarouselBlock.description"
                                                      addEditLabel="Description"
                                                      v-bind:characterLimit="250"
-                                                     v-bind:isH3="true"></EditSaveFieldWithCharacterCount>
+                                                     v-bind:isH3="true"
+                                                     v-bind:inputId="description"></EditSaveFieldWithCharacterCount>
                 </div>
             </div>
         </div>
@@ -97,6 +98,7 @@
         props: {
             imageCarouselBlock: { type: Object } as PropOptions<ImageCarouselBlockModel>,
             resourceType: { type: Number } as PropOptions<ResourceType>,
+            description: { type: String, default: 'description' },
         },
         data() {
             return {
diff --git a/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/ContributeImageCarouselBlockItem.vue b/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/ContributeImageCarouselBlockItem.vue
index 61ef9a378..1dbaf26fb 100644
--- a/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/ContributeImageCarouselBlockItem.vue
+++ b/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/ContributeImageCarouselBlockItem.vue
@@ -12,7 +12,8 @@
                         <EditSaveFieldWithCharacterCount v-model="block.title"
                                                          addEditLabel="title"
                                                          v-bind:characterLimit="60"
-                                                         v-bind:isH3="true"></EditSaveFieldWithCharacterCount>
+                                                         v-bind:isH3="true"
+                                                         v-bind:inputId="title"></EditSaveFieldWithCharacterCount>
                         <Tick v-bind:complete="block.isReadyToPublish()" class="p-10"></Tick>
                     </div>
                     <div class="d-flex justify-content-center icon-button">
@@ -107,6 +108,7 @@ export default Vue.extend({
         enableUp: Boolean,
         enableDown: Boolean,
         resourceType: {type: Number} as PropOptions<ResourceType>,
+        title: { type: String, default: 'title' },
     },
     data() {
         return {
diff --git a/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/ContributeWholeSlideImage.vue b/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/ContributeWholeSlideImage.vue
index 7e23d49d6..a42a3848b 100644
--- a/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/ContributeWholeSlideImage.vue
+++ b/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/ContributeWholeSlideImage.vue
@@ -4,11 +4,12 @@
             <div class="d-flex flex-grow-1">
                 <Tick :complete="wholeSlideImageItem.isReadyToPublish()"
                       class="pt-20 pl-15 pr-10"></Tick>
-                <div class="flex-grow-1 mr-10">
+                <div class="flex-grow-1 mr-10">                 
                     <EditSaveFieldWithCharacterCount v-model="wholeSlideImage.title"
                                                      addEditLabel="title"
                                                      :characterLimit="60"
-                                                     :isH4="true"></EditSaveFieldWithCharacterCount>
+                                                     :isH4="true"
+                                                     :inputId="title"></EditSaveFieldWithCharacterCount>
                 </div>
             </div>
             <div class="contribute-whole-slide-image-buttons d-flex align-items-start justify-content-end">
@@ -53,13 +54,14 @@
 
                 <div v-if="!wholeSlideImage.getFileModel() && !imageZone">
                     <h3 class="flex pl-2 pt-10"
-                        v-if="showPlaceholderText">Placeholder text:</h3>
+                        v-if="showPlaceholderText"><label for="placeholder">Placeholder text:</label></h3>
                     <div class="d-flex align-items-center">
                         <EditSaveFieldWithCharacterCount
                             class="flex"
                             addEditLabel="placeholder text"
                             v-model="wholeSlideImageItem.placeholderText"
                             :characterLimit="500"
+                            :inputId="placeholder"
                             @updateIsEditing="value => isEditingPlaceholder(value)"/>
                     </div>
                     <div>
@@ -225,7 +227,9 @@
             enableUp: Boolean,
             enableDown: Boolean,
             resourceType: { type: Number } as PropOptions<ResourceType>,
-            imageZone: { type: Boolean, default: false }
+            imageZone: { type: Boolean, default: false },
+            title: { type: String, default: 'title' },
+            placeholder: { type: String, default: 'placeholder' },
         },
         data() {
             return {
diff --git a/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/components/content-tab/MediaBlockCarouselImage.vue b/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/components/content-tab/MediaBlockCarouselImage.vue
index 3d8a60792..a2985f4e4 100644
--- a/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/components/content-tab/MediaBlockCarouselImage.vue
+++ b/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/components/content-tab/MediaBlockCarouselImage.vue
@@ -20,13 +20,14 @@
                     </picture>
                 </div>
                 <div class="carousel-text-editor">
-                    <b>Description text</b> (Optional)
+                    <label for="description"> <b>Description text</b> (Optional)</label>
                     <p>
                         Provide a short description of the image, which will be displayed to the user under the image in the carousel.
                     </p>
                     <EditSaveFieldWithCharacterCount v-model="image.description"
                                                      addEditLabel="Description"
                                                      v-bind:characterLimit="150"
+                                                     v-bind:inputId="description"
                                                      block-view/>
                 </div>
                 <div class="carousel-text-editor">
@@ -39,7 +40,7 @@
                     <EditSaveFieldWithCharacterCount v-model="image.altText"
                                                      addEditLabel="alt text"
                                                      v-bind:characterLimit="125"
-                                                     block-view/>
+                                                     block-view />
                 </div>
             </div>
         </div>
@@ -71,6 +72,7 @@
         },
         props: {
             image: { type: Object } as PropOptions<ImageModel>,
+             description: { type: String, default: 'description' },
         },
         data() {
             return {
diff --git a/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/components/content-tab/MediaBlockImage.vue b/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/components/content-tab/MediaBlockImage.vue
index b4bdea73a..367086f17 100644
--- a/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/components/content-tab/MediaBlockImage.vue
+++ b/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/components/content-tab/MediaBlockImage.vue
@@ -14,7 +14,8 @@
                 <div v-if="withLabel">
                     <EditSaveFieldWithCharacterCount v-model="image.description"
                                                      addEditLabel="label"
-                                                     v-bind:characterLimit="descriptionCharacterLimit"/>
+                                                     v-bind:characterLimit="descriptionCharacterLimit"
+                                                     v-bind:inputId="imageAltText"/>
                 </div>
             </div>
             <div v-else class="d-flex flex-column align-items-center justify-content-center">
@@ -36,6 +37,7 @@
                 <EditSaveFieldWithCharacterCount v-model="image.altText"
                                                  addEditLabel="alt text"
                                                  v-bind:characterLimit="125"
+                                                 v-bind:inputId="alttext"
                                                  block-view/>
             </div>
         </div>
@@ -71,7 +73,8 @@ export default Vue.extend({
             restrictAdvancedImageTypes: { type: Boolean, default: false },
             imageClass: String,
             withLabel: { type: Boolean, default: false },
-            descriptionCharacterLimit: { type: Number, default: 125 }
+            descriptionCharacterLimit: { type: Number, default: 125 },
+            alttext: { type: String, default: 'alttext' },
         },
         data() {
             return {
diff --git a/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/components/questions/MultipleChoiceAnswer.vue b/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/components/questions/MultipleChoiceAnswer.vue
index a09c280ad..0555673f2 100644
--- a/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/components/questions/MultipleChoiceAnswer.vue
+++ b/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/components/questions/MultipleChoiceAnswer.vue
@@ -3,12 +3,13 @@
         <div>
             <div class="flex align-items-center">
                 <div class="flex">
-                    <Tick v-bind:complete="this.answer.isReadyToPublish()" class="pr-3 align-with-cc"/>
-                    <EditSaveFieldWithCharacterCount
-                                    v-model="message"
-                                    addEditLabel="response text"
-                                    v-bind:characterLimit="120"
-                                    v-bind:isH3="true"></EditSaveFieldWithCharacterCount>
+                    <Tick v-bind:complete="this.answer.isReadyToPublish()" class="pr-3 align-with-cc" />
+                    <label class="nhsuk-u-visually-hidden" for="messagedetails"></label>
+                    <EditSaveFieldWithCharacterCount v-model="message"
+                                                     addEditLabel="response text"
+                                                     v-bind:characterLimit="120"
+                                                     v-bind:inputId="messagedetails"
+                                                     v-bind:isH3="true"></EditSaveFieldWithCharacterCount>
                 </div>
                 <span class="bin">
                     <IconButton v-on:click="$emit('deleteAnswer', answer)"
@@ -49,6 +50,7 @@
         props: {
             answer: { type: Object } as PropOptions<AnswerModel>,
             multipleAnswers: Boolean,
+            messagedetails: { type: String, default: 'messagedetails' },
         },
         
         data() {
diff --git a/LearningHub.Nhs.WebUI/Scripts/vuesrc/globalcomponents/CharacterCountWithSaveCancelButtons.vue b/LearningHub.Nhs.WebUI/Scripts/vuesrc/globalcomponents/CharacterCountWithSaveCancelButtons.vue
index 3adc6a2c4..52be25939 100644
--- a/LearningHub.Nhs.WebUI/Scripts/vuesrc/globalcomponents/CharacterCountWithSaveCancelButtons.vue
+++ b/LearningHub.Nhs.WebUI/Scripts/vuesrc/globalcomponents/CharacterCountWithSaveCancelButtons.vue
@@ -3,7 +3,7 @@
         <CharacterCount v-model="inputValue"
                         v-bind:characterLimit="characterLimit"
                         v-bind:size="size"
-                        :showTitle="false"
+                        v-bind:inputId="inputId"
                         focusOnLoad></CharacterCount>
         <div class="d-inline-flex">
             <Button v-on:click="save"
@@ -34,6 +34,7 @@
             value: String,
             characterLimit: Number,
             size: String,
+            inputId:String
         },
         data() {
             return {
diff --git a/LearningHub.Nhs.WebUI/Scripts/vuesrc/globalcomponents/EditSaveFieldWithCharacterCount.vue b/LearningHub.Nhs.WebUI/Scripts/vuesrc/globalcomponents/EditSaveFieldWithCharacterCount.vue
index 28c0d10f6..67b06678f 100644
--- a/LearningHub.Nhs.WebUI/Scripts/vuesrc/globalcomponents/EditSaveFieldWithCharacterCount.vue
+++ b/LearningHub.Nhs.WebUI/Scripts/vuesrc/globalcomponents/EditSaveFieldWithCharacterCount.vue
@@ -5,6 +5,7 @@
                                              v-model="inputValue"
                                              v-bind:characterLimit="characterLimit"
                                              v-bind:size="size"
+                                             v-bind:inputId="inputId"
                                              v-on:input="$emit('input', $event)"
                                              v-on:close="isEditing = false"></CharacterCountWithSaveCancelButtons>
         <div v-else>
@@ -66,6 +67,7 @@
             addEditLabel: String,
             blockView: Boolean,
             size: String,
+            inputId: String,
         },
         data() {
             return {
diff --git a/LearningHub.Nhs.WebUI/Scripts/vuesrc/resource/blocks/AnnotationFullPageEdit.vue b/LearningHub.Nhs.WebUI/Scripts/vuesrc/resource/blocks/AnnotationFullPageEdit.vue
index cf1b5892b..e4fba8774 100644
--- a/LearningHub.Nhs.WebUI/Scripts/vuesrc/resource/blocks/AnnotationFullPageEdit.vue
+++ b/LearningHub.Nhs.WebUI/Scripts/vuesrc/resource/blocks/AnnotationFullPageEdit.vue
@@ -14,10 +14,12 @@
         </div>
         <div class="annotation-edit-fs-functions">
             <div class="annotation-edit-fs-functions-change-title">
+                <label class="nhsuk-u-visually-hidden" for="title"></label>
                 <EditSaveFieldWithCharacterCount v-model="wholeSlideImage.title"
                                                  addEditLabel="title"
                                                  :characterLimit="60"
-                                                 :isH4="true"/>
+                                                 :isH4="true"
+                                                 :inputId="title" />
             </div>
             <div class="annotation-edit-fs-functions-other">
                 <div class="edit-hide-controls">
@@ -75,6 +77,7 @@
             resourceType: { type: Number } as PropOptions<ResourceType>,
             imageZone: Boolean,
             questionBlock: { type: Object } as PropOptions<QuestionBlockModel>,
+            title: { type: String, default: 'title' },
         },
         data() {
             return {