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>
magento · Nov 11, 2022 · 42b6d91 · 42b6d91
1 parent 170e66c
commit 42b6d91
Show file tree

Hide file tree

Showing 6 changed files with 20 additions and 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
@@ -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/...es/venia-ui/lib/components/ProductOptions/__tests__/__snapshots__/swatchList.spec.js.snap b/...es/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
@@ -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
@@ -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
@@ -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
@@ -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
         ]
     );