fix(storefront): BCTHEME-209 Search result not notified by screen reader

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)

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);
 

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) {

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})"
         },

templates/components/common/navigation.html

@@ -102,7 +102,7 @@
             <div class="dropdown-menu" id="cart-preview-dropdown" data-dropdown-content aria-hidden="true"></div>
         </li>
     </ul>
-    <div class="dropdown dropdown--quickSearch" id="quickSearch" aria-hidden="true" tabindex="-1" data-prevent-quick-search-close>
+    <div class="dropdown dropdown--quickSearch" id="quickSearch" aria-hidden="true" data-prevent-quick-search-close>
         {{> components/common/quick-search name='nav-quick-search'}}
     </div>
 </nav>

templates/components/common/quick-search.html

@@ -15,4 +15,9 @@
         </fieldset>
     </form>
     <section class="quickSearchResults" data-bind="html: results"></section>
+    <p role="status"
+       aria-live="polite"
+       class="aria-description--hidden"
+       data-search-aria-message-predefined-text="{{{lang 'search.results.quick_count_live'}}}"
+    ></p>
 </div>

templates/pages/search.html

@@ -125,6 +125,14 @@ <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>