hide search input label, only visible to screen readers

web/src/components/layout/Header.tsx

@@ -148,20 +148,22 @@ export const Header = () => {
                 <Link href="/foreninger">Foreninger</Link>
               </li>
               <li className={styles.galtinn}>
-                <a
-                  href="https://galtinn.neuf.no/"
-                  target="_blank"
-                >
+                <a href="https://galtinn.neuf.no/" target="_blank">
                   <span>Mitt medlemskap</span>&nbsp;
                   <Icon type="externalLink" />
                 </a>
               </li>
               <li className={styles.search}>
-                <label>
-                  <p>Søk</p>
-                  <input type="text" onKeyDown={handleSearch} placeholder="Søk" />
-                  <div className={styles.searchIcon}><Icon type="search" /></div>
-                </label>
+                <label htmlFor="search" className="sr-only">Søk</label>
+                <input
+                  name="search"
+                  type="text"
+                  onKeyDown={handleSearch}
+                  placeholder="Søk"
+                />
+                <div className={styles.searchIcon}>
+                  <Icon type="search" />
+                </div>
               </li>
             </ul>
           </div>