From 6b7b9dee75fbd15c001fae7de7f5c24dfdf8b497 Mon Sep 17 00:00:00 2001
From: Jim Drury <JimDrury@users.noreply.github.com>
Date: Wed, 17 Jul 2019 21:05:50 +0100
Subject: [PATCH] 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
---
 _data/ui-text.yml                   |  1 +
 _includes/search/search_form.html   | 34 ++++++++++++++++++-----------
 _sass/minimal-mistakes/_search.scss |  6 +++++
 3 files changed, 28 insertions(+), 13 deletions(-)

diff --git a/_data/ui-text.yml b/_data/ui-text.yml
index 576cb73..6dd2ae5 100644
--- a/_data/ui-text.yml
+++ b/_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:
diff --git a/_includes/search/search_form.html b/_includes/search/search_form.html
index 925f6cd..c346379 100644
--- a/_includes/search/search_form.html
+++ b/_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>
diff --git a/_sass/minimal-mistakes/_search.scss b/_sass/minimal-mistakes/_search.scss
index 85bf311..fa7ee83 100644
--- a/_sass/minimal-mistakes/_search.scss
+++ b/_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;
-- 
2.43.0