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
This commit is contained in:
Denver Prophit Jr 2019-04-09 21:20:35 -04:00 committed by Michael Rose
parent d06e437ced
commit 3f1f7da5c8

View file

@ -2,11 +2,11 @@
{%- assign search_provider = site.search_provider | default: "lunr" -%} {%- assign search_provider = site.search_provider | default: "lunr" -%}
{%- case search_provider -%} {%- case search_provider -%}
{%- when "lunr" -%} {%- 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> <div id="results" class="results"></div>
{%- when "google" -%} {%- when "google" -%}
<form onsubmit="return googleCustomSearchExecute();" id="cse-search-box-form-id"> <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> </form>
<div id="results" class="results"> <div id="results" class="results">
<gcse:searchresults-only></gcse:searchresults-only> <gcse:searchresults-only></gcse:searchresults-only>