From 273569675c3716e5dbae37e1877b9deba125ba66 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Sun, 25 Oct 2020 13:13:01 -0300
Subject: [PATCH] a11y pass

---
 components/core/Searchbar/Searchbar.tsx | 47 +++++++++++++------------
 1 file changed, 24 insertions(+), 23 deletions(-)

diff --git a/components/core/Searchbar/Searchbar.tsx b/components/core/Searchbar/Searchbar.tsx
index e405a34aa..d598eba84 100644
--- a/components/core/Searchbar/Searchbar.tsx
+++ b/components/core/Searchbar/Searchbar.tsx
@@ -16,35 +16,36 @@ const Searchbar: FC<Props> = ({ className, id = 'search' }) => {
   }, [])
 
   return (
-    <label
-      htmlFor={id}
+    <div
       className={cn(
         'relative text-sm bg-accents-1 text-base w-full transition-colors duration-150',
         className
       )}
     >
-      <input
-        id={id}
-        className={s.input}
-        placeholder="Search for products..."
-        defaultValue={router.query.q}
-        onKeyUp={(e) => {
-          e.preventDefault()
+      <label htmlFor={id}>
+        <input
+          id={id}
+          className={s.input}
+          placeholder="Search for products..."
+          defaultValue={router.query.q}
+          onKeyUp={(e) => {
+            e.preventDefault()
 
-          if (e.key === 'Enter') {
-            const q = e.currentTarget.value
+            if (e.key === 'Enter') {
+              const q = e.currentTarget.value
 
-            router.push(
-              {
-                pathname: `/search`,
-                query: q ? { q } : {},
-              },
-              undefined,
-              { shallow: true }
-            )
-          }
-        }}
-      />
+              router.push(
+                {
+                  pathname: `/search`,
+                  query: q ? { q } : {},
+                },
+                undefined,
+                { shallow: true }
+              )
+            }
+          }}
+        />
+      </label>
       <div className={s.iconContainer}>
         <svg className={s.icon} fill="currentColor" viewBox="0 0 20 20">
           <path
@@ -54,7 +55,7 @@ const Searchbar: FC<Props> = ({ className, id = 'search' }) => {
           />
         </svg>
       </div>
-    </label>
+    </div>
   )
 }