From 9a418324412e164f2bd53f59dbd328a27b7a208b Mon Sep 17 00:00:00 2001
From: Swapnamol Abraham <Swapnamol.Abraham@hee.nhs.uk>
Date: Mon, 4 Nov 2024 14:33:13 +0000
Subject: [PATCH 1/3] TD:4079: DIG301: Form fields are not associated with text
 labels

---
 .../Components/NavigationItems/MobileTopRightNav.cshtml     | 4 ++--
 LearningHub.Nhs.WebUI/Views/Shared/_NavPartial.cshtml       | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/LearningHub.Nhs.WebUI/Views/Shared/Components/NavigationItems/MobileTopRightNav.cshtml b/LearningHub.Nhs.WebUI/Views/Shared/Components/NavigationItems/MobileTopRightNav.cshtml
index fbbe4a256..3ced465bc 100644
--- a/LearningHub.Nhs.WebUI/Views/Shared/Components/NavigationItems/MobileTopRightNav.cshtml
+++ b/LearningHub.Nhs.WebUI/Views/Shared/Components/NavigationItems/MobileTopRightNav.cshtml
@@ -24,12 +24,12 @@ else
     <div class="nhsuk-header__mobile-break"></div>
     @if (Model.ShowSearch)
     {
-        <label class="nhsuk-header__search-toggle" id="toggle-search" aria-controls="search" aria-label="Open search">
+        <button class="nhsuk-header__search-toggle" id="toggle-search" aria-controls="search" aria-label="Open search">
             <svg class="nhsuk-icon nhsuk-icon__search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false" width="27" height="27">
                 <path d="M19.71 18.29l-4.11-4.1a7 7 0 1 0-1.41 1.41l4.1 4.11a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42zM5 10a5 5 0 1 1 5 5 5 5 0 0 1-5-5z"></path>
             </svg>
             <span class="nhsuk-u-visually-hidden">Search</span>
-        </label>
+        </button>
     }
 }
 
diff --git a/LearningHub.Nhs.WebUI/Views/Shared/_NavPartial.cshtml b/LearningHub.Nhs.WebUI/Views/Shared/_NavPartial.cshtml
index 233fd9bc9..78154d41f 100644
--- a/LearningHub.Nhs.WebUI/Views/Shared/_NavPartial.cshtml
+++ b/LearningHub.Nhs.WebUI/Views/Shared/_NavPartial.cshtml
@@ -49,15 +49,15 @@
 
 </div>
   @if (User.Identity.IsAuthenticated) {
-    <input type="checkbox" id="header-dropdown-menu-control" aria-labelledby="Main navigation menu" role="button">
+  <input type="checkbox" id="header-dropdown-menu-control" aria-labelledby="label-navigation" role="button">
     <nav class="nhsuk-header__navigation app-width-container" id="header-navigation" role="navigation" aria-label="Primary navigation" aria-labelledby="label-navigation">
         <p class="nhsuk-header__navigation-title"><span id="label-navigation">Menu</span>
-          <label class="nhsuk-header__navigation-close" id="close-menu">
+          <button class="nhsuk-header__navigation-close" id="close-menu">
             <svg class="nhsuk-icon nhsuk-icon__close" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false" width="27" height="27">
               <path d="M13.41 12l5.3-5.29a1 1 0 1 0-1.42-1.42L12 10.59l-5.29-5.3a1 1 0 0 0-1.42 1.42l5.3 5.29-5.3 5.29a1 1 0 0 0 0 1.42 1 1 0 0 0 1.42 0l5.29-5.3 5.29 5.3a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42z"></path>
             </svg>
             <span class="nhsuk-u-visually-hidden">Close menu</span>
-          </label>
+          </button>
         </p>
         <ul class="nhsuk-header__navigation-list @BasicUserPaddingClass()">
           @await Component.InvokeAsync("NavigationItems")

From 6f37266ef1e1a79dff829a51d632fd8ec4f1cb87 Mon Sep 17 00:00:00 2001
From: Swapnamol Abraham <Swapnamol.Abraham@hee.nhs.uk>
Date: Mon, 4 Nov 2024 15:54:03 +0000
Subject: [PATCH 2/3] accessbility fixes

---
 .../components/questions/SingleChoiceAnswer.vue                | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

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 f1379acb3..0ab646f4a 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,8 +27,7 @@
             <hr class="cutoff-line">
         </div>
         <div>
-            <label class="nhsuk-u-visually-hidden" for="message"></label>
-            <input type="text" id="message" name="message" aria-describedby="messageError" class="form-control text-input" maxlength="120" v-model="message" />
+            <input type="text" 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>

From 1508bc70dae77bf9fc462a42c4cd570615e732cc Mon Sep 17 00:00:00 2001
From: Swapnamol Abraham <Swapnamol.Abraham@hee.nhs.uk>
Date: Mon, 4 Nov 2024 16:55:36 +0000
Subject: [PATCH 3/3] Accessibility fixes

---
 .../vuesrc/contribute-resource/components/KeyWordsEditor.vue  | 2 +-
 .../Scripts/vuesrc/contribute/ContentCommon.vue               | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/components/KeyWordsEditor.vue b/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/components/KeyWordsEditor.vue
index 97e4ed42f..9c09b5828 100644
--- a/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/components/KeyWordsEditor.vue
+++ b/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute-resource/components/KeyWordsEditor.vue
@@ -19,7 +19,7 @@
                     <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" />
                     <button type="button" class="nhsuk-button nhsuk-button--secondary ml-3 button_width nhsuk-u-margin-bottom-0" @click="addKeyword">&nbsp;Add</button>
                 </div>
-                <div class="col-12 footer-text">
+                <div class="col-12 footer-text" id="keyword-label">
                     You can enter a maximum of 50 characters per keyword
                 </div>
             </div>
diff --git a/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute/ContentCommon.vue b/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute/ContentCommon.vue
index 1ace98464..85f0dd6f0 100644
--- a/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute/ContentCommon.vue
+++ b/LearningHub.Nhs.WebUI/Scripts/vuesrc/contribute/ContentCommon.vue
@@ -87,7 +87,7 @@
                     <span class="text-danger">The keyword(s) have already been added : {{formattedkeywordErrorMessage}}</span>
                 </div>
                 <div class="col-12 mb-0 error-text" v-if="keywordLengthExceeded">
-                    <span class="text-danger">
+                    <span class="text-danger" id="keyword-label"> 
                         Each keyword must be no longer than 50 characters.
                     </span>
                 </div>
@@ -99,7 +99,7 @@
                     <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" />
                     <button type="button" class="nhsuk-button nhsuk-button--secondary ml-3 nhsuk-u-margin-bottom-0" @click="addKeyword">&nbsp;Add</button>
                 </div>
-                <div class="col-12 footer-text">
+                <div class="col-12 footer-text" id="keyword-label">
                     You can enter a maximum of 50 characters per keyword
                 </div>
             </div>