Merge pull request #725 from TechnologyEnhancedLearning/Develop/Fixes/TD-4080-DIG302_Placeholder-text-cannot-be-used-to-label-forms

TD-4080: DIG302: Placeholder text cannot be used to label forms

Author: Swapnamol

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

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,

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,

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 {

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 {

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 {

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 {

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 {

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 {

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 {