From 6f34f9ea4679f3fba11c5c33a2cf42049fe0e7ee Mon Sep 17 00:00:00 2001
From: Yurii Zusik <yurii.zusik@bigcommerce.com>
Date: Thu, 25 Mar 2021 12:31:09 +0200
Subject: [PATCH] fix(storefront): BCTHEME-423 Search result on search page not
 notified by screen reader

---
 assets/js/theme/search.js   | 12 +++++++++---
 templates/pages/search.html |  9 +--------
 2 files changed, 10 insertions(+), 11 deletions(-)

diff --git a/assets/js/theme/search.js b/assets/js/theme/search.js
index f022231cdb..8467de01e5 100644
--- a/assets/js/theme/search.js
+++ b/assets/js/theme/search.js
@@ -204,9 +204,15 @@ export default class Search extends CatalogPage {
             }
         });
 
-        setTimeout(() => {
-            $('[data-search-aria-message]').removeClass('u-hidden');
-        }, 100);
+        const $searchResultsMessage = $(`<p
+            class="aria-description--hidden"
+            tabindex="-1"
+            role="status"
+            aria-live="polite"
+            >${this.context.searchResultsCount}</p>`)
+            .prependTo('body');
+
+        setTimeout(() => $searchResultsMessage.focus(), 100);
     }
 
     loadTreeNodes(node, cb) {
diff --git a/templates/pages/search.html b/templates/pages/search.html
index f4031a0d6b..2f40c0667a 100644
--- a/templates/pages/search.html
+++ b/templates/pages/search.html
@@ -4,6 +4,7 @@
 ---
 {{inject 'categoryTree' forms.search.category_options}}
 {{inject 'searchProductsPerPage' theme_settings.searchpage_products_per_page}}
+{{inject 'searchResultsCount' (lang 'search.results.count' count=result_count search_query=(sanitize forms.search.query))}}
 {{#partial "head"}}
     {{#if pagination.product_results.previous}}
         <link rel="prev" href="{{pagination.product_results.previous}}">
@@ -125,14 +126,6 @@ <h5 class="suggestion-title">{{lang 'forms.search.suggestions.title'}}</h5>
             </div>
         {{/if}}
 
-        <p role="status"
-           aria-live="polite"
-           class="quickSearchResultsAriaMessage aria-description--hidden u-hidden"
-           data-search-aria-message
-        >
-            {{{lang 'search.results.count' count=result_count search_query=(sanitize forms.search.query)}}}
-        </p>
-
         <div role="tabpanel" id="search-results-content" aria-labelledby="search-results-content-count" {{#if forms.search.section '!=' 'content'}}class="u-hidden"{{/if}}>
             {{> components/search/content-listing}}
         </div>