Improve search input semantics (#2123)

* Update search_form.html Updates Issue #2122 by adding the correct input type and aria label. * update search_form.html should be area-placeholder. My mistake. Updates Issue #2122 * fix aria-placeholder Updates issue #2123 with a typo found by @mmistakes for liquid syntax. Close #2122
mmistakes · Apr 10, 2019 · 3f1f7da · 3f1f7da
1 parent d06e437
commit 3f1f7da
Showing 1 changed file with 2 additions and 2 deletions.
diff --git a/_includes/search/search_form.html b/_includes/search/search_form.html
@@ -2,11 +2,11 @@
 {%- assign search_provider = site.search_provider | default: "lunr" -%}
 {%- case search_provider -%}
   {%- when "lunr" -%}
-    <input type="text" id="search" class="search-input" tabindex="-1" placeholder="{{ site.data.ui-text[site.locale].search_placeholder_text | default: 'Enter your search term...' }}" />
+    <input type="search" id="search" aria-placeholder="{{ site.data.ui-text[site.locale].search_placeholder_text | default: 'Enter your search term...' }}" class="search-input" tabindex="-1" placeholder="{{ site.data.ui-text[site.locale].search_placeholder_text | default: 'Enter your search term...' }}" />
     <div id="results" class="results"></div>
   {%- when "google" -%}
     <form onsubmit="return googleCustomSearchExecute();" id="cse-search-box-form-id">
-    <input type="text" id="cse-search-input-box-id" class="search-input" tabindex="-1" placeholder="{{ site.data.ui-text[site.locale].search_placeholder_text | default: 'Enter your search term...' }}" />
+    <input type="search" id="cse-search-input-box-id" aria-placeholder="{{ site.data.ui-text[site.locale].search_placeholder_text | default: 'Enter your search term...' }}" class="search-input" tabindex="-1" placeholder="{{ site.data.ui-text[site.locale].search_placeholder_text | default: 'Enter your search term...' }}" />
     </form>
     <div id="results" class="results">
         <gcse:searchresults-only></gcse:searchresults-only>