Add aria attributes (#580)

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>

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

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 (

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 } : {}}