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

…screen reader (#1956)
bigcommerce · Jan 19, 2021 · ea01df7 · ea01df7
1 parent 83e8b0a
commit ea01df7
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 1 deletion.
diff --git 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)
 - 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)

diff --git 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
@@ -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}}