fix(storefront): BCTHEME-423 Search result on search page not notifie…

…d by screen reader (#2024)
bigcommerce · Apr 30, 2021 · 6e4c844 · 6e4c844
1 parent 6dcc333
commit 6e4c844
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 11 deletions.
diff --git 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
@@ -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>