Merge branch 'develop' into PWA-3122

magento · May 19, 2023 · 750f8d5 · 750f8d5
2 parents b815dee + 87358c7
commit 750f8d5
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 3 deletions.
diff --git a/...es/venia-ui/lib/components/MiniCart/ProductList/__tests__/__snapshots__/item.spec.js.snap b/...es/venia-ui/lib/components/MiniCart/ProductList/__tests__/__snapshots__/item.spec.js.snap
@@ -156,6 +156,14 @@ exports[`Should disable delete icon while loading 1`] = `
       </svg>
     </span>
   </button>
+  <span
+    aria-hidden="false"
+    aria-live="polite"
+    className="hide"
+    role="status"
+  >
+    There is only one item left in your cart
+  </span>
 </div>
 `;
 
@@ -315,6 +323,14 @@ exports[`Should render correctly 1`] = `
       </svg>
     </span>
   </button>
+  <span
+    aria-hidden="false"
+    aria-live="polite"
+    className="hide"
+    role="status"
+  >
+    There is only one item left in your cart
+  </span>
 </div>
 `;
 
@@ -474,6 +490,14 @@ exports[`Should render correctly when configured to use variant thumbnail 1`] =
       </svg>
     </span>
   </button>
+  <span
+    aria-hidden="false"
+    aria-live="polite"
+    className="hide"
+    role="status"
+  >
+    There is only one item left in your cart
+  </span>
 </div>
 `;
 
@@ -633,5 +657,13 @@ exports[`Should render correctly with out of stock product 1`] = `
       </svg>
     </span>
   </button>
+  <span
+    aria-hidden="false"
+    aria-live="polite"
+    className="hide"
+    role="status"
+  >
+    There is only one item left in your cart
+  </span>
 </div>
 `;
diff --git a/packages/venia-ui/lib/components/MiniCart/ProductList/item.js b/packages/venia-ui/lib/components/MiniCart/ProductList/item.js
@@ -27,7 +27,8 @@ const Item = props => {
         prices,
         closeMiniCart,
         configurableThumbnailSource,
-        storeUrlSuffix
+        storeUrlSuffix,
+        totalQuantity
     } = props;
 
     const { formatMessage } = useIntl();
@@ -62,6 +63,11 @@ const Item = props => {
     });
     const buttonStatus = isDeleting ? minicartButtonDeleted : miniCartButton;
 
+    const announceCartCount =
+        totalQuantity > 1
+            ? 'There are ' + totalQuantity + ' items left in your cart'
+            : 'There is only one item left in your cart';
+
     return (
         <div className={rootClass} data-cy="MiniCart-Item-root">
             <Link
@@ -133,6 +139,14 @@ const Item = props => {
                     }}
                 />
             </button>
+            <span
+                className={classes.hide}
+                role="status"
+                aria-hidden="false"
+                aria-live="polite"
+            >
+                {announceCartCount}
+            </span>
         </div>
     );
 };

diff --git a/packages/venia-ui/lib/components/MiniCart/ProductList/item.module.css b/packages/venia-ui/lib/components/MiniCart/ProductList/item.module.css
@@ -64,3 +64,9 @@
     grid-column: 3 / span 1;
     grid-row: 1 / span 1;
 }
+
+.hide {
+    visibility: hidden;
+    max-width: 1px;
+    max-height: 1px;
+}
diff --git a/packages/venia-ui/lib/components/MiniCart/ProductList/productList.js b/packages/venia-ui/lib/components/MiniCart/ProductList/productList.js
@@ -13,7 +13,8 @@ const ProductList = props => {
         classes: propClasses,
         closeMiniCart,
         configurableThumbnailSource,
-        storeUrlSuffix
+        storeUrlSuffix,
+        totalQuantity
     } = props;
     const classes = useStyle(defaultClasses, propClasses);
 
@@ -27,6 +28,7 @@ const ProductList = props => {
                     handleRemoveItem={handleRemoveItem}
                     configurableThumbnailSource={configurableThumbnailSource}
                     storeUrlSuffix={storeUrlSuffix}
+                    totalQuantity={totalQuantity}
                 />
             ));
         }
@@ -35,7 +37,8 @@ const ProductList = props => {
         handleRemoveItem,
         closeMiniCart,
         configurableThumbnailSource,
-        storeUrlSuffix
+        storeUrlSuffix,
+        totalQuantity
     ]);
 
     return (

diff --git a/packages/venia-ui/lib/components/MiniCart/miniCart.js b/packages/venia-ui/lib/components/MiniCart/miniCart.js
@@ -64,6 +64,8 @@ const MiniCart = React.forwardRef((props, ref) => {
 
     const [, { addToast }] = useToasts();
 
+    const announceMiniCartCount = 'There are no items in your cart.';
+
     useEffect(() => {
         if (errorMessage) {
             addToast({
@@ -116,6 +118,14 @@ const MiniCart = React.forwardRef((props, ref) => {
                     id={'miniCart.emptyMessage'}
                     defaultMessage={'There are no items in your cart.'}
                 />
+                <span
+                    hidden
+                    role="status"
+                    aria-hidden="false"
+                    aria-live="polite"
+                >
+                    {announceMiniCartCount}
+                </span>
             </div>
         </div>
     ) : (
@@ -129,6 +139,7 @@ const MiniCart = React.forwardRef((props, ref) => {
                     closeMiniCart={closeMiniCart}
                     configurableThumbnailSource={configurableThumbnailSource}
                     storeUrlSuffix={storeUrlSuffix}
+                    totalQuantity={totalQuantity}
                 />
             </div>
             <div className={classes.footer}>