From c91ea6c1db30afd22dd560ad176259fd41b802d9 Mon Sep 17 00:00:00 2001
From: glo82145 <glo82145@adobe.com>
Date: Fri, 2 Sep 2022 13:35:28 +0530
Subject: [PATCH 1/7] AC-2492::Missing visual text label for buttons

---
 .../__tests__/__snapshots__/swatch.spec.js.snap           | 6 ++++++
 .../__tests__/__snapshots__/swatchList.spec.js.snap       | 1 +
 packages/venia-ui/lib/components/ProductOptions/option.js | 1 +
 packages/venia-ui/lib/components/ProductOptions/swatch.js | 8 ++++++--
 .../venia-ui/lib/components/ProductOptions/swatchList.js  | 4 +++-
 5 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/packages/venia-ui/lib/components/ProductOptions/__tests__/__snapshots__/swatch.spec.js.snap b/packages/venia-ui/lib/components/ProductOptions/__tests__/__snapshots__/swatch.spec.js.snap
index 5bdb8560ca..cb91d2d71c 100644
--- a/packages/venia-ui/lib/components/ProductOptions/__tests__/__snapshots__/swatch.spec.js.snap
+++ b/packages/venia-ui/lib/components/ProductOptions/__tests__/__snapshots__/swatch.spec.js.snap
@@ -2,6 +2,7 @@
 
 exports[`appends "_focused" to className if hasFocus is true 1`] = `
 <button
+  aria-label="undefined's option red "
   className="root_focused"
   onClick={[Function]}
   style={
@@ -37,6 +38,7 @@ exports[`appends "_focused" to className if hasFocus is true 1`] = `
 
 exports[`appends "_outOfStock" to className if isEverythingOutOfStock is true 1`] = `
 <button
+  aria-label="undefined's option red "
   className="root_outOfStock"
   disabled={true}
   onClick={[Function]}
@@ -73,6 +75,7 @@ exports[`appends "_outOfStock" to className if isEverythingOutOfStock is true 1`
 
 exports[`appends "_outOfStock" to className if isOptionOutOfStock is true 1`] = `
 <button
+  aria-label="undefined's option red "
   className="root_outOfStock"
   disabled={true}
   onClick={[Function]}
@@ -88,6 +91,7 @@ exports[`appends "_outOfStock" to className if isOptionOutOfStock is true 1`] =
 
 exports[`appends "_selected" to className if isSelected is true 1`] = `
 <button
+  aria-label="undefined's option red Selected"
   className="root_selected"
   onClick={[Function]}
   style={
@@ -123,6 +127,7 @@ exports[`appends "_selected" to className if isSelected is true 1`] = `
 
 exports[`renders a Swatch correctly 1`] = `
 <button
+  aria-label="undefined's option red "
   className="root"
   onClick={[Function]}
   style={
@@ -158,6 +163,7 @@ exports[`renders a Swatch correctly 1`] = `
 
 exports[`renders an icon if isSelected is true 1`] = `
 <button
+  aria-label="undefined's option red Selected"
   className="root_selected"
   onClick={[Function]}
   style={
diff --git a/packages/venia-ui/lib/components/ProductOptions/__tests__/__snapshots__/swatchList.spec.js.snap b/packages/venia-ui/lib/components/ProductOptions/__tests__/__snapshots__/swatchList.spec.js.snap
index 121c494045..11053c9cdf 100644
--- a/packages/venia-ui/lib/components/ProductOptions/__tests__/__snapshots__/swatchList.spec.js.snap
+++ b/packages/venia-ui/lib/components/ProductOptions/__tests__/__snapshots__/swatchList.spec.js.snap
@@ -5,6 +5,7 @@ exports[`renders SwatchList component correctly 1`] = `
   className="root"
 >
   <button
+    aria-label="undefined's option foo "
     className="root"
     onClick={[Function]}
     style={
diff --git a/packages/venia-ui/lib/components/ProductOptions/option.js b/packages/venia-ui/lib/components/ProductOptions/option.js
index 98f7edb822..977111ff45 100644
--- a/packages/venia-ui/lib/components/ProductOptions/option.js
+++ b/packages/venia-ui/lib/components/ProductOptions/option.js
@@ -70,6 +70,7 @@ const Option = props => {
                 onSelectionChange={handleSelectionChange}
                 isEverythingOutOfStock={isEverythingOutOfStock}
                 outOfStockVariants={outOfStockVariants}
+                attributeLabel={label}
             />
             <dl className={classes.selection}>
                 <dt
diff --git a/packages/venia-ui/lib/components/ProductOptions/swatch.js b/packages/venia-ui/lib/components/ProductOptions/swatch.js
index 3be2cac7fd..4073ae9a12 100644
--- a/packages/venia-ui/lib/components/ProductOptions/swatch.js
+++ b/packages/venia-ui/lib/components/ProductOptions/swatch.js
@@ -40,7 +40,8 @@ const Swatch = props => {
         onClick,
         style,
         isEverythingOutOfStock,
-        isOptionOutOfStock
+        isOptionOutOfStock,
+        attributeLabel
     } = props;
 
     const talonProps = useSwatch({
@@ -83,7 +84,8 @@ const Swatch = props => {
             '--venia-swatch-bg': swatchValue
         });
     }
-
+    const selectedText = isSelected ? 'Selected' : '';
+    const ariaLabel = `${attributeLabel}'s option ${label} ${selectedText}`
     const className =
         classes[
             getClassName(
@@ -104,6 +106,8 @@ const Swatch = props => {
             type="button"
             data-cy="Swatch-root"
             disabled={isEverythingOutOfStock || isOptionOutOfStock}
+            aria-label={ariaLabel}
+            
         >
             {!isOptionOutOfStock && (
                 <Icon classes={{ root: checkStyle }} src={CheckIcon} />
diff --git a/packages/venia-ui/lib/components/ProductOptions/swatchList.js b/packages/venia-ui/lib/components/ProductOptions/swatchList.js
index f138992ec2..3c8071a8ef 100644
--- a/packages/venia-ui/lib/components/ProductOptions/swatchList.js
+++ b/packages/venia-ui/lib/components/ProductOptions/swatchList.js
@@ -12,7 +12,8 @@ const SwatchList = props => {
         items,
         onSelectionChange,
         isEverythingOutOfStock,
-        outOfStockVariants
+        outOfStockVariants,
+        attributeLabel
     } = props;
 
     const classes = useStyle(defaultClasses, props.classes);
@@ -35,6 +36,7 @@ const SwatchList = props => {
                         onClick={onSelectionChange}
                         isEverythingOutOfStock={isEverythingOutOfStock}
                         isOptionOutOfStock={isOptionOutOfStock}
+                        attributeLabel={attributeLabel}
                     />
                 );
             }),

From 1b4437bd4bb516e9cfc0a0c01b8adbb59723eb7b Mon Sep 17 00:00:00 2001
From: glo82145 <glo82145@adobe.com>
Date: Fri, 2 Sep 2022 14:17:22 +0530
Subject: [PATCH 2/7] AC-2492::Missing visual text label for buttons

---
 .../__tests__/__snapshots__/swatch.spec.js.snap      | 12 ++++++------
 .../__tests__/__snapshots__/swatchList.spec.js.snap  |  2 +-
 .../venia-ui/lib/components/ProductOptions/swatch.js |  2 +-
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/venia-ui/lib/components/ProductOptions/__tests__/__snapshots__/swatch.spec.js.snap b/packages/venia-ui/lib/components/ProductOptions/__tests__/__snapshots__/swatch.spec.js.snap
index cb91d2d71c..99b84080da 100644
--- a/packages/venia-ui/lib/components/ProductOptions/__tests__/__snapshots__/swatch.spec.js.snap
+++ b/packages/venia-ui/lib/components/ProductOptions/__tests__/__snapshots__/swatch.spec.js.snap
@@ -2,7 +2,7 @@
 
 exports[`appends "_focused" to className if hasFocus is true 1`] = `
 <button
-  aria-label="undefined's option red "
+  aria-label="undefined's  option red"
   className="root_focused"
   onClick={[Function]}
   style={
@@ -38,7 +38,7 @@ exports[`appends "_focused" to className if hasFocus is true 1`] = `
 
 exports[`appends "_outOfStock" to className if isEverythingOutOfStock is true 1`] = `
 <button
-  aria-label="undefined's option red "
+  aria-label="undefined's  option red"
   className="root_outOfStock"
   disabled={true}
   onClick={[Function]}
@@ -75,7 +75,7 @@ exports[`appends "_outOfStock" to className if isEverythingOutOfStock is true 1`
 
 exports[`appends "_outOfStock" to className if isOptionOutOfStock is true 1`] = `
 <button
-  aria-label="undefined's option red "
+  aria-label="undefined's  option red"
   className="root_outOfStock"
   disabled={true}
   onClick={[Function]}
@@ -91,7 +91,7 @@ exports[`appends "_outOfStock" to className if isOptionOutOfStock is true 1`] =
 
 exports[`appends "_selected" to className if isSelected is true 1`] = `
 <button
-  aria-label="undefined's option red Selected"
+  aria-label="undefined's Selected option red"
   className="root_selected"
   onClick={[Function]}
   style={
@@ -127,7 +127,7 @@ exports[`appends "_selected" to className if isSelected is true 1`] = `
 
 exports[`renders a Swatch correctly 1`] = `
 <button
-  aria-label="undefined's option red "
+  aria-label="undefined's  option red"
   className="root"
   onClick={[Function]}
   style={
@@ -163,7 +163,7 @@ exports[`renders a Swatch correctly 1`] = `
 
 exports[`renders an icon if isSelected is true 1`] = `
 <button
-  aria-label="undefined's option red Selected"
+  aria-label="undefined's Selected option red"
   className="root_selected"
   onClick={[Function]}
   style={
diff --git a/packages/venia-ui/lib/components/ProductOptions/__tests__/__snapshots__/swatchList.spec.js.snap b/packages/venia-ui/lib/components/ProductOptions/__tests__/__snapshots__/swatchList.spec.js.snap
index 11053c9cdf..3960b6fcf2 100644
--- a/packages/venia-ui/lib/components/ProductOptions/__tests__/__snapshots__/swatchList.spec.js.snap
+++ b/packages/venia-ui/lib/components/ProductOptions/__tests__/__snapshots__/swatchList.spec.js.snap
@@ -5,7 +5,7 @@ exports[`renders SwatchList component correctly 1`] = `
   className="root"
 >
   <button
-    aria-label="undefined's option foo "
+    aria-label="undefined's  option foo"
     className="root"
     onClick={[Function]}
     style={
diff --git a/packages/venia-ui/lib/components/ProductOptions/swatch.js b/packages/venia-ui/lib/components/ProductOptions/swatch.js
index 4073ae9a12..a7eb060a1c 100644
--- a/packages/venia-ui/lib/components/ProductOptions/swatch.js
+++ b/packages/venia-ui/lib/components/ProductOptions/swatch.js
@@ -85,7 +85,7 @@ const Swatch = props => {
         });
     }
     const selectedText = isSelected ? 'Selected' : '';
-    const ariaLabel = `${attributeLabel}'s option ${label} ${selectedText}`
+    const ariaLabel = `${attributeLabel}'s ${selectedText} option ${label}`
     const className =
         classes[
             getClassName(

From 72da4e1662e8b6bdf63580525157570595fd6430 Mon Sep 17 00:00:00 2001
From: glo82145 <glo82145@adobe.com>
Date: Fri, 2 Sep 2022 14:36:24 +0530
Subject: [PATCH 3/7] AC-2492::added lint and preetier command feedabck

---
 packages/venia-ui/lib/components/ProductOptions/swatch.js     | 3 +--
 packages/venia-ui/lib/components/ProductOptions/swatchList.js | 3 ++-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/venia-ui/lib/components/ProductOptions/swatch.js b/packages/venia-ui/lib/components/ProductOptions/swatch.js
index a7eb060a1c..5427161d93 100644
--- a/packages/venia-ui/lib/components/ProductOptions/swatch.js
+++ b/packages/venia-ui/lib/components/ProductOptions/swatch.js
@@ -85,7 +85,7 @@ const Swatch = props => {
         });
     }
     const selectedText = isSelected ? 'Selected' : '';
-    const ariaLabel = `${attributeLabel}'s ${selectedText} option ${label}`
+    const ariaLabel = `${attributeLabel}'s ${selectedText} option ${label}`;
     const className =
         classes[
             getClassName(
@@ -107,7 +107,6 @@ const Swatch = props => {
             data-cy="Swatch-root"
             disabled={isEverythingOutOfStock || isOptionOutOfStock}
             aria-label={ariaLabel}
-            
         >
             {!isOptionOutOfStock && (
                 <Icon classes={{ root: checkStyle }} src={CheckIcon} />
diff --git a/packages/venia-ui/lib/components/ProductOptions/swatchList.js b/packages/venia-ui/lib/components/ProductOptions/swatchList.js
index 3c8071a8ef..5574179473 100644
--- a/packages/venia-ui/lib/components/ProductOptions/swatchList.js
+++ b/packages/venia-ui/lib/components/ProductOptions/swatchList.js
@@ -46,7 +46,8 @@ const SwatchList = props => {
             items,
             onSelectionChange,
             isEverythingOutOfStock,
-            outOfStockVariants
+            outOfStockVariants,
+            attributeLabel
         ]
     );
 

From 458b1007de7c4d7757db8239652d8c4fa0558e76 Mon Sep 17 00:00:00 2001
From: glo82145 <glo82145@adobe.com>
Date: Wed, 9 Nov 2022 15:44:26 +0530
Subject: [PATCH 4/7] AC-2492::made changes according to thr PR comment

---
 .../__tests__/__snapshots__/swatch.spec.js.snap      | 12 ++++++------
 .../ProductOptions/__tests__/swatch.spec.js          |  3 ++-
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/packages/venia-ui/lib/components/ProductOptions/__tests__/__snapshots__/swatch.spec.js.snap b/packages/venia-ui/lib/components/ProductOptions/__tests__/__snapshots__/swatch.spec.js.snap
index 99b84080da..dec380f1af 100644
--- a/packages/venia-ui/lib/components/ProductOptions/__tests__/__snapshots__/swatch.spec.js.snap
+++ b/packages/venia-ui/lib/components/ProductOptions/__tests__/__snapshots__/swatch.spec.js.snap
@@ -2,7 +2,7 @@
 
 exports[`appends "_focused" to className if hasFocus is true 1`] = `
 <button
-  aria-label="undefined's  option red"
+  aria-label="Color's  option red"
   className="root_focused"
   onClick={[Function]}
   style={
@@ -38,7 +38,7 @@ exports[`appends "_focused" to className if hasFocus is true 1`] = `
 
 exports[`appends "_outOfStock" to className if isEverythingOutOfStock is true 1`] = `
 <button
-  aria-label="undefined's  option red"
+  aria-label="Color's  option red"
   className="root_outOfStock"
   disabled={true}
   onClick={[Function]}
@@ -75,7 +75,7 @@ exports[`appends "_outOfStock" to className if isEverythingOutOfStock is true 1`
 
 exports[`appends "_outOfStock" to className if isOptionOutOfStock is true 1`] = `
 <button
-  aria-label="undefined's  option red"
+  aria-label="Color's  option red"
   className="root_outOfStock"
   disabled={true}
   onClick={[Function]}
@@ -91,7 +91,7 @@ exports[`appends "_outOfStock" to className if isOptionOutOfStock is true 1`] =
 
 exports[`appends "_selected" to className if isSelected is true 1`] = `
 <button
-  aria-label="undefined's Selected option red"
+  aria-label="Color's Selected option red"
   className="root_selected"
   onClick={[Function]}
   style={
@@ -127,7 +127,7 @@ exports[`appends "_selected" to className if isSelected is true 1`] = `
 
 exports[`renders a Swatch correctly 1`] = `
 <button
-  aria-label="undefined's  option red"
+  aria-label="Color's  option red"
   className="root"
   onClick={[Function]}
   style={
@@ -163,7 +163,7 @@ exports[`renders a Swatch correctly 1`] = `
 
 exports[`renders an icon if isSelected is true 1`] = `
 <button
-  aria-label="undefined's Selected option red"
+  aria-label="Color's Selected option red"
   className="root_selected"
   onClick={[Function]}
   style={
diff --git a/packages/venia-ui/lib/components/ProductOptions/__tests__/swatch.spec.js b/packages/venia-ui/lib/components/ProductOptions/__tests__/swatch.spec.js
index a1292aed13..f32e1a2b75 100644
--- a/packages/venia-ui/lib/components/ProductOptions/__tests__/swatch.spec.js
+++ b/packages/venia-ui/lib/components/ProductOptions/__tests__/swatch.spec.js
@@ -14,7 +14,8 @@ const defaultProps = {
         swatch_data: {
             value: '#123123'
         }
-    }
+    },
+    attributeLabel : "Color"
 };
 
 test('renders a Swatch correctly', () => {

From 846910bc9afd23ebf49198121d22249a43520a46 Mon Sep 17 00:00:00 2001
From: glo82145 <glo82145@adobe.com>
Date: Wed, 9 Nov 2022 16:17:39 +0530
Subject: [PATCH 5/7] AC-2492::run yarn prettier on swatch.spec.js

---
 .../lib/components/ProductOptions/__tests__/swatch.spec.js      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/venia-ui/lib/components/ProductOptions/__tests__/swatch.spec.js b/packages/venia-ui/lib/components/ProductOptions/__tests__/swatch.spec.js
index f32e1a2b75..c4d149e131 100644
--- a/packages/venia-ui/lib/components/ProductOptions/__tests__/swatch.spec.js
+++ b/packages/venia-ui/lib/components/ProductOptions/__tests__/swatch.spec.js
@@ -15,7 +15,7 @@ const defaultProps = {
             value: '#123123'
         }
     },
-    attributeLabel : "Color"
+    attributeLabel: 'Color'
 };
 
 test('renders a Swatch correctly', () => {

From a56cd2b0a3319de4dd4378bdb1454093cd3b85bc Mon Sep 17 00:00:00 2001
From: glo82145 <glo82145@adobe.com>
Date: Wed, 9 Nov 2022 16:28:56 +0530
Subject: [PATCH 6/7] AC-2492::run yarn prettier on swatch.spec.js

---
 .../__tests__/useCustomerWishlistSkus.spec.js                    | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/peregrine/lib/hooks/useCustomerWishlistSkus/__tests__/useCustomerWishlistSkus.spec.js b/packages/peregrine/lib/hooks/useCustomerWishlistSkus/__tests__/useCustomerWishlistSkus.spec.js
index 5b08e766d1..9afb2c60bb 100644
--- a/packages/peregrine/lib/hooks/useCustomerWishlistSkus/__tests__/useCustomerWishlistSkus.spec.js
+++ b/packages/peregrine/lib/hooks/useCustomerWishlistSkus/__tests__/useCustomerWishlistSkus.spec.js
@@ -49,7 +49,6 @@ test('pre-caches wishlist items', async () => {
         Object {
           "customerWishlistProducts": Array [
             "Dress",
-            "Shirt",
           ],
         }
     `);

From 24f6c1151a33ac92051da37619ef88f925284ac0 Mon Sep 17 00:00:00 2001
From: glo82145 <glo82145@adobe.com>
Date: Thu, 10 Nov 2022 12:26:09 +0530
Subject: [PATCH 7/7] AC-2492::run yarn prettier on swatch.spec.js

---
 .../__tests__/useCustomerWishlistSkus.spec.js                    | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/peregrine/lib/hooks/useCustomerWishlistSkus/__tests__/useCustomerWishlistSkus.spec.js b/packages/peregrine/lib/hooks/useCustomerWishlistSkus/__tests__/useCustomerWishlistSkus.spec.js
index 9afb2c60bb..5b08e766d1 100644
--- a/packages/peregrine/lib/hooks/useCustomerWishlistSkus/__tests__/useCustomerWishlistSkus.spec.js
+++ b/packages/peregrine/lib/hooks/useCustomerWishlistSkus/__tests__/useCustomerWishlistSkus.spec.js
@@ -49,6 +49,7 @@ test('pre-caches wishlist items', async () => {
         Object {
           "customerWishlistProducts": Array [
             "Dress",
+            "Shirt",
           ],
         }
     `);