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

Author: Swapnamol

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