From d64b641ac693aa0ce7fca18d5f576cb5016edb2c Mon Sep 17 00:00:00 2001
From: Swapnamol Abraham <Swapnamol.Abraham@hee.nhs.uk>
Date: Wed, 6 Nov 2024 10:31:48 +0000
Subject: [PATCH] TD-4079: Form elements should have an id attribute

---
 .../ContributeAssessmentSettings.vue                 | 12 +++++++-----
 .../contribute-resource/ContributeAuthorsTab.vue     |  6 +++---
 .../contribute-resource/ContributeLicenceTab.vue     |  6 +++---
 .../components/CatalogueSelector.vue                 |  2 +-
 .../components/SensitiveContentTickBox.vue           |  4 ++--
 .../components/questions/AllowReveal.vue             |  8 ++++----
 .../components/questions/SingleChoiceAnswer.vue      |  2 +-
 .../Scripts/vuesrc/contribute/CatalogueSelect.vue    |  2 +-
 .../Scripts/vuesrc/contribute/Content.vue            |  4 ++--
 .../Scripts/vuesrc/contribute/ContentCommon.vue      |  8 ++++----
 .../Scripts/vuesrc/contribute/ContentVideo.vue       |  2 +-
 .../Scripts/vuesrc/learningsessions/ScormViewer.vue  |  2 +-
 12 files changed, 30 insertions(+), 28 deletions(-)

diff --git a/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/ContributeAssessmentSettings.vue b/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/ContributeAssessmentSettings.vue
index 3c01b6050..088f74c90 100644
--- a/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/ContributeAssessmentSettings.vue
+++ b/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/ContributeAssessmentSettings.vue
@@ -23,12 +23,12 @@
                         <div class="d-flex">
                             <div class="selection pr-50">
                                 <div class="mb-4">Allow the learner to work through the assessment pages in any order.</div>
-                                <label class="my-0 label-text">
-                                    <input class="radio-button" type="radio" :value="false"  v-model="assessmentDetails.answerInOrder"/>
+                                <label class="my-0 label-text" for="yes">
+                                    <input class="radio-button" type="radio" :value="false" id="yes"  v-model="assessmentDetails.answerInOrder"/>
                                     Yes
                                 </label>
-                                <label class="my-0 pl-5 label-text">
-                                    <input class="radio-button" type="radio" :value="true"  v-model="assessmentDetails.answerInOrder"/>
+                                <label class="my-0 pl-5 label-text" for="no">
+                                    <input class="radio-button" type="radio" :value="true" id="no"  v-model="assessmentDetails.answerInOrder"/>
                                     No
                                 </label>
                             </div>
@@ -74,7 +74,9 @@
                                 <ckeditorwithhint v-on:blur="setEndGuidance"
                                                   v-on:inputValidity="setGuidanceValidity"
                                                   :maxLength="1000"
-                                                  :initialValue="endGuidance" />
+                                                  :initialValue="endGuidance"
+                                                  :for="guidance"
+                                                  :id="guidance"/>
                             </div>
                             <div class="tip">
                                 <h3>Tip</h3>
diff --git a/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/ContributeAuthorsTab.vue b/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/ContributeAuthorsTab.vue
index 9881f3e42..7970c5263 100644
--- a/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/ContributeAuthorsTab.vue
+++ b/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/ContributeAuthorsTab.vue
@@ -14,16 +14,16 @@
                 
                 <div v-if="resourceAuthors.length < maxAllowedAuthors" class="mb-40">
                     <LinkTextAndIcon v-if="!isAdding"
-                                     v-on:click="isAdding = true"
+                                     v-on:click="isAdding = true"Please choose...
                                      class="contribute-authors-tab-add-button">
                         <i class="fa-solid fa-plus"></i> Add author
                     </LinkTextAndIcon>
 
                     <div v-if="isAdding">
                         <div class="mt-5" v-if="!isCurrentUserSavedAsAuthor">
-                            <label class="checkContainer">
+                            <label class="checkContainer" for="currentUserAuthor">
                                 I am the author or co-author
-                                <input type="checkbox" v-model="authorIsContributor" v-on:change="currentUserAuthorChange">
+                                <input type="checkbox" id="currentUserAuthor" v-model="authorIsContributor" v-on:change="currentUserAuthorChange">
                                 <span class="checkmark"></span>
                             </label>
                         </div>
diff --git a/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/ContributeLicenceTab.vue b/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/ContributeLicenceTab.vue
index 5c0ffe391..04f60d05d 100644
--- a/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/ContributeLicenceTab.vue
+++ b/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/ContributeLicenceTab.vue
@@ -8,9 +8,9 @@
                     <a v-bind:href="moreInfoLink" class="mb-10 accessible-link" target="_blank">More information on licences</a>
                 </div>
 
-                <select class="form-control" aria-labelledby="licence-heading" v-model="resourceDetails.resourceLicenceId">
-                    <option disabled v-bind:value="null">Please choose...</option>
-                    <option v-for="licence in licences" :value="licence.id">
+                <select class="form-control" aria-labelledby="licence-heading" id="licence" v-model="resourceDetails.resourceLicenceId">
+                    <option disabled v-bind:value="null" id="select">Please choose...</option>
+                    <option v-for="licence in licences" :value="licence.id" :id="licence.id">
                         {{licence.title}}
                     </option>
                 </select>
diff --git a/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/components/CatalogueSelector.vue b/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/components/CatalogueSelector.vue
index eb7981f31..f3354ab8d 100644
--- a/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/components/CatalogueSelector.vue
+++ b/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/components/CatalogueSelector.vue
@@ -5,7 +5,7 @@
         <CatalogueSelectorAccordion/>
         
         <div class="form-group">
-            <select class="form-control" aria-labelledby="primary-catalogue-heading" v-model="selectedCatalogue" @change="catalogueChange">
+            <select class="form-control" aria-labelledby="primary-catalogue-heading" id="catalogue" v-model="selectedCatalogue" @change="catalogueChange">
                 <option disabled v-bind:value="{ nodeId: 0 }">Please choose...</option>
                 <option v-for="catalogue in userCatalogues" :value="catalogue">
                     {{getCatalogueName(catalogue)}}
diff --git a/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/components/SensitiveContentTickBox.vue b/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/components/SensitiveContentTickBox.vue
index a6b5ef649..7fb3d12b4 100644
--- a/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/components/SensitiveContentTickBox.vue
+++ b/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/components/SensitiveContentTickBox.vue
@@ -11,9 +11,9 @@
         </div>
 
         <div class="mt-3">
-            <label class="checkContainer mb-0">
+            <label class="checkContainer mb-0" for="sensitivecontent">
                 Yes
-                <input type="checkbox" v-model="resourceDetails.sensitiveContent">
+                <input type="checkbox" id="sensitivecontent" v-model="resourceDetails.sensitiveContent">
                 <span class="checkmark"></span>
             </label>
         </div>
diff --git a/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/components/questions/AllowReveal.vue b/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/components/questions/AllowReveal.vue
index 078994fe2..9cdb8d3f9 100644
--- a/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/components/questions/AllowReveal.vue
+++ b/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/components/questions/AllowReveal.vue
@@ -6,13 +6,13 @@
             </div>
             <form>
                
-                <label class="my-0">
-                    <input class="radio-button" type="radio" :value="false"  v-model="questionBlock.allowReveal"/>
+                <label class="my-0" for="no">
+                    <input class="radio-button" type="radio" :value="false"  v-model="questionBlock.allowReveal" id="no"/>
                     No
                 </label>
                 <br>
-                <label class="my-0">
-                    <input class="radio-button" type="radio" :value="true"  v-model="questionBlock.allowReveal"/>
+                <label class="my-0" for="yes">
+                    <input class="radio-button" type="radio" :value="true"  v-model="questionBlock.allowReveal" id="yes"/>
                     Yes
                 </label>
             </form>
diff --git a/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/components/questions/SingleChoiceAnswer.vue b/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/components/questions/SingleChoiceAnswer.vue
index 0ab646f4a..fe239474a 100644
--- a/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/components/questions/SingleChoiceAnswer.vue
+++ b/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/components/questions/SingleChoiceAnswer.vue
@@ -27,7 +27,7 @@
             <hr class="cutoff-line">
         </div>
         <div>
-            <input type="text" aria-describedby="messageError" class="form-control text-input" maxlength="120" v-model="message" />
+            <input type="text" id="txtmessage" aria-describedby="messageError" class="form-control text-input" maxlength="120" v-model="message" />
             <div class="footer-text" id="messageError">
                 You have {{ charactersRemaining }} characters remaining.
             </div>
diff --git a/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute/CatalogueSelect.vue b/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute/CatalogueSelect.vue
index f7f91cd55..1d132cf5f 100644
--- a/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute/CatalogueSelect.vue
+++ b/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute/CatalogueSelect.vue
@@ -36,7 +36,7 @@
 
         <div class="row">
             <div class="form-group col-12">
-                <select class="form-control" aria-labelledby="type-label" v-model="selectedCatalogue" @change="catalogueChange">
+                <select class="form-control" aria-labelledby="type-label" id="catalogue" v-model="selectedCatalogue" @change="catalogueChange">
                     <option disabled v-bind:value="{ nodeId: 0 }">Please choose...</option>
                     <option v-for="catalogue in userCatalogues" :value="catalogue">
                         {{getCatalogueName(catalogue)}}
diff --git a/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute/Content.vue b/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute/Content.vue
index 31102a78d..e5a5e2c43 100644
--- a/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute/Content.vue
+++ b/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute/Content.vue
@@ -71,7 +71,7 @@
                             </div>
                             <div class="row">
                                 <div class="form-group col-12">
-                                    <select class="form-control" aria-labelledby="type-label" v-model="selectUploadResourceType" @change="onUploadResourceTypeChange">
+                                    <select class="form-control" aria-labelledby="type-label" id="uploadResourceTypes" v-model="selectUploadResourceType" @change="onUploadResourceTypeChange">
                                         <option disabled v-bind:value="0">Please choose...</option>
                                         <option v-for="option in uploadResourceTypes" :value="option.id">
                                             {{ option.description }}
@@ -359,7 +359,7 @@
                                                     <div>
                                                         <div class="modal-section-header"><label for="notes">Notes</label></div>
                                                         <p class="mt-1">Provide information to help learners understand why this new version has been created.</p>
-                                                        <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>
+                                                        <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>
                                                         <div class="error-text pt-3" v-if="$v.publishNotes.$invalid && $v.publishNotes.$dirty">
                                                             <span class="text-danger">Enter notes.</span>
                                                         </div>
diff --git a/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute/ContentCommon.vue b/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute/ContentCommon.vue
index 85f0dd6f0..d670ced15 100644
--- a/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute/ContentCommon.vue
+++ b/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute/ContentCommon.vue
@@ -66,9 +66,9 @@
                 <div class="bg-grey-white">
                     Do you want learners to be notified that this resource contains sensitive content, which they may find offensive or disturbing, before they access it?
                     <div class="mt-3">
-                        <label class="checkContainer mb-0">
+                        <label class="checkContainer mb-0" for="sensitivecontent">
                             Yes
-                            <input type="checkbox" v-model="sensitiveContent" @click="setSensitiveContent($event.target.checked)">
+                            <input type="checkbox" id="sensitivecontent" v-model="sensitiveContent" @click="setSensitiveContent($event.target.checked)">
                             <span class="checkmark"></span>
                         </label>
                     </div>
@@ -151,9 +151,9 @@
             </div>
             <div v-if="!userIsAuthor && authors.length < maxAllowedAuthors" class="col-12 mb-3">
                 <div>
-                    <label class="checkContainer">
+                    <label class="checkContainer" for="currentUserAuthor">
                         I am the author or co-author
-                        <input type="checkbox" v-model="currentUserAuthor" @change="currentUserAuthorChange">
+                        <input type="checkbox" id="currentUserAuthor" v-model="currentUserAuthor" @change="currentUserAuthorChange">
                         <span class="checkmark"></span>
                     </label>
                 </div>
diff --git a/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute/ContentVideo.vue b/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute/ContentVideo.vue
index fd2631c6c..b97de9a86 100644
--- a/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute/ContentVideo.vue
+++ b/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute/ContentVideo.vue
@@ -63,7 +63,7 @@
                 for example, how it was developed or what is required for it to be used.
             </div>
             <div class="col-12 mt-3">
-                <textarea class="form-control" aria-labelledby="additionalinfo-label" rows="4" maxlength="250" v-model="additionalInformation" @change="setAdditionalInformation($event.target.value)"></textarea>
+                <textarea class="form-control" id="additionalinfo" aria-labelledby="additionalinfo-label" rows="4" maxlength="250" v-model="additionalInformation" @change="setAdditionalInformation($event.target.value)"></textarea>
             </div>
             <div class="col-12 footer-text">
                 You can enter a maximum of 250 characters
diff --git a/LearningHub.Nhs.WebUI/Scripts/vuesrc/learningsessions/ScormViewer.vue b/LearningHub.Nhs.WebUI/Scripts/vuesrc/learningsessions/ScormViewer.vue
index f0687c0f8..93006121a 100644
--- a/LearningHub.Nhs.WebUI/Scripts/vuesrc/learningsessions/ScormViewer.vue
+++ b/LearningHub.Nhs.WebUI/Scripts/vuesrc/learningsessions/ScormViewer.vue
@@ -17,7 +17,7 @@
         </div>
         <div class="text-popup" v-show="textLogVisible">
             <button @click="textLogVisible=false">close</button>
-            <textarea v-model="textLog"></textarea>
+            <textarea v-model="textLog" id="log"></textarea>
         </div>
     </div>
 </template>