AC-3522::Product search result with items count is not being read by …

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}>

packages/venia-ui/lib/components/Gallery/__tests__/__snapshots__/gallery.spec.js.snap

@@ -3,15 +3,12 @@
 exports[`renders if \`items\` is an array of objects 1`] = `
 <div
   aria-busy="false"
-  aria-live="polite"
   className="root"
 >
   <div
     className="items"
   >
     <div
-      aria-busy="false"
-      aria-live="polite"
       className="root"
     >
       <div
@@ -106,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
@@ -208,7 +203,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

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

packages/venia-ui/lib/components/Gallery/gallery.js

@@ -37,12 +37,7 @@ const Gallery = props => {
     );
 
     return (
-        <div
-            data-cy="Gallery-root"
-            className={classes.root}
-            aria-live="polite"
-            aria-busy="false"
-        >
+        <div data-cy="Gallery-root" className={classes.root} aria-busy="false">
             <div className={classes.items}>{galleryItems}</div>
         </div>
     );

packages/venia-ui/lib/components/Gallery/item.js

@@ -83,13 +83,7 @@ const GalleryItem = props => {
     // ) : null;
 
     return (
-        <div
-            data-cy="GalleryItem-root"
-            className={classes.root}
-            aria-live="polite"
-            aria-busy="false"
-            ref={itemRef}
-        >
+        <div data-cy="GalleryItem-root" className={classes.root} ref={itemRef}>
             <Link
                 onClick={handleLinkClick}
                 to={productLink}

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}

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

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
@@ -84,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
@@ -128,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
@@ -206,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
@@ -291,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
@@ -360,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
@@ -430,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
@@ -484,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
@@ -586,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
@@ -695,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
@@ -764,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
@@ -819,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
@@ -921,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
@@ -976,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

packages/venia-ui/lib/components/SearchPage/searchPage.js

@@ -199,7 +199,11 @@ 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>

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 '}