Accessibility enhancements for Lunr search form

Author: mmistakes

CHANGELOG.md

@@ -5,6 +5,11 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/)
 and this project adheres to [Semantic Versioning](http://semver.org/).
 
+## Unreleased
+
+### Added
+- Accessibility enhancements for Lunr search form.
+
 ## [1.3.1] - 2018-02-16
 
 ### Changed

_data/theme.yml

@@ -9,6 +9,7 @@ t:
   skip_footer: "Skip to footer"
   menu: "Menu"
   search: "Search"
+  site_search: "Site Search"
   results_found: "Result(s) found"
   search_placeholder_text: "Enter your search term..."
   home: "Home"

_includes/search-form.html

@@ -3,7 +3,8 @@
     {%- assign search_provider = site.search_provider | default: "lunr" -%}
     {%- case search_provider -%}
       {%- when "lunr" -%}
-        <input type="text" id="search" class="search-input" tabindex="-1" placeholder="{{ site.data.theme.t.menu.search_placeholder_text | default: 'Enter your search term...' }}" />
+        <label class="visually-hidden" for="search">{{ site.data.theme.t.site_search | default: 'Site Search' }}</label>
+        <input type="text" id="search" class="search-input" aria-describedby="results-count" tabindex="-1" placeholder="{{ site.data.theme.t.menu.search_placeholder_text | default: 'Enter your search term...' }}" />
         <div id="results" class="results"></div>
       {%- when "algolia" -%}
         <div tabindex="-1" class="search-searchbar"></div>

_includes/search/lunr-search-scripts.html

@@ -88,7 +88,7 @@
             })
           });
         resultdiv.empty();
-        resultdiv.prepend('<p class="results-found">' + result.length + ' {{ site.data.theme.t.menu.results_found | default: "Result(s) found" }}</p>');
+        resultdiv.prepend('<p id="results-count" class="results-found">' + result.length + ' {{ site.data.theme.t.menu.results_found | default: "Result(s) found" }}</p>');
         for (var item in result) {
           var ref = result[item].ref;
           var searchitem =