Merge pull request #731 from TechnologyEnhancedLearning/Develop/Fixes/TD-4079-DIG301-Form-fields-are-not-associated-with-text-labels

TD:4079: DIG301: Form fields are not associated with text labels

Author: Swapnamol

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>

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>

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>

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>
     }
 }
 

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