From 1c3bd853fb754f41e29513ff7459c7138eab9eb6 Mon Sep 17 00:00:00 2001
From: Brendan Offer <brendanoffer@gmail.com>
Date: Mon, 12 Apr 2021 20:55:32 -0400
Subject: [PATCH] add roles and aria-selected to the product page's swatches

Currently for a user with a screen reader it would be near impossible to use this page. This change will read clearly what the swatch is and for what group it belongs.
---
 components/product/ProductView/ProductView.tsx | 2 +-
 components/product/Swatch/Swatch.tsx           | 4 +++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/components/product/ProductView/ProductView.tsx b/components/product/ProductView/ProductView.tsx
index c0fdd32d2..7928941e4 100644
--- a/components/product/ProductView/ProductView.tsx
+++ b/components/product/ProductView/ProductView.tsx
@@ -104,7 +104,7 @@ const ProductView: FC<Props> = ({ product }) => {
             {product.options?.map((opt) => (
               <div className="pb-4" key={opt.displayName}>
                 <h2 className="uppercase font-medium">{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 = (choices as any)[
                       opt.displayName.toLowerCase()
diff --git a/components/product/Swatch/Swatch.tsx b/components/product/Swatch/Swatch.tsx
index 34244321f..a53f703c8 100644
--- a/components/product/Swatch/Swatch.tsx
+++ b/components/product/Swatch/Swatch.tsx
@@ -39,7 +39,9 @@ const Swatch: FC<Omit<ButtonProps, 'variant'> & Props> = ({
     <Button
       className={rootClassName}
       style={color ? { backgroundColor: color } : {}}
-      aria-label="Variant Swatch"
+      role="option"
+      aria-label={`${variant} ${label}`}
+      aria-selected={active}
       {...props}
     >
       {variant === 'color' && active && (