From 90a445acd663ad866513750751233d86debcd8b1 Mon Sep 17 00:00:00 2001
From: octopusinvitro <octopusinvitro@users.noreply.github.com>
Date: Thu, 22 Sep 2016 12:17:39 +0100
Subject: [PATCH 1/2] Use tidy-html5 to validate the home page

Errors corrected:
- Attribute "placeholder" not allowed on element "select" at this point. At line 86, column 189
- Attribute "autocorrect" not allowed on element "select" at this point. At line 86, column 189
- Attribute "autocomplete" not allowed on element "select" at this point. At line 86, column 189
---
 t/web/basic.rb             | 8 ++++++++
 views/country_selector.erb | 2 +-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/t/web/basic.rb b/t/web/basic.rb
index 258d99c96..cf2989340 100644
--- a/t/web/basic.rb
+++ b/t/web/basic.rb
@@ -66,4 +66,12 @@
       last_response.status.must_equal 404
     end
   end
+
+  describe 'HTML validation' do
+    before { get '/' }
+
+    it 'has no errors in the home page' do
+      last_response_must_be_valid
+    end
+  end
 end
diff --git a/views/country_selector.erb b/views/country_selector.erb
index 6315bcc5d..48aa4ed99 100644
--- a/views/country_selector.erb
+++ b/views/country_selector.erb
@@ -1,4 +1,4 @@
-<select class="field js-select-to-autocomplete" placeholder="Search by country name" name="Country" id="country-selector" autofocus="autofocus" autocorrect="off" autocomplete="off">
+<select class="field js-select-to-autocomplete" name="Country" id="country-selector" autofocus="autofocus">
     <option value="" selected="selected">Select Country</option>
   <% @page.all_countries.each do |country| %>
     <option value="<%= country.slug %>" data-alternative-spellings="<%= country.names %>" title="<%= commify(country.total_people) %> <% if country.total_people == 1 %>person<% else %>people<% end %>"><%= country.name %></option>

From 7377c5c6b2d57e2f9a4ffea393cbf54d63606408 Mon Sep 17 00:00:00 2001
From: octopusinvitro <octopusinvitro@users.noreply.github.com>
Date: Thu, 22 Sep 2016 15:09:58 +0100
Subject: [PATCH 2/2] Add placeholder back to the select through JavaScript.

---
 public/javascript/main.js | 28 +++++++++++++++++++---------
 views/homepage.erb        |  7 ++++++-
 2 files changed, 25 insertions(+), 10 deletions(-)

diff --git a/public/javascript/main.js b/public/javascript/main.js
index b44493b48..b2995e77b 100644
--- a/public/javascript/main.js
+++ b/public/javascript/main.js
@@ -461,15 +461,25 @@ $(function(){
   });
 
   // http://baymard.com/labs/country-selector
-  $('.js-select-to-autocomplete').selectToAutocomplete().on('change', function(){
-    var v = $(this).val();
-    if (v) {
-      // Assumes the <option>'s `value` attribute is a URL slug for the country
-      window.location.href = '/' + v + '/';
-    }
-  }).on('focus', function(){
-    $(this).next().trigger("focus");
-  });
+  var $placeholder = $('#js-placeholder');
+  $('.js-select-to-autocomplete')
+    .attr({
+      placeholder:  $placeholder.text(),
+      autocorrect:  'off',
+      autocomplete: 'off'
+    })
+    .selectToAutocomplete()
+    .on('change', function(){
+      var v = $(this).val();
+      if (v) {
+        // Assumes the <option>'s `value` attribute is a URL slug for the country
+        window.location.href = '/' + v + '/';
+      }
+    })
+    .on('focus', function(){
+      $(this).next().trigger("focus");
+    });
+  $placeholder.attr('class', 'hidden')
 
   // Fix the incorrect default autocomplete width, which meant that
   // autocomplete menu was longer than the search input it's linked to.
diff --git a/views/homepage.erb b/views/homepage.erb
index c359f4173..02d91de3c 100644
--- a/views/homepage.erb
+++ b/views/homepage.erb
@@ -1,7 +1,12 @@
 <div class="hero hero--jazzy text-center homepage-hero">
     <div class="container">
         <h1><%= commify(@page.total_people) %> politicians from <a href="/countries.html"><%= @page.countries_with_data.count %> countries</a> (so far)</h1>
-        <p><label for="country-selector">Find representatives from your country:</label></p>
+        <p>
+          <label for="country-selector">
+            Find representatives from your country:
+            <span id="js-placeholder">Search by country name</span>
+          </label>
+        </p>
         <%= erb :country_selector %>
     </div>
     <div class="homepage-map"></div>