From 6565303cb510914d207cee1999b4b7a62a271db5 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Sun, 25 Oct 2020 12:23:07 -0300
Subject: [PATCH] a11y pass

---
 components/core/Navbar/Navbar.tsx       |  2 +-
 components/core/Searchbar/Searchbar.tsx |  7 ++++---
 components/ui/Hero/Hero.tsx             | 12 +++++++-----
 3 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/components/core/Navbar/Navbar.tsx b/components/core/Navbar/Navbar.tsx
index eb380cb8c..1c75d38b0 100644
--- a/components/core/Navbar/Navbar.tsx
+++ b/components/core/Navbar/Navbar.tsx
@@ -42,7 +42,7 @@ const Navbar: FC<Props> = ({ className }) => {
       </div>
 
       <div className="flex pb-4 lg:px-6 lg:hidden">
-        <Searchbar />
+        <Searchbar id="mobileSearch" />
       </div>
     </div>
   )
diff --git a/components/core/Searchbar/Searchbar.tsx b/components/core/Searchbar/Searchbar.tsx
index b807e10db..e405a34aa 100644
--- a/components/core/Searchbar/Searchbar.tsx
+++ b/components/core/Searchbar/Searchbar.tsx
@@ -5,9 +5,10 @@ import { useRouter } from 'next/router'
 
 interface Props {
   className?: string
+  id?: string
 }
 
-const Searchbar: FC<Props> = ({ className }) => {
+const Searchbar: FC<Props> = ({ className, id = 'search' }) => {
   const router = useRouter()
 
   useEffect(() => {
@@ -16,14 +17,14 @@ const Searchbar: FC<Props> = ({ className }) => {
 
   return (
     <label
-      htmlFor="search"
+      htmlFor={id}
       className={cn(
         'relative text-sm bg-accents-1 text-base w-full transition-colors duration-150',
         className
       )}
     >
       <input
-        id="search"
+        id={id}
         className={s.input}
         placeholder="Search for products..."
         defaultValue={router.query.q}
diff --git a/components/ui/Hero/Hero.tsx b/components/ui/Hero/Hero.tsx
index 125212afa..cb45350bc 100644
--- a/components/ui/Hero/Hero.tsx
+++ b/components/ui/Hero/Hero.tsx
@@ -2,7 +2,7 @@ import React, { FC } from 'react'
 import { Container } from '@components/ui'
 import { RightArrow } from '@components/icon'
 import s from './Hero.module.css'
-
+import Link from 'next/link'
 interface Props {
   className?: string
   headline: string
@@ -21,10 +21,12 @@ const Hero: FC<Props> = ({ headline, description }) => {
             <p className="mt-5 text-xl leading-7 text-accent-2 text-white">
               {description}
             </p>
-            <a className="text-white pt-3 font-bold hover:underline flex flex-row cursor-pointer w-max-content">
-              <span>Read it here</span>
-              <RightArrow width="20" heigh="20" className="ml-1" />
-            </a>
+            <Link href="/blog">
+              <a className="text-white pt-3 font-bold hover:underline flex flex-row cursor-pointer w-max-content">
+                Read it here
+                <RightArrow width="20" heigh="20" className="ml-1" />
+              </a>
+            </Link>
           </div>
         </div>
       </Container>