a11y pass

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
         />

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}

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,

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}

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 && (