4
0
forked from crowetic/commerce

a11y pass

This commit is contained in:
Belen Curcio 2020-10-25 12:23:07 -03:00
parent 3cdd921a10
commit 6565303cb5
3 changed files with 12 additions and 9 deletions

View File

@ -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>
)

View File

@ -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}

View File

@ -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>