From 42b6d91909239c636ab57ef6ad3ed7feaf4b5b05 Mon Sep 17 00:00:00 2001
From: Aanchal Pawar <97873570+glo82145@users.noreply.github.com>
Date: Fri, 11 Nov 2022 23:44:14 +0530
Subject: [PATCH] AC-2492::Missing visual text label for buttons (#3952)

* AC-2492::Missing visual text label for buttons

* AC-2492::Missing visual text label for buttons

* AC-2492::added lint and preetier command feedabck

* AC-2492::made changes according to thr PR comment

* AC-2492::run yarn prettier on swatch.spec.js

* AC-2492::run yarn prettier on swatch.spec.js

* AC-2492::run yarn prettier on swatch.spec.js

Co-authored-by: James Calcaben <jcalcaben@users.noreply.github.com>
Co-authored-by: Devagouda <40405790+dpatil-magento@users.noreply.github.com>
---
 .../__tests__/__snapshots__/swatch.spec.js.snap            | 6 ++++++
 .../__tests__/__snapshots__/swatchList.spec.js.snap        | 1 +
 .../lib/components/ProductOptions/__tests__/swatch.spec.js | 3 ++-
 packages/venia-ui/lib/components/ProductOptions/option.js  | 1 +
 packages/venia-ui/lib/components/ProductOptions/swatch.js  | 7 +++++--
 .../venia-ui/lib/components/ProductOptions/swatchList.js   | 7 +++++--
 6 files changed, 20 insertions(+), 5 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..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,6 +2,7 @@
 
 exports[`appends "_focused" to className if hasFocus is true 1`] = `
 <button
+  aria-label="Color'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="Color'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="Color'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="Color's Selected option red"
   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="Color'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="Color'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 121c494045..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,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/__tests__/swatch.spec.js b/packages/venia-ui/lib/components/ProductOptions/__tests__/swatch.spec.js
index a1292aed13..c4d149e131 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', () => {
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..5427161d93 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 ${selectedText} option ${label}`;
     const className =
         classes[
             getClassName(
@@ -104,6 +106,7 @@ 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..5574179473 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}
                     />
                 );
             }),
@@ -44,7 +46,8 @@ const SwatchList = props => {
             items,
             onSelectionChange,
             isEverythingOutOfStock,
-            outOfStockVariants
+            outOfStockVariants,
+            attributeLabel
         ]
     );