From af9eba0b609294ca287dcc32fac2777a4b9aa4e9 Mon Sep 17 00:00:00 2001
From: Jonas Braathen <jonas@ponas.no>
Date: Sat, 10 Aug 2024 14:34:30 +0200
Subject: [PATCH] hide search input label, only visible to screen readers

---
 web/src/components/layout/Header.tsx | 20 +++++++++++---------
 web/src/css/base.scss                | 13 ++++++++++++-
 2 files changed, 23 insertions(+), 10 deletions(-)

diff --git a/web/src/components/layout/Header.tsx b/web/src/components/layout/Header.tsx
index 44e2800..04b86e0 100644
--- a/web/src/components/layout/Header.tsx
+++ b/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>
diff --git a/web/src/css/base.scss b/web/src/css/base.scss
index e3b4bcd..54a740f 100644
--- a/web/src/css/base.scss
+++ b/web/src/css/base.scss
@@ -346,4 +346,15 @@ select {
 
 .accordion .blockContent {
   padding-bottom: 0;
-}
\ No newline at end of file
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}