fix(storefront): BCTHEME-366 Error message on PLPs not announced by screen reader

CHANGELOG.md

@@ -1,6 +1,7 @@
 # Changelog
 
 ## Draft
+- Error message on PLPs not announced by screen reader. [#1956](https://github.com/bigcommerce/cornerstone/pull/1956)
 - Add Play/Pause button to carousel. [#1944](https://github.com/bigcommerce/cornerstone/pull/1944)
 - Alt text not provided for ratings. [#1949](https://github.com/bigcommerce/cornerstone/pull/1949)
 - Fixed announcement for product on adding to cart. [#1950](https://github.com/bigcommerce/cornerstone/pull/1950)

assets/js/theme/category.js

@@ -33,6 +33,15 @@ export default class Category extends CatalogPage {
                 'aria-live': 'polite',
             });
         });
+
+        this.ariaNotifyNoProducts();
+    }
+
+    ariaNotifyNoProducts() {
+        const $noProductsMessage = $('[data-no-products-notification]');
+        if ($noProductsMessage.length) {
+            $noProductsMessage.focus();
+        }
     }
 
     initFacetedSearch() {

templates/components/category/product-listing.html

@@ -19,5 +19,11 @@
 
     {{> components/common/paginator pagination.category}}
 {{else}}
-    <span role="text" tabindex="0">{{lang 'categories.no_products'}}</span>
+    <p data-no-products-notification
+       role="alert"
+       aria-live="assertive"
+       tabindex="-1"
+    >
+        {{lang 'categories.no_products'}}
+    </p>
 {{/if}}