Fixes aria issues on search form (mmistakes#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 mmistakes#2180

_data/ui-text.yml

@@ -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."
  loading_label : "Loading..."
  search_placeholder_text : "Enter your search term..."
+ search_label_text : "Enter your search term..."
  results_found : "Result(s) found"
  back_to_top : "Back to top"
 en-US:

_includes/search/search_form.html

@@ -1,18 +1,26 @@
 <div class="search-content__inner-wrap">
-{%- assign search_provider = site.search_provider | default: "lunr" -%}
-{%- case search_provider -%}
+ {%- assign search_provider = site.search_provider | default: "lunr" -%}
+ {%- case search_provider -%}
  {%- 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...' }}" />
- <div id="results" class="results"></div>
+ <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">
- <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> 
- </div>
+ <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 class="search-searchbar"></div>
+ <div class="search-hits"></div>
+ {%- endcase -%}
 </div>

_sass/minimal-mistakes/_search.scss

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