diff --git a/CHANGELOG.md b/CHANGELOG.md index a7f0c6ed16..2748435695 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,7 @@ # Changelog ## Draft +- Search result not notified by screen reader. [#1867](https://github.com/bigcommerce/cornerstone/pull/1867) - Add aria label with price to Product List Item. [#1878](https://github.com/bigcommerce/cornerstone/pull/1878) - Fixed comparing Products on 'Account - Recently Viewed' page. [#1877](https://github.com/bigcommerce/cornerstone/pull/1877) - Remove layout shifts to improve CLS indicator from Lighthouse performance report. [#1869](https://github.com/bigcommerce/cornerstone/pull/1869) diff --git a/assets/js/theme/global/quick-search.js b/assets/js/theme/global/quick-search.js index b9e2f1326f..200b0c2845 100644 --- a/assets/js/theme/global/quick-search.js +++ b/assets/js/theme/global/quick-search.js @@ -40,6 +40,27 @@ export default function () { } $quickSearchResults.html(response); + const $quickSearchResultsCurrent = $quickSearchResults.filter(':visible'); + + const $noResultsMessage = $quickSearchResultsCurrent.find('.quickSearchMessage'); + if ($noResultsMessage.length) { + $noResultsMessage.attr({ + role: 'status', + 'aria-live': 'polite', + }); + } else { + const $quickSearchAriaMessage = $quickSearchResultsCurrent.next(); + $quickSearchAriaMessage.addClass('u-hidden'); + + const predefinedText = $quickSearchAriaMessage.data('search-aria-message-predefined-text'); + const itemsFoundCount = $quickSearchResultsCurrent.find('.product').length; + + $quickSearchAriaMessage.text(`${itemsFoundCount} ${predefinedText} ${searchQuery}`); + + setTimeout(() => { + $quickSearchAriaMessage.removeClass('u-hidden'); + }, 100); + } }); }, 200); diff --git a/assets/js/theme/search.js b/assets/js/theme/search.js index 81725ce612..37ea402aa5 100644 --- a/assets/js/theme/search.js +++ b/assets/js/theme/search.js @@ -201,6 +201,10 @@ export default class Search extends CatalogPage { $searchForm.append(input); } }); + + setTimeout(() => { + $('[data-search-aria-message]').removeClass('u-hidden'); + }, 100); } loadTreeNodes(node, cb) { diff --git a/lang/en.json b/lang/en.json index a481ffecee..456e96ca76 100755 --- a/lang/en.json +++ b/lang/en.json @@ -828,6 +828,7 @@ "form_button_text": "Search", "count": "{ count, plural, one {# result} other {# results} } for '{ search_query }'", "quick_count": "{ count, plural, one {# product result} other {# product results} } for '{ search_query }'", + "quick_count_live": "product results for", "product_count": "Products ({count})", "content_count": "News & Information ({count})" }, diff --git a/templates/components/common/navigation.html b/templates/components/common/navigation.html index 37b5e7667d..dde9d24005 100644 --- a/templates/components/common/navigation.html +++ b/templates/components/common/navigation.html @@ -102,7 +102,7 @@
- diff --git a/templates/pages/search.html b/templates/pages/search.html index d32865a6e5..f4031a0d6b 100644 --- a/templates/pages/search.html +++ b/templates/pages/search.html @@ -125,6 +125,14 @@+ {{{lang 'search.results.count' count=result_count search_query=(sanitize forms.search.query)}}} +
+