Use new radio buttons and checkboxes from GOV.UK elements

Gemfile

@@ -70,8 +70,7 @@ end
 group :test, :development do
   gem 'rspec', '~> 3.5.0'
   gem 'rspec-rails', '~> 3.5.0'
-  gem 'capybara', '~> 2.6'
-  gem 'capybara-puma'
+  gem 'capybara', '~> 2.10'
   gem 'govuk-lint'
   gem 'webmock', require: false
   gem 'rack-test'

Gemfile.lock

@@ -39,7 +39,8 @@ GEM
       i18n (~> 0.7)
       minitest (~> 5.1)
       tzinfo (~> 1.1)
-    addressable (2.4.0)
+    addressable (2.5.0)
+      public_suffix (~> 2.0, >= 2.0.2)
     archive-tar-minitar (0.5.2)
     arel (7.1.4)
     arr-pm (0.0.10)
@@ -51,16 +52,13 @@ GEM
     builder (3.2.2)
     byebug (8.2.2)
     cabin (0.9.0)
-    capybara (2.6.2)
+    capybara (2.10.1)
       addressable
       mime-types (>= 1.16)
       nokogiri (>= 1.3.3)
       rack (>= 1.0.0)
       rack-test (>= 0.5.4)
       xpath (~> 2.0)
-    capybara-puma (1.0.1)
-      capybara
-      puma
     childprocess (0.5.9)
       ffi (~> 1.0, >= 1.0.11)
     clamp (1.0.0)
@@ -103,14 +101,14 @@ GEM
     govuk-lint (1.2.1)
       rubocop (~> 0.39.0)
       scss_lint
-    govuk_elements_rails (2.1.0)
-      govuk_frontend_toolkit (>= 5.0.0)
+    govuk_elements_rails (2.2.1)
+      govuk_frontend_toolkit (>= 5.0.2)
       rails (>= 4.1.0)
       sass (>= 3.2.0)
-    govuk_frontend_toolkit (5.0.0)
+    govuk_frontend_toolkit (5.0.2)
       rails (>= 3.1.0)
       sass (>= 3.2.0)
-    govuk_template (0.19.0)
+    govuk_template (0.19.1)
       rails (>= 3.1)
     hashdiff (0.3.0)
     hashie (3.4.4)
@@ -156,7 +154,7 @@ GEM
       mime-types-data (~> 3.2015)
     mime-types-data (3.2016.0521)
     mini_portile2 (2.1.0)
-    minitest (5.9.1)
+    minitest (5.10.0)
     mixlib-log (1.7.1)
     mixlib-shellout (1.6.1)
     multi_json (1.11.2)
@@ -182,7 +180,8 @@ GEM
       mustache (= 0.99.8)
       stud
     powerpack (0.1.1)
-    puma (3.1.1)
+    public_suffix (2.0.4)
+    puma (3.6.0)
     rack (2.0.1)
     rack-handlers (0.7.2)
       rack
@@ -295,7 +294,7 @@ GEM
       daemons (~> 1.0, >= 1.0.9)
       eventmachine (~> 1.0, >= 1.0.4)
       rack (>= 1, < 3)
-    thor (0.19.1)
+    thor (0.19.4)
     thread_safe (0.3.5)
     tilt (2.0.5)
     tzinfo (1.2.2)
@@ -335,8 +334,7 @@ PLATFORMS
 
 DEPENDENCIES
   byebug
-  capybara (~> 2.6)
-  capybara-puma
+  capybara (~> 2.10)
   connection_pool
   dotenv-rails
   email_validator

app/assets/stylesheets/_application.scss

@@ -3,7 +3,6 @@
 
 // Helpers for common page elements
 @import "helpers/available-languages";
-@import "helpers/block-label";
 @import "helpers/validation-message";
 @import "helpers/meta-data";
 @import "helpers/feedback-link";

app/assets/stylesheets/pages/_select-phone.scss

@@ -1,3 +0,0 @@
-.select-phone-form {
-  margin-top: 1em;
-}

app/assets/stylesheets/pages/_slides.scss

@@ -49,6 +49,17 @@
     color: inherit;
   }
 
+  // Override elements radio button colour for start page
+  // This should be tested to work out whether it
+  // performs better with the override or without.
+  .block-label.selection-button-radio {
+    &::before,
+    &::after {
+      background-color: $white;
+      border-color: $text-colour;
+    }
+  }
+
   .actions {
     margin: $gutter 0 $gutter-half;
 
@@ -93,12 +104,6 @@
 
 .hub-start {
 
-  .button {
-    @include media(tablet) {
-      margin-left: $gutter-half;
-    }
-  }
-
   .error,
   .validation-message {
     border-color: $white;
@@ -107,16 +112,6 @@
 
   .block-label {
     @include core-24;
-    background: transparent;
-    border: 0;
-
-    &.selected {
-      background: transparent;
-    }
-
-    &:hover {
-      background-color: $link-hover-colour;
-    }
   }
 
 }

app/views/select_phone/index.html.erb

@@ -15,7 +15,9 @@
 
         <%= content_tag :div, class: form_question_class do %>
             <fieldset class="inline">
-              <legend class="visually-hidden"><%= t 'hub.select_phone.question.mobile_phone' %></legend>
+              <legend class="visually-hidden">
+                <span class="form-label"><%= t 'hub.select_phone.question.mobile_phone' %></span>
+              </legend>
               <%= f.custom_radio_button :mobile_phone, true, t('hub.select_phone.question.mobile_phone_option_yes') %>
               <%= f.custom_radio_button :mobile_phone, false, t('option.no') %>
             </fieldset>
@@ -24,7 +26,7 @@
         <%= content_tag :div, id: 'smartphone-question', class: hidden_form_question_class do %>
             <fieldset>
               <legend>
-                <%= t 'hub.select_phone.question.smart_phone' %>
+                <span class="form-label"><%= t 'hub.select_phone.question.smart_phone' %></span>
               </legend>
               <p class="form-hint"><%= t 'hub.select_phone.question.smart_phone_subtitle' %></p>
               <%= f.custom_radio_button :smart_phone, true, t('hub.select_phone.question.smart_phone_option_yes') %>
@@ -34,7 +36,9 @@
         <% end %>
         <%= content_tag :div, id: 'landline-question', class: hidden_form_question_class do %>
             <fieldset class="inline">
-              <legend><%= t 'hub.select_phone.question.landline' %></legend>
+              <legend>
+                <span class="form-label"><%= t 'hub.select_phone.question.landline' %></span>
+              </legend>
               <%= f.custom_radio_button :landline, true, t('hub.select_phone.question.landline_option_yes') %>
               <%= f.custom_radio_button :landline, false, t('option.no') %>
             </fieldset>

app/views/will_it_work_for_me/index.html.erb

@@ -12,21 +12,27 @@
         <% end %>
         <%= content_tag :div, class: form_question_class do %>
             <fieldset class="inline">
-              <legend><%= t 'hub.will_it_work_for_me.question.above_age_threshold' %></legend>
+              <legend>
+                <span class="form-label"><%= t 'hub.will_it_work_for_me.question.above_age_threshold' %></span>
+              </legend>
               <%= f.custom_radio_button :above_age_threshold, true, t('hub.will_it_work_for_me.question.option_yes') %>
               <%= f.custom_radio_button :above_age_threshold, false, t('option.no') %>
             </fieldset>
         <% end %>
         <%= content_tag :div, class: form_question_class do %>
             <fieldset class="inline">
-              <legend><%= t 'hub.will_it_work_for_me.question.resident_last_12_months' %></legend>
+              <legend>
+                <span class="form-label"><%= t 'hub.will_it_work_for_me.question.resident_last_12_months' %></span>
+              </legend>
               <%= f.custom_radio_button :resident_last_12_months, true, t('hub.will_it_work_for_me.question.option_yes') %>
               <%= f.custom_radio_button :resident_last_12_months, false, t('option.no') %>
             </fieldset>
         <% end %>
         <%= content_tag :div, id: :not_resident_reason, class: hidden_form_question_class do %>
-            <fieldset class="inline">
-              <legend><%= t 'hub.will_it_work_for_me.question.not_resident_reason.title' %></legend>
+            <fieldset>
+              <legend>
+                <span class="form-label"><%= t 'hub.will_it_work_for_me.question.not_resident_reason.title' %></span>
+              </legend>
               <%= f.custom_radio_button :not_resident_reason, 'MovedRecently', t('hub.will_it_work_for_me.question.not_resident_reason.recently') %>
               <%= f.custom_radio_button :not_resident_reason, 'AddressButNotResident', t('hub.will_it_work_for_me.question.not_resident_reason.not_resident') %>
               <%= f.custom_radio_button :not_resident_reason, 'NoAddress', t('hub.will_it_work_for_me.question.not_resident_reason.no_address') %>

lib/verify_form_builder.rb

@@ -1,18 +1,16 @@
 class VerifyFormBuilder < ActionView::Helpers::FormBuilder
-  # Our custom radio / checkbox implementation. Workarounds:
-  # 1. empty onclick attribute for iOS5 support
-  # 2. blank space in the inner span to let JAWS-on-IE read the following text
+  # Our custom radio / checkbox implementation
   def custom_radio_button key, value, text, attributes = {}
-    label "#{key}_#{value.to_s.parameterize}", class: 'block-label', onclick: '' do
+    label "#{key}_#{value.to_s.parameterize}", class: 'block-label selection-button-radio' do
       input = radio_button key, value, attributes
-      "#{input} <span><span class=\"inner\">&nbsp;</span></span> #{text}".html_safe
+      "#{input} #{text}".html_safe
     end
   end
 
   def custom_check_box key, attributes, true_value, false_value, text
-    label key, class: 'block-label', onclick: '' do
+    label key, class: 'block-label selection-button-checkbox' do
       input = check_box key, attributes, true_value, false_value
-      "#{input} <span><span class=\"inner\">&nbsp;</span></span> #{text}".html_safe
+      "#{input} #{text}".html_safe
     end
   end
 end