cx/commerce
4
0
Fork 0
forked from crowetic/commerce
Code Pull Requests Activity

a11y pass

Browse Source
This commit is contained in:
Belen Curcio 2020-10-25 13:13:01 -03:00
parent 44f5c70b7b
commit 273569675c
1 changed files with 24 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
components/core/Searchbar/Searchbar.tsx
View File

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