From 96e990268db6f2f00bea7d52d08da03f32937e6a Mon Sep 17 00:00:00 2001
From: Gonzalo Pozzo <gonzalo.pozzo4@gmail.com>
Date: Wed, 24 Nov 2021 14:29:55 -0300
Subject: [PATCH] Add aria attributes (#580)

---
 components/common/UserNav/UserNav.tsx                | 2 +-
 components/product/ProductCard/ProductCard.tsx       | 2 +-
 components/product/ProductOptions/ProductOptions.tsx | 2 +-
 components/product/Swatch/Swatch.tsx                 | 4 +++-
 4 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/components/common/UserNav/UserNav.tsx b/components/common/UserNav/UserNav.tsx
index 92df48fc2..a48861df7 100644
--- a/components/common/UserNav/UserNav.tsx
+++ b/components/common/UserNav/UserNav.tsx
@@ -28,7 +28,7 @@ const UserNav: FC<Props> = ({ className }) => {
       <ul className={s.list}>
         {process.env.COMMERCE_CART_ENABLED && (
           <li className={s.item}>
-            <Button className={s.item} variant="naked" onClick={toggleSidebar} aria-label="Cart">
+            <Button className={s.item} variant="naked" onClick={toggleSidebar} aria-label={`Cart items: ${itemsCount}`}>
               <Bag />
               {itemsCount > 0 && <span className={s.bagCount}>{itemsCount}</span>}
             </Button>
diff --git a/components/product/ProductCard/ProductCard.tsx b/components/product/ProductCard/ProductCard.tsx
index 703bf56b2..96e2382cb 100644
--- a/components/product/ProductCard/ProductCard.tsx
+++ b/components/product/ProductCard/ProductCard.tsx
@@ -39,7 +39,7 @@ const ProductCard: FC<Props> = ({
 
   return (
     <Link href={`/product/${product.slug}`}>
-      <a className={rootClassName}>
+      <a className={rootClassName} aria-label={product.name}>
         {variant === 'slim' && (
           <>
             <div className={s.header}>
diff --git a/components/product/ProductOptions/ProductOptions.tsx b/components/product/ProductOptions/ProductOptions.tsx
index 456df4bfc..15c229edb 100644
--- a/components/product/ProductOptions/ProductOptions.tsx
+++ b/components/product/ProductOptions/ProductOptions.tsx
@@ -21,7 +21,7 @@ const ProductOptions: React.FC<ProductOptionsProps> = ({
           <h2 className="uppercase font-medium text-sm tracking-wide">
             {opt.displayName}
           </h2>
-          <div className="flex flex-row py-4">
+          <div role="listbox" className="flex flex-row py-4">
             {opt.values.map((v, i: number) => {
               const active = selectedOptions[opt.displayName.toLowerCase()]
               return (
diff --git a/components/product/Swatch/Swatch.tsx b/components/product/Swatch/Swatch.tsx
index d04e77a78..d78142bab 100644
--- a/components/product/Swatch/Swatch.tsx
+++ b/components/product/Swatch/Swatch.tsx
@@ -42,7 +42,9 @@ const Swatch: React.FC<Omit<ButtonProps, 'variant'> & SwatchProps> = React.memo(
 
     return (
       <Button
-        aria-label="Variant Swatch"
+        role="option"
+        aria-selected={active}
+        aria-label={(variant && label) ? `${variant} ${label}` : "Variant Swatch"}
         className={swatchClassName}
         {...(label && color && { title: label })}
         style={color ? { backgroundColor: color } : {}}