From 09646191cdc5c5efacabe41d2052ffa817e1c31d Mon Sep 17 00:00:00 2001
From: Tymur Biedukhin <tymur.biedukhin@bigcommerce.com>
Date: Tue, 25 Aug 2020 13:03:11 +0300
Subject: [PATCH] fix(storefront): BCTHEME-159 IDs used in ARIA and labels are
 not unique

---
 CHANGELOG.md                                     |  1 +
 assets/js/theme/global/quick-search.js           |  2 +-
 templates/components/common/navigation-menu.html |  2 +-
 templates/components/common/navigation.html      |  2 +-
 templates/components/common/quick-search.html    | 11 +++++++++--
 5 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f8586c4735..33a59c27a5 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,7 @@
 # Changelog
 
 ## Draft
+- Fixed IDs used in ARIA and labels which are not unique. [#1791](https://github.com/bigcommerce/cornerstone/pull/1791)
 
 ## 4.9.0 (08-05-2020)
 
diff --git a/assets/js/theme/global/quick-search.js b/assets/js/theme/global/quick-search.js
index 08b94c7544..fbca98bc40 100644
--- a/assets/js/theme/global/quick-search.js
+++ b/assets/js/theme/global/quick-search.js
@@ -6,7 +6,7 @@ export default function () {
     const TOP_STYLING = 'top: 49px;';
     const $quickSearchResults = $('.quickSearchResults');
     const $quickSearchDiv = $('#quickSearch');
-    const $searchQuery = $('#search_query');
+    const $searchQuery = $('[data-search-quick]');
     const stencilDropDownExtendables = {
         hide: () => {
             $searchQuery.trigger('blur');
diff --git a/templates/components/common/navigation-menu.html b/templates/components/common/navigation-menu.html
index 08455e8a5a..e725f0651e 100644
--- a/templates/components/common/navigation-menu.html
+++ b/templates/components/common/navigation-menu.html
@@ -1,6 +1,6 @@
 <nav class="navPages">
     <div class="navPages-quickSearch">
-        {{> components/common/quick-search}}
+        {{> components/common/quick-search name='nav-menu-quick-search'}}
     </div>
     <ul class="navPages-list{{#if theme_settings.navigation_design '!==' 'simple'}} navPages-list-depth-max{{/if}}">
         {{#each categories}}
diff --git a/templates/components/common/navigation.html b/templates/components/common/navigation.html
index a01e3c4351..8a721e13ea 100644
--- a/templates/components/common/navigation.html
+++ b/templates/components/common/navigation.html
@@ -102,6 +102,6 @@
         </li>
     </ul>
     <div class="dropdown dropdown--quickSearch" id="quickSearch" aria-hidden="true" tabindex="-1" data-prevent-quick-search-close>
-        {{> components/common/quick-search}}
+        {{> components/common/quick-search name='nav-quick-search'}}
     </div>
 </nav>
diff --git a/templates/components/common/quick-search.html b/templates/components/common/quick-search.html
index ac3e463660..63c4369454 100644
--- a/templates/components/common/quick-search.html
+++ b/templates/components/common/quick-search.html
@@ -2,8 +2,15 @@
     <form class="form" action="{{urls.search}}">
         <fieldset class="form-fieldset">
             <div class="form-field">
-                <label class="is-srOnly" for="search_query">{{lang "search.quick_search.input_label"}}</label>
-                <input class="form-input" data-search-quick name="search_query" id="search_query" data-error-message="{{lang 'search.error.empty_field'}}" placeholder="{{lang 'search.quick_search.input_placeholder'}}" autocomplete="off">
+                <label class="is-srOnly" for={{name}}>{{lang "search.quick_search.input_label"}}</label>
+                <input class="form-input"
+                       data-search-quick
+                       name={{name}}
+                       id={{name}}
+                       data-error-message="{{lang 'search.error.empty_field'}}"
+                       placeholder="{{lang 'search.quick_search.input_placeholder'}}"
+                       autocomplete="off"
+                >
             </div>
         </fieldset>
     </form>