From 76dbd2cece016f13b1c5bdaffd96c585227735ea Mon Sep 17 00:00:00 2001
From: Yurii Zusik <yurii.zusik@bigcommerce.com>
Date: Thu, 14 Jan 2021 10:11:13 +0200
Subject: [PATCH]  fix(storefront): BCTHEME-366 Error message on PLPs not
 announced by screen reader

---
 CHANGELOG.md                                       | 1 +
 assets/js/theme/category.js                        | 9 +++++++++
 templates/components/category/product-listing.html | 8 +++++++-
 3 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5fde0240d1..15571977aa 100644
--- a/CHANGELOG.md
+++ b/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)
 - Carousel buttons do not receive focus. [#1937](https://github.com/bigcommerce/cornerstone/pull/1937)
 - Empty cart message not read by screen reader. [#1935](https://github.com/bigcommerce/cornerstone/pull/1935)
 - No tooltips provided for carousel buttons. [#1934](https://github.com/bigcommerce/cornerstone/pull/1934)
diff --git a/assets/js/theme/category.js b/assets/js/theme/category.js
index 0eb749f915..698f849cf3 100644
--- a/assets/js/theme/category.js
+++ b/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() {
diff --git a/templates/components/category/product-listing.html b/templates/components/category/product-listing.html
index 927b42fc3d..dac706b2aa 100644
--- a/templates/components/category/product-listing.html
+++ b/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}}