From f2997c251988411e3d233e0de84584b441c875f0 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Sun, 25 Oct 2020 10:57:59 -0300
Subject: [PATCH] a11y pass

---
 components/cart/CartItem/CartItem.tsx              | 1 +
 components/product/ProductCard/ProductCard.tsx     | 2 ++
 components/product/ProductSlider/ProductSlider.tsx | 8 +++++++-
 components/product/ProductView/ProductView.tsx     | 2 ++
 components/product/Swatch/Swatch.tsx               | 1 +
 5 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/components/cart/CartItem/CartItem.tsx b/components/cart/CartItem/CartItem.tsx
index bc74812e0..258eb5f9f 100644
--- a/components/cart/CartItem/CartItem.tsx
+++ b/components/cart/CartItem/CartItem.tsx
@@ -63,6 +63,7 @@ const CartItem = ({
           src={item.image_url}
           width={150}
           height={150}
+          alt="Product Image"
           // The cart item image is already optimized and very small in size
           unoptimized
         />
diff --git a/components/product/ProductCard/ProductCard.tsx b/components/product/ProductCard/ProductCard.tsx
index b37d7ca67..0274fbc30 100644
--- a/components/product/ProductCard/ProductCard.tsx
+++ b/components/product/ProductCard/ProductCard.tsx
@@ -36,6 +36,7 @@ const ProductCard: FC<Props> = ({
         </div>
         <Image
           src={src}
+          alt={p.name}
           width={imgWidth}
           height={imgHeight}
           priority={priority}
@@ -64,6 +65,7 @@ const ProductCard: FC<Props> = ({
         </div>
         <div className={cn(s.imageContainer)}>
           <Image
+            alt={p.name}
             className={cn('w-full object-cover', s['product-image'])}
             src={src}
             width={imgWidth}
diff --git a/components/product/ProductSlider/ProductSlider.tsx b/components/product/ProductSlider/ProductSlider.tsx
index 15c43e8c8..6a8b7783e 100644
--- a/components/product/ProductSlider/ProductSlider.tsx
+++ b/components/product/ProductSlider/ProductSlider.tsx
@@ -19,10 +19,15 @@ const ProductSlider: FC = ({ children }) => {
 
   return (
     <div className={s.root}>
-      <button className={cn(s.leftControl, s.control)} onClick={slider?.prev} />
+      <button
+        className={cn(s.leftControl, s.control)}
+        onClick={slider?.prev}
+        aria-label="Previous Product Image"
+      />
       <button
         className={cn(s.rightControl, s.control)}
         onClick={slider?.next}
+        aria-label="Next Product Image"
       />
       <div
         ref={ref}
@@ -50,6 +55,7 @@ const ProductSlider: FC = ({ children }) => {
           {[...Array(slider.details().size).keys()].map((idx) => {
             return (
               <button
+                aria-label="Position indicator"
                 key={idx}
                 className={cn(s.positionIndicator, {
                   [s.positionIndicatorActive]: currentSlide === idx,
diff --git a/components/product/ProductView/ProductView.tsx b/components/product/ProductView/ProductView.tsx
index 20f9f833e..e2135852f 100644
--- a/components/product/ProductView/ProductView.tsx
+++ b/components/product/ProductView/ProductView.tsx
@@ -80,6 +80,7 @@ const ProductView: FC<Props> = ({ product, className }) => {
               {product.images.edges?.map((image, i) => (
                 <div key={image?.node.urlXL} className={s.imageContainer}>
                   <Image
+                    alt={product.name}
                     className={s.img}
                     src={image?.node.urlXL!}
                     width={1050}
@@ -131,6 +132,7 @@ const ProductView: FC<Props> = ({ product, className }) => {
           </section>
           <div>
             <Button
+              aria-label="Add to Cart"
               type="button"
               className={s.button}
               onClick={addToCart}
diff --git a/components/product/Swatch/Swatch.tsx b/components/product/Swatch/Swatch.tsx
index b68b4fbf3..e12421c41 100644
--- a/components/product/Swatch/Swatch.tsx
+++ b/components/product/Swatch/Swatch.tsx
@@ -39,6 +39,7 @@ const Swatch: FC<Props & ButtonProps> = ({
     <Button
       className={rootClassName}
       style={color ? { backgroundColor: color } : {}}
+      aria-label="Variant Swatch"
       {...props}
     >
       {variant === 'color' && active && (