From 87358c7f7b28d8821c525c80e597c0eec6318f0d Mon Sep 17 00:00:00 2001
From: Tarun <127731581+Tarun50745@users.noreply.github.com>
Date: Fri, 19 May 2023 16:11:16 +0530
Subject: [PATCH] =?UTF-8?q?PWA-3107::There's=20no=20message=20to=20inform?=
 =?UTF-8?q?=20the=20user=20the=20page=20refreshed=20it=E2=80=A6=20(#4100)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* PWA-3107::There's no message to inform the user the page refreshed its content by clicking/pressing either one of the 2 buttons.

* PWA-3107::updated snapshots

* PWA-3107::Fixed lint issues

* PWA-3107:: test case and lint updates

---------

Co-authored-by: Aanchal Pawar <97873570+glo82145@users.noreply.github.com>
---
 .../__tests__/__snapshots__/item.spec.js.snap | 32 +++++++++++++++++++
 .../components/MiniCart/ProductList/item.js   | 16 +++++++++-
 .../MiniCart/ProductList/item.module.css      |  6 ++++
 .../MiniCart/ProductList/productList.js       |  7 ++--
 .../lib/components/MiniCart/miniCart.js       | 11 +++++++
 5 files changed, 69 insertions(+), 3 deletions(-)

diff --git a/packages/venia-ui/lib/components/MiniCart/ProductList/__tests__/__snapshots__/item.spec.js.snap b/packages/venia-ui/lib/components/MiniCart/ProductList/__tests__/__snapshots__/item.spec.js.snap
index 0940c87e58..f526dea146 100644
--- a/packages/venia-ui/lib/components/MiniCart/ProductList/__tests__/__snapshots__/item.spec.js.snap
+++ b/packages/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
index 0314c51266..8dc201f572 100644
--- 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
index 347913ea79..05bd2244e6 100644
--- 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
index 869afecdd7..54d5b8a5c8 100644
--- 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
index b7a82ea632..8470cdc699 100644
--- 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}>