crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-06-18 21:21:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

add aria-label to ProductCard's anchor tag

Browse Source 
Without an aria-label it is unclear for what text to be read in this situation. macOS's voiceover reads all contents of the ProductCard which is quite confusing on multiple levels
This commit is contained in:
Brendan Offer 2021-04-12 21:08:29 -04:00
parent 1c3bd853fb
commit 1f5a65086f
1 changed files with 4 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
components/product/ProductCard/ProductCard.tsx
View File

@ -23,7 +23,10 @@ const ProductCard: FC<Props> = ({
...props
}) => (
<Link href={`/product/${product.slug}`} {...props}>
<a className={cn(s.root, { [s.simple]: variant === 'simple' }, className)}>
<a
aria-label={product.name}
className={cn(s.root, { [s.simple]: variant === 'simple' }, className)}
>
{variant === 'slim' ? (
<div className="relative overflow-hidden box-border">
<div className="absolute inset-0 flex items-center justify-end mr-8 z-20">