fix(storefront): BCTHEME-159 IDs used in ARIA and labels are not unique

bigcommerce · Aug 25, 2020 · 0964619 · 0964619
1 parent 353c9c8
commit 0964619
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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>