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

@@ -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()

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