hacks-guide-minimal-mistake.../_includes/search/search_form.html
Jim Drury af772af56f Fixes aria issues on search form (#2211)
* Fixes aria issues on search form
* Swapping aria-label for <label> tag in search
* Removing background gray caused by adding <form> tag to search
* Removing redundant space
* Making form not submit if key is enter

Close #2180
2019-07-17 16:05:50 -04:00

26 lines
1.3 KiB
HTML

<div class="search-content__inner-wrap">
{%- assign search_provider = site.search_provider | default: "lunr" -%}
{%- case search_provider -%}
{%- when "lunr" -%}
<form class="search-content__form" onkeydown="return event.key != 'Enter';">
<label class="sr-only" for="search">
{{ site.data.ui-text[site.locale].search_label_text | default: 'Enter your search term...' }}
</label>
<input type="search" id="search" 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"></div>
{%- when "google" -%}
<form onsubmit="return googleCustomSearchExecute();" id="cse-search-box-form-id">
<label class="sr-only" for="cse-search-input-box-id">
{{ site.data.ui-text[site.locale].search_label_text | default: 'Enter your search term...' }}
</label>
<input type="search" 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...' }}" />
</form>
<div id="results" class="results">
<gcse:searchresults-only></gcse:searchresults-only>
</div>
{%- when "algolia" -%}
<div class="search-searchbar"></div>
<div class="search-hits"></div>
{%- endcase -%}
</div>