Fix: Add search field label element (fixes #67) (#71)

cgkineo · Sep 27, 2023 · 6b6f1c9 · 6b6f1c9
1 parent f244425
commit 6b6f1c9
Show file tree

Hide file tree

Showing 5 changed files with 8 additions and 12 deletions.
diff --git a/js/SEARCH_DEFAULTS.js b/js/SEARCH_DEFAULTS.js
@@ -2,7 +2,6 @@
 const SEARCH_DEFAULTS = {
 
   title: 'Search',
-  description: 'Type in search words',
   placeholder: '',
   noResultsMessage: 'Sorry, no results were found',
   awaitingResultsMessage: 'Formulating results...',

diff --git a/js/adapt-search.js b/js/adapt-search.js
@@ -67,10 +67,8 @@ class Search extends Backbone.Controller {
   addDrawerItem() {
     const searchConfig = Adapt.course.get('_search');
     searchConfig.title = searchConfig.title || 'Search';
-    searchConfig.description = searchConfig.description || 'Description';
     const drawerObject = {
       title: searchConfig.title,
-      description: searchConfig.description,
       className: 'is-search',
       drawerOrder: searchConfig._drawerOrder || 0
     };

diff --git a/less/search.less b/less/search.less
@@ -17,6 +17,12 @@
     }
   }
 
+  &__textbox-label {
+    display: block;
+    margin-bottom: (@item-padding / 2);
+    .drawer-item-body;
+  }
+
   &__items-container {
     border-top: 1px solid @drawer-item-hover;
 

diff --git a/templates/searchBox.hbs b/templates/searchBox.hbs
@@ -1,3 +1,4 @@
 <div class="search__textbox-container">
-  <input class="search__textbox js-search-textbox-change" type="text" placeholder="{{placeholder}}">
+  <label for="search__textbox" class="search__textbox-label{{#unless description}} aria-label{{/unless}}">{{#if description}}{{{description}}}{{/if}}{{#unless description}}{{{title}}}{{/unless}}</label>
+  <input id="search__textbox" class="search__textbox js-search-textbox-change" type="text" placeholder="{{placeholder}}">
 </div>
diff --git a/templates/searchSingleItem.hbs b/templates/searchSingleItem.hbs
@@ -9,13 +9,5 @@
     </div>
     {{/if}}
 
-    {{#if description}}
-    <div class="drawer__item-description">
-      <div class="drawer__item-description-inner">
-        {{{a11y_text description}}}
-      </div>
-    </div>
-    {{/if}}
-
   </div>
 </div>