N-archive/hacks-guide-minimal-mistakes-theme
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Fixes aria issues on search form (#2211)

Browse source 
* 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
This commit is contained in:
Jim Drury 2019-07-17 21:05:50 +01:00 committed by Michael Rose
parent 75c120f56d
commit af772af56f
3 changed files with 28 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
_data/ui-text.yml
View file

@ -46,6 +46,7 @@ en: &DEFAULT_EN
comment_error_msg : "Sorry, there was an error with your submission. Please make sure all required fields have been completed and try again." comment_error_msg : "Sorry, there was an error with your submission. Please make sure all required fields have been completed and try again."
loading_label : "Loading..." loading_label : "Loading..."
search_placeholder_text : "Enter your search term..." search_placeholder_text : "Enter your search term..."
search_label_text : "Enter your search term..."
results_found : "Result(s) found" results_found : "Result(s) found"
back_to_top : "Back to top" back_to_top : "Back to top"
en-US: en-US:

34
_includes/search/search_form.html
View file

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

6
_sass/minimal-mistakes/_search.scss
View file

@ -50,6 +50,11 @@
@include breakpoint($x-large) { @include breakpoint($x-large) {
max-width: $max-width; max-width: $max-width;
} }
}
&__form {
background-color: transparent;
} }
.search-input { .search-input {
@ -119,6 +124,7 @@
font-style: normal; font-style: normal;
text-decoration: underline; text-decoration: underline;
} }
.archive__item-excerpt .ais-Highlight { .archive__item-excerpt .ais-Highlight {
color: $primary-color; color: $primary-color;
font-style: normal; font-style: normal;