From 1f5a65086f4c1d35ac40a6797667d5a35057ac9a Mon Sep 17 00:00:00 2001
From: Brendan Offer <brendanoffer@gmail.com>
Date: Mon, 12 Apr 2021 21:08:29 -0400
Subject: [PATCH] add aria-label to ProductCard's anchor tag

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
---
 components/product/ProductCard/ProductCard.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/components/product/ProductCard/ProductCard.tsx b/components/product/ProductCard/ProductCard.tsx
index ade53380c..45dfeca1b 100644
--- a/components/product/ProductCard/ProductCard.tsx
+++ b/components/product/ProductCard/ProductCard.tsx
@@ -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">