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>

web/src/css/base.scss

@@ -347,3 +347,14 @@ select {
 .accordion .blockContent {
   padding-bottom: 0;
 }
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}