forked from crowetic/commerce
a11y pass
This commit is contained in:
parent
44f5c70b7b
commit
273569675c
@ -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>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
x
Reference in New Issue
Block a user