From 8044500283c6b8aab2daf62b283f83a727216aab Mon Sep 17 00:00:00 2001
From: glo82145 <glo82145@adobe.com>
Date: Thu, 18 Aug 2022 17:40:50 +0530
Subject: [PATCH 1/6] AC-3522::Product search result with items count is not
 being read by screen reader

---
 packages/venia-ui/lib/components/FilterSidebar/filterSidebar.js | 1 -
 packages/venia-ui/lib/components/Gallery/gallery.js             | 1 -
 packages/venia-ui/lib/components/SearchPage/searchPage.js       | 2 +-
 .../lib/components/SortedByContainer/sortedByContainer.js       | 2 +-
 4 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/venia-ui/lib/components/FilterSidebar/filterSidebar.js b/packages/venia-ui/lib/components/FilterSidebar/filterSidebar.js
index 1ccfa63fc0..4fa266eb8a 100644
--- a/packages/venia-ui/lib/components/FilterSidebar/filterSidebar.js
+++ b/packages/venia-ui/lib/components/FilterSidebar/filterSidebar.js
@@ -101,7 +101,6 @@ const FilterSidebar = props => {
             className={classes.root}
             ref={filterRef}
             data-cy="FilterSidebar-root"
-            aria-live="polite"
             aria-busy="false"
         >
             <div className={classes.body}>
diff --git a/packages/venia-ui/lib/components/Gallery/gallery.js b/packages/venia-ui/lib/components/Gallery/gallery.js
index 3b5bbad0ea..e512e22d34 100644
--- a/packages/venia-ui/lib/components/Gallery/gallery.js
+++ b/packages/venia-ui/lib/components/Gallery/gallery.js
@@ -40,7 +40,6 @@ const Gallery = props => {
         <div
             data-cy="Gallery-root"
             className={classes.root}
-            aria-live="polite"
             aria-busy="false"
         >
             <div className={classes.items}>{galleryItems}</div>
diff --git a/packages/venia-ui/lib/components/SearchPage/searchPage.js b/packages/venia-ui/lib/components/SearchPage/searchPage.js
index ef4201cd97..09e93b66e3 100644
--- a/packages/venia-ui/lib/components/SearchPage/searchPage.js
+++ b/packages/venia-ui/lib/components/SearchPage/searchPage.js
@@ -174,7 +174,7 @@ const SearchPage = props => {
     const itemCountHeading =
         data && !loading ? (
             <span
-                aria-live="polite"
+                aria-live="assertive"
                 aria-busy="true"
                 className={classes.totalPages}
             >
diff --git a/packages/venia-ui/lib/components/SortedByContainer/sortedByContainer.js b/packages/venia-ui/lib/components/SortedByContainer/sortedByContainer.js
index 4aa4b55b62..0c3cfd9614 100644
--- a/packages/venia-ui/lib/components/SortedByContainer/sortedByContainer.js
+++ b/packages/venia-ui/lib/components/SortedByContainer/sortedByContainer.js
@@ -10,7 +10,7 @@ const SortedByContainer = props => {
     const classes = useStyle(defaultClasses, props.classes);
 
     return (
-        <div className={classes.root} aria-live="polite" aria-busy="true">
+        <div className={classes.root} aria-busy="true">
             <FormattedMessage
                 id={'searchPage.sortContainer'}
                 defaultMessage={'Items sorted by '}

From 3da8fca4ea474c4081c05ee22ea2e2feaa80a4d8 Mon Sep 17 00:00:00 2001
From: glo82145 <glo82145@adobe.com>
Date: Thu, 18 Aug 2022 17:54:21 +0530
Subject: [PATCH 2/6] AC-3522::Product search result with items count is not
 being read by screen reader

---
 .../__snapshots__/gallery.spec.js.snap         |  2 --
 .../__snapshots__/searchPage.spec.js.snap      | 18 +++++++++---------
 2 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/packages/venia-ui/lib/components/Gallery/__tests__/__snapshots__/gallery.spec.js.snap b/packages/venia-ui/lib/components/Gallery/__tests__/__snapshots__/gallery.spec.js.snap
index fe1f90a735..921eb72901 100644
--- a/packages/venia-ui/lib/components/Gallery/__tests__/__snapshots__/gallery.spec.js.snap
+++ b/packages/venia-ui/lib/components/Gallery/__tests__/__snapshots__/gallery.spec.js.snap
@@ -3,7 +3,6 @@
 exports[`renders if \`items\` is an array of objects 1`] = `
 <div
   aria-busy="false"
-  aria-live="polite"
   className="root"
 >
   <div
@@ -208,7 +207,6 @@ exports[`renders if \`items\` is an array of objects 1`] = `
 exports[`renders if \`items\` is an empty array 1`] = `
 <div
   aria-busy="false"
-  aria-live="polite"
   className="root"
 >
   <div
diff --git a/packages/venia-ui/lib/components/SearchPage/__tests__/__snapshots__/searchPage.spec.js.snap b/packages/venia-ui/lib/components/SearchPage/__tests__/__snapshots__/searchPage.spec.js.snap
index acf2438efb..0c7ebd5d1f 100644
--- a/packages/venia-ui/lib/components/SearchPage/__tests__/__snapshots__/searchPage.spec.js.snap
+++ b/packages/venia-ui/lib/components/SearchPage/__tests__/__snapshots__/searchPage.spec.js.snap
@@ -22,7 +22,7 @@ exports[`Search Page Component error view does not render when data is present 1
         />
         <span
           aria-busy="true"
-          aria-live="polite"
+          aria-live="assertive"
           className="totalPages"
         >
           0 items
@@ -137,7 +137,7 @@ exports[`Search Page Component filter button/modal does not render if there are
         />
         <span
           aria-busy="true"
-          aria-live="polite"
+          aria-live="assertive"
           className="totalPages"
         >
           0 items
@@ -216,7 +216,7 @@ exports[`Search Page Component filter button/modal renders when there are filter
         />
         <span
           aria-busy="true"
-          aria-live="polite"
+          aria-live="assertive"
           className="totalPages"
         >
           0 items
@@ -495,7 +495,7 @@ exports[`Search Page Component search results heading renders a generic message
         />
         <span
           aria-busy="true"
-          aria-live="polite"
+          aria-live="assertive"
           className="totalPages"
         >
           1 items
@@ -605,7 +605,7 @@ exports[`Search Page Component search results heading renders a specific message
         />
         <span
           aria-busy="true"
-          aria-live="polite"
+          aria-live="assertive"
           className="totalPages"
         >
           1 items
@@ -777,7 +777,7 @@ exports[`Search Page Component sort button/container does not render if total co
         />
         <span
           aria-busy="true"
-          aria-live="polite"
+          aria-live="assertive"
           className="totalPages"
         >
           0 items
@@ -833,7 +833,7 @@ exports[`Search Page Component sort button/container renders when total count >
         />
         <span
           aria-busy="true"
-          aria-live="polite"
+          aria-live="assertive"
           className="totalPages"
         >
           1 items
@@ -936,7 +936,7 @@ exports[`Search Page Component total count renders 0 items if data.products.tota
         />
         <span
           aria-busy="true"
-          aria-live="polite"
+          aria-live="assertive"
           className="totalPages"
         >
           0 items
@@ -992,7 +992,7 @@ exports[`Search Page Component total count renders results from data 1`] = `
         />
         <span
           aria-busy="true"
-          aria-live="polite"
+          aria-live="assertive"
           className="totalPages"
         >
           1 items

From 5cd0d5704de675b686c6f62a368255b67c58dfeb Mon Sep 17 00:00:00 2001
From: glo82145 <glo82145@adobe.com>
Date: Thu, 18 Aug 2022 18:45:36 +0530
Subject: [PATCH 3/6] AC-3522::Product search result with items count is not
 being read by screen - added prettier

---
 packages/venia-ui/lib/components/Gallery/gallery.js | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/packages/venia-ui/lib/components/Gallery/gallery.js b/packages/venia-ui/lib/components/Gallery/gallery.js
index e512e22d34..53c11709d3 100644
--- a/packages/venia-ui/lib/components/Gallery/gallery.js
+++ b/packages/venia-ui/lib/components/Gallery/gallery.js
@@ -37,11 +37,7 @@ const Gallery = props => {
     );
 
     return (
-        <div
-            data-cy="Gallery-root"
-            className={classes.root}
-            aria-busy="false"
-        >
+        <div data-cy="Gallery-root" className={classes.root} aria-busy="false">
             <div className={classes.items}>{galleryItems}</div>
         </div>
     );

From eef8fdb9ca9d280ed5b2405d4f51869216581037 Mon Sep 17 00:00:00 2001
From: glo82145 <glo82145@adobe.com>
Date: Thu, 22 Sep 2022 09:25:54 +0530
Subject: [PATCH 4/6] AC-3522::Product search result with items count is not
 being read by screen reader

---
 packages/venia-ui/lib/components/Gallery/item.js            | 2 --
 packages/venia-ui/lib/components/ProductSort/productSort.js | 1 -
 packages/venia-ui/lib/components/SearchPage/searchPage.js   | 5 ++---
 3 files changed, 2 insertions(+), 6 deletions(-)

diff --git a/packages/venia-ui/lib/components/Gallery/item.js b/packages/venia-ui/lib/components/Gallery/item.js
index 2d7d54dbde..8d3f5bbb1b 100644
--- a/packages/venia-ui/lib/components/Gallery/item.js
+++ b/packages/venia-ui/lib/components/Gallery/item.js
@@ -86,8 +86,6 @@ const GalleryItem = props => {
         <div
             data-cy="GalleryItem-root"
             className={classes.root}
-            aria-live="polite"
-            aria-busy="false"
             ref={itemRef}
         >
             <Link
diff --git a/packages/venia-ui/lib/components/ProductSort/productSort.js b/packages/venia-ui/lib/components/ProductSort/productSort.js
index 08c0fee8d5..a248fe0660 100644
--- a/packages/venia-ui/lib/components/ProductSort/productSort.js
+++ b/packages/venia-ui/lib/components/ProductSort/productSort.js
@@ -162,7 +162,6 @@ const ProductSort = props => {
             ref={elementRef}
             className={classes.root}
             data-cy="ProductSort-root"
-            aria-live="polite"
             aria-busy="false"
         >
             <Button
diff --git a/packages/venia-ui/lib/components/SearchPage/searchPage.js b/packages/venia-ui/lib/components/SearchPage/searchPage.js
index 09e93b66e3..fed029409e 100644
--- a/packages/venia-ui/lib/components/SearchPage/searchPage.js
+++ b/packages/venia-ui/lib/components/SearchPage/searchPage.js
@@ -174,8 +174,7 @@ const SearchPage = props => {
     const itemCountHeading =
         data && !loading ? (
             <span
-                aria-live="assertive"
-                aria-busy="true"
+                aria-live="polite"
                 className={classes.totalPages}
             >
                 {formatMessage(
@@ -203,7 +202,7 @@ const SearchPage = props => {
             </div>
             <div className={classes.searchContent}>
                 <div className={classes.heading}>
-                    <div className={classes.searchInfo}>
+                    <div aria-live="polite" aria-atomic='true' className={classes.searchInfo}>
                         {searchResultsHeading}
                         {itemCountHeading}
                     </div>

From 4087f728d3daf326ca4c894991cb35200e69704c Mon Sep 17 00:00:00 2001
From: glo82145 <glo82145@adobe.com>
Date: Tue, 27 Sep 2022 17:56:57 +0530
Subject: [PATCH 5/6] AC-3522::added failing test cases fix

---
 .../__snapshots__/gallery.spec.js.snap        |  4 --
 .../__tests__/__snapshots__/item.spec.js.snap |  2 -
 .../__snapshots__/productSort.spec.js.snap    |  1 -
 .../__snapshots__/searchPage.spec.js.snap     | 55 +++++++++++++------
 4 files changed, 37 insertions(+), 25 deletions(-)

diff --git a/packages/venia-ui/lib/components/Gallery/__tests__/__snapshots__/gallery.spec.js.snap b/packages/venia-ui/lib/components/Gallery/__tests__/__snapshots__/gallery.spec.js.snap
index 921eb72901..c77483644a 100644
--- a/packages/venia-ui/lib/components/Gallery/__tests__/__snapshots__/gallery.spec.js.snap
+++ b/packages/venia-ui/lib/components/Gallery/__tests__/__snapshots__/gallery.spec.js.snap
@@ -9,8 +9,6 @@ exports[`renders if \`items\` is an array of objects 1`] = `
     className="items"
   >
     <div
-      aria-busy="false"
-      aria-live="polite"
       className="root"
     >
       <div
@@ -105,8 +103,6 @@ exports[`renders if \`items\` is an array of objects 1`] = `
       </div>
     </div>
     <div
-      aria-busy="false"
-      aria-live="polite"
       className="root"
     >
       <div
diff --git a/packages/venia-ui/lib/components/Gallery/__tests__/__snapshots__/item.spec.js.snap b/packages/venia-ui/lib/components/Gallery/__tests__/__snapshots__/item.spec.js.snap
index fedb6ace6f..e9897dda8f 100644
--- a/packages/venia-ui/lib/components/Gallery/__tests__/__snapshots__/item.spec.js.snap
+++ b/packages/venia-ui/lib/components/Gallery/__tests__/__snapshots__/item.spec.js.snap
@@ -61,8 +61,6 @@ exports[`renders a placeholder item while awaiting item 1`] = `
 
 exports[`renders correctly with valid item data 1`] = `
 <div
-  aria-busy="false"
-  aria-live="polite"
   className="root"
 >
   <a
diff --git a/packages/venia-ui/lib/components/ProductSort/__tests__/__snapshots__/productSort.spec.js.snap b/packages/venia-ui/lib/components/ProductSort/__tests__/__snapshots__/productSort.spec.js.snap
index 1a9f42ca3c..9f766d280e 100644
--- a/packages/venia-ui/lib/components/ProductSort/__tests__/__snapshots__/productSort.spec.js.snap
+++ b/packages/venia-ui/lib/components/ProductSort/__tests__/__snapshots__/productSort.spec.js.snap
@@ -3,7 +3,6 @@
 exports[`renders correctly 1`] = `
 <div
   aria-busy="false"
-  aria-live="polite"
 >
   <button
     disabled={false}
diff --git a/packages/venia-ui/lib/components/SearchPage/__tests__/__snapshots__/searchPage.spec.js.snap b/packages/venia-ui/lib/components/SearchPage/__tests__/__snapshots__/searchPage.spec.js.snap
index 0c7ebd5d1f..c0d5844df3 100644
--- a/packages/venia-ui/lib/components/SearchPage/__tests__/__snapshots__/searchPage.spec.js.snap
+++ b/packages/venia-ui/lib/components/SearchPage/__tests__/__snapshots__/searchPage.spec.js.snap
@@ -14,6 +14,8 @@ exports[`Search Page Component error view does not render when data is present 1
       className="heading"
     >
       <div
+        aria-atomic="true"
+        aria-live="polite"
         className="searchInfo"
       >
         <mock-FormattedMessage
@@ -21,8 +23,7 @@ exports[`Search Page Component error view does not render when data is present 1
           id="searchPage.searchTermEmpty"
         />
         <span
-          aria-busy="true"
-          aria-live="assertive"
+          aria-live="polite"
           className="totalPages"
         >
           0 items
@@ -85,6 +86,8 @@ exports[`Search Page Component error view renders when data is not present and n
       className="heading"
     >
       <div
+        aria-atomic="true"
+        aria-live="polite"
         className="searchInfo"
       />
       <div
@@ -129,6 +132,8 @@ exports[`Search Page Component filter button/modal does not render if there are
       className="heading"
     >
       <div
+        aria-atomic="true"
+        aria-live="polite"
         className="searchInfo"
       >
         <mock-FormattedMessage
@@ -136,8 +141,7 @@ exports[`Search Page Component filter button/modal does not render if there are
           id="searchPage.searchTermEmpty"
         />
         <span
-          aria-busy="true"
-          aria-live="assertive"
+          aria-live="polite"
           className="totalPages"
         >
           0 items
@@ -208,6 +212,8 @@ exports[`Search Page Component filter button/modal renders when there are filter
       className="heading"
     >
       <div
+        aria-atomic="true"
+        aria-live="polite"
         className="searchInfo"
       >
         <mock-FormattedMessage
@@ -215,8 +221,7 @@ exports[`Search Page Component filter button/modal renders when there are filter
           id="searchPage.searchTermEmpty"
         />
         <span
-          aria-busy="true"
-          aria-live="assertive"
+          aria-live="polite"
           className="totalPages"
         >
           0 items
@@ -294,6 +299,8 @@ exports[`Search Page Component loading indicator does not render when data is pr
       className="heading"
     >
       <div
+        aria-atomic="true"
+        aria-live="polite"
         className="searchInfo"
       >
         <Shimmer
@@ -363,6 +370,8 @@ exports[`Search Page Component loading indicator renders when data is not presen
       className="heading"
     >
       <div
+        aria-atomic="true"
+        aria-live="polite"
         className="searchInfo"
       >
         <Shimmer
@@ -433,6 +442,8 @@ exports[`Search Page Component search results does not render if data returned h
       className="heading"
     >
       <div
+        aria-atomic="true"
+        aria-live="polite"
         className="searchInfo"
       >
         <Shimmer
@@ -487,6 +498,8 @@ exports[`Search Page Component search results heading renders a generic message
       className="heading"
     >
       <div
+        aria-atomic="true"
+        aria-live="polite"
         className="searchInfo"
       >
         <mock-FormattedMessage
@@ -494,8 +507,7 @@ exports[`Search Page Component search results heading renders a generic message
           id="searchPage.searchTermEmpty"
         />
         <span
-          aria-busy="true"
-          aria-live="assertive"
+          aria-live="polite"
           className="totalPages"
         >
           1 items
@@ -590,6 +602,8 @@ exports[`Search Page Component search results heading renders a specific message
       className="heading"
     >
       <div
+        aria-atomic="true"
+        aria-live="polite"
         className="searchInfo"
       >
         <mock-FormattedMessage
@@ -604,8 +618,7 @@ exports[`Search Page Component search results heading renders a specific message
           }
         />
         <span
-          aria-busy="true"
-          aria-live="assertive"
+          aria-live="polite"
           className="totalPages"
         >
           1 items
@@ -700,6 +713,8 @@ exports[`Search Page Component search results renders if data has items 1`] = `
       className="heading"
     >
       <div
+        aria-atomic="true"
+        aria-live="polite"
         className="searchInfo"
       >
         <Shimmer
@@ -769,6 +784,8 @@ exports[`Search Page Component sort button/container does not render if total co
       className="heading"
     >
       <div
+        aria-atomic="true"
+        aria-live="polite"
         className="searchInfo"
       >
         <mock-FormattedMessage
@@ -776,8 +793,7 @@ exports[`Search Page Component sort button/container does not render if total co
           id="searchPage.searchTermEmpty"
         />
         <span
-          aria-busy="true"
-          aria-live="assertive"
+          aria-live="polite"
           className="totalPages"
         >
           0 items
@@ -825,6 +841,8 @@ exports[`Search Page Component sort button/container renders when total count >
       className="heading"
     >
       <div
+        aria-atomic="true"
+        aria-live="polite"
         className="searchInfo"
       >
         <mock-FormattedMessage
@@ -832,8 +850,7 @@ exports[`Search Page Component sort button/container renders when total count >
           id="searchPage.searchTermEmpty"
         />
         <span
-          aria-busy="true"
-          aria-live="assertive"
+          aria-live="polite"
           className="totalPages"
         >
           1 items
@@ -928,6 +945,8 @@ exports[`Search Page Component total count renders 0 items if data.products.tota
       className="heading"
     >
       <div
+        aria-atomic="true"
+        aria-live="polite"
         className="searchInfo"
       >
         <mock-FormattedMessage
@@ -935,8 +954,7 @@ exports[`Search Page Component total count renders 0 items if data.products.tota
           id="searchPage.searchTermEmpty"
         />
         <span
-          aria-busy="true"
-          aria-live="assertive"
+          aria-live="polite"
           className="totalPages"
         >
           0 items
@@ -984,6 +1002,8 @@ exports[`Search Page Component total count renders results from data 1`] = `
       className="heading"
     >
       <div
+        aria-atomic="true"
+        aria-live="polite"
         className="searchInfo"
       >
         <mock-FormattedMessage
@@ -991,8 +1011,7 @@ exports[`Search Page Component total count renders results from data 1`] = `
           id="searchPage.searchTermEmpty"
         />
         <span
-          aria-busy="true"
-          aria-live="assertive"
+          aria-live="polite"
           className="totalPages"
         >
           1 items

From 2ad64f6fd38da5cffdf91494754cbe788fb2eff7 Mon Sep 17 00:00:00 2001
From: glo82145 <glo82145@adobe.com>
Date: Tue, 27 Sep 2022 18:51:57 +0530
Subject: [PATCH 6/6] AC-3522::added failing test cases fix

---
 packages/venia-ui/lib/components/Gallery/item.js      |  6 +-----
 .../venia-ui/lib/components/SearchPage/searchPage.js  | 11 ++++++-----
 2 files changed, 7 insertions(+), 10 deletions(-)

diff --git a/packages/venia-ui/lib/components/Gallery/item.js b/packages/venia-ui/lib/components/Gallery/item.js
index 8d3f5bbb1b..bb7060d474 100644
--- a/packages/venia-ui/lib/components/Gallery/item.js
+++ b/packages/venia-ui/lib/components/Gallery/item.js
@@ -83,11 +83,7 @@ const GalleryItem = props => {
     // ) : null;
 
     return (
-        <div
-            data-cy="GalleryItem-root"
-            className={classes.root}
-            ref={itemRef}
-        >
+        <div data-cy="GalleryItem-root" className={classes.root} ref={itemRef}>
             <Link
                 onClick={handleLinkClick}
                 to={productLink}
diff --git a/packages/venia-ui/lib/components/SearchPage/searchPage.js b/packages/venia-ui/lib/components/SearchPage/searchPage.js
index fed029409e..6db6eb6017 100644
--- a/packages/venia-ui/lib/components/SearchPage/searchPage.js
+++ b/packages/venia-ui/lib/components/SearchPage/searchPage.js
@@ -173,10 +173,7 @@ const SearchPage = props => {
 
     const itemCountHeading =
         data && !loading ? (
-            <span
-                aria-live="polite"
-                className={classes.totalPages}
-            >
+            <span aria-live="polite" className={classes.totalPages}>
                 {formatMessage(
                     {
                         id: 'searchPage.totalPages',
@@ -202,7 +199,11 @@ const SearchPage = props => {
             </div>
             <div className={classes.searchContent}>
                 <div className={classes.heading}>
-                    <div aria-live="polite" aria-atomic='true' className={classes.searchInfo}>
+                    <div
+                        aria-live="polite"
+                        aria-atomic="true"
+                        className={classes.searchInfo}
+                    >
                         {searchResultsHeading}
                         {itemCountHeading}
                     </div>