From 287703309218d528a4066065a964b2bf2832046b Mon Sep 17 00:00:00 2001
From: Robin Whittleton <robin.whittleton@digital.cabinet-office.gov.uk>
Date: Fri, 26 Aug 2016 21:04:14 +0100
Subject: [PATCH 01/15] Custom radios / checkboxes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This requires no change to the existing HTML: the custom inputs are built using pseudoelements. In a no-JS / no-CSS / IE8 scenario it falls back to standard inputs. To style the radio and checkboxes differently a class is needed on the label. As the selected state requires the SelectionButton class from govuk_frontend_toolkit this was updated to add this automatically, and will need to be merged at the same time.

This is partially based on Verify’s styles, and updates a design by @timpaul. The inputs are sized to match the height of text inputs.

Tested on:
- IE 7-11
- Edge 14
- OS X Firefox 48
- OS X Chrome 51
- OS X Safari 9
- iOS Safari 5.0 - 9.1
- Android 4.4+ Chrome

Android Browser on BrowserStack’s Nexus 4 (4.2) is massively unresponsive and doesn’t seem to let you click on the radios most of the time. It will need to be tested on a real device.
---
 .../elements/forms/_form-block-labels.scss    | 95 ++++++++++++++-----
 1 file changed, 73 insertions(+), 22 deletions(-)

diff --git a/public/sass/elements/forms/_form-block-labels.scss b/public/sass/elements/forms/_form-block-labels.scss
index 67311477c..1c42107d4 100644
--- a/public/sass/elements/forms/_form-block-labels.scss
+++ b/public/sass/elements/forms/_form-block-labels.scss
@@ -9,11 +9,9 @@
   clear: left;
   position: relative;
 
-  background: $panel-colour;
-  border: 1px solid $panel-colour;
-  padding: (18px $gutter $gutter-half $gutter * 1.8);
+  padding: (7px $gutter-one-third 7px $gutter * 1.5);
+  margin-bottom: $gutter-half;
 
-  margin-bottom: 10px;
   cursor: pointer; // Encourage clicking on block labels
 
   @include media(tablet) {
@@ -24,21 +22,74 @@
   // Absolutely position inputs within label, to allow text to wrap
   input {
     position: absolute;
-    top: 15px;
-    left: $gutter-half;
     cursor: pointer;
-    margin: 0;
-    width: 29px;
-    height: 29px;
+    left: 0;
+    top: 0;
+    width: 37px;
+    height: 37px;
+
+    .js-enabled & {
+      // hide off-sceeen, as visibility: hidden removes inputs from tab order
+      left: -9999px;
+    }
 
-    @include ie(8) {
-      top: 12px;
+    @include ie-lte(8) {
+      &,
+      .js-enabled & {
+        left: 0;
+      }
     }
   }
 
-  // Change border on hover
-  &:hover {
-    border-color: $black;
+  .js-enabled & {
+    &.selection-button-radio::before {
+      content: "";
+      border: 2px solid $black;
+      border-radius: 50%;
+      background: $white;
+      width: 33px;
+      height: 33px;
+      position: absolute;
+      top: 0;
+      left: 0;
+    }
+
+    &.selection-button-radio.selected::after {
+      content: "";
+      border: 2px solid $black;
+      border-radius: 50%;
+      background: $black;
+      width: 19px;
+      height: 19px;
+      position: absolute;
+      top: 7px;
+      left: 7px;
+    }
+
+    &.selection-button-checkbox::before {
+      content: "";
+      border: 2px solid $black;
+      background: $white;
+      width: 33px;
+      height: 33px;
+      position: absolute;
+      top: 0;
+      left: 0;
+    }
+
+    &.selection-button-checkbox.selected::after {
+      content: "";
+      border: solid $black;
+      border-width: 0 0 4px 4px;
+      width: 15px;
+      height: 9px;
+      position: absolute;
+      top: 9px;
+      left: 9px;
+      -webkit-transform: rotate(-45deg); // Safari 8 compatibility
+      -ms-transform: rotate(-45deg); // IE9 compatibility
+      transform: rotate(-45deg);
+    }
   }
 
   &:last-child,
@@ -53,7 +104,7 @@
 
   @include media (tablet) {
     margin-bottom: 0;
-    margin-right: 10px;
+    margin-right: $gutter-half;
   }
 }
 
@@ -62,15 +113,15 @@
 // Allow a qualifying element for the selected state
 // scss-lint:disable QualifyingElement
 
-// Add selected state
-.js-enabled label.selected {
-  background: $white;
-  border-color: $black;
+// Add focus to block labels inputs
+.js-enabled label.focused::before {
+  @include box-shadow(0 0 0 3px $focus-colour);
 }
 
-// Add focus to block labels
-.js-enabled label.focused {
-  outline: 3px solid $focus-colour;
+@include ie-lte(8) {
+  .js-enabled label.focused {
+    outline: 3px solid $focus-colour;
+  }
 }
 
 // scss-lint:enable QualifyingElement

From 874e2875dcc21e098f1e41947b0de67264e78e74 Mon Sep 17 00:00:00 2001
From: Robin Whittleton <robin.whittleton@digital.cabinet-office.gov.uk>
Date: Mon, 29 Aug 2016 14:54:20 +0100
Subject: [PATCH 02/15] Fix Selenium tests with block-label inputs
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Preliminary testing of the new inputs on Verify showed a bunch of test failures with messages like `Unable to find radio button`. Switching the off-screen hiding to use our standard `visually-hidden` code (slightly amended so we can use a mixing instead of extending the class) fixes this.

As unsetting this code would be a good deal more complex than unsetting a single `left` value, I’ve also altered the initial hiding to exclude IE8.
---
 public/sass/elements/_helpers.scss                 |  8 ++++++--
 public/sass/elements/forms/_form-block-labels.scss | 11 +++--------
 2 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/public/sass/elements/_helpers.scss b/public/sass/elements/_helpers.scss
index 739d53e48..5cfff5f9f 100644
--- a/public/sass/elements/_helpers.scss
+++ b/public/sass/elements/_helpers.scss
@@ -22,8 +22,7 @@
 }
 
 // Hide, but not for screenreaders
-.visually-hidden,
-.visuallyhidden {
+@mixin visually-hidden {
   position: absolute;
   overflow: hidden;
   clip: rect(0 0 0 0);
@@ -33,3 +32,8 @@
   padding: 0;
   border: 0;
 }
+
+.visually-hidden,
+.visuallyhidden {
+  @include visually-hidden;
+}
diff --git a/public/sass/elements/forms/_form-block-labels.scss b/public/sass/elements/forms/_form-block-labels.scss
index 1c42107d4..090b863da 100644
--- a/public/sass/elements/forms/_form-block-labels.scss
+++ b/public/sass/elements/forms/_form-block-labels.scss
@@ -28,15 +28,10 @@
     width: 37px;
     height: 37px;
 
-    .js-enabled & {
-      // hide off-sceeen, as visibility: hidden removes inputs from tab order
-      left: -9999px;
-    }
-
-    @include ie-lte(8) {
-      &,
+    // IE8 doesn’t support pseudoelements, so we don’t want to hide native elements.
+    @if ($is-ie == false) or ($ie-version == 9) {
       .js-enabled & {
-        left: 0;
+        @include visually-hidden;
       }
     }
   }

From 4972b81697fbf5b9ac12a211010c623e625ab3ab Mon Sep 17 00:00:00 2001
From: Robin Whittleton <robin.whittleton@digital.cabinet-office.gov.uk>
Date: Tue, 30 Aug 2016 16:12:03 +0100
Subject: [PATCH 03/15] Use currentColor instead of $black for custom radios /
 checkboxes

Users who want to redefine their browser colours should have the radios / checkboxes follow suit.
---
 .../sass/elements/forms/_form-block-labels.scss   | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/public/sass/elements/forms/_form-block-labels.scss b/public/sass/elements/forms/_form-block-labels.scss
index 090b863da..c5171673c 100644
--- a/public/sass/elements/forms/_form-block-labels.scss
+++ b/public/sass/elements/forms/_form-block-labels.scss
@@ -39,9 +39,9 @@
   .js-enabled & {
     &.selection-button-radio::before {
       content: "";
-      border: 2px solid $black;
+      border: 2px solid currentColor;
       border-radius: 50%;
-      background: $white;
+      background: transparent;
       width: 33px;
       height: 33px;
       position: absolute;
@@ -51,9 +51,9 @@
 
     &.selection-button-radio.selected::after {
       content: "";
-      border: 2px solid $black;
+      border: 2px solid currentColor;
       border-radius: 50%;
-      background: $black;
+      background: currentColor;
       width: 19px;
       height: 19px;
       position: absolute;
@@ -63,8 +63,8 @@
 
     &.selection-button-checkbox::before {
       content: "";
-      border: 2px solid $black;
-      background: $white;
+      border: 2px solid currentColor;
+      background: transparent;
       width: 33px;
       height: 33px;
       position: absolute;
@@ -74,8 +74,9 @@
 
     &.selection-button-checkbox.selected::after {
       content: "";
-      border: solid $black;
+      border: solid currentColor;
       border-width: 0 0 4px 4px;
+      background: transparent;
       width: 15px;
       height: 9px;
       position: absolute;

From 1a2a18f0ddb895cab2a59bd8d879d0a821c928f3 Mon Sep 17 00:00:00 2001
From: Robin Whittleton <robin.whittleton@digital.cabinet-office.gov.uk>
Date: Tue, 30 Aug 2016 16:17:22 +0100
Subject: [PATCH 04/15] Repaint rather than redraw custom radios / checkboxes

By just changing the background and border colours we can lat the browser repaint rather than redraw which is slightly quicker. This way also makes it easier to add in hover states at a future date.
---
 .../elements/forms/_form-block-labels.scss    | 21 ++++++++++++-------
 1 file changed, 14 insertions(+), 7 deletions(-)

diff --git a/public/sass/elements/forms/_form-block-labels.scss b/public/sass/elements/forms/_form-block-labels.scss
index c5171673c..2e91a63ea 100644
--- a/public/sass/elements/forms/_form-block-labels.scss
+++ b/public/sass/elements/forms/_form-block-labels.scss
@@ -49,18 +49,21 @@
       left: 0;
     }
 
-    &.selection-button-radio.selected::after {
+    &.selection-button-radio::after {
       content: "";
-      border: 2px solid currentColor;
       border-radius: 50%;
-      background: currentColor;
-      width: 19px;
-      height: 19px;
+      background: transparent;
+      width: 23px;
+      height: 23px;
       position: absolute;
       top: 7px;
       left: 7px;
     }
 
+    &.selection-button-radio.selected::after {
+      background: currentColor;
+    }
+
     &.selection-button-checkbox::before {
       content: "";
       border: 2px solid currentColor;
@@ -72,9 +75,9 @@
       left: 0;
     }
 
-    &.selection-button-checkbox.selected::after {
+    &.selection-button-checkbox::after {
       content: "";
-      border: solid currentColor;
+      border: solid transparent;
       border-width: 0 0 4px 4px;
       background: transparent;
       width: 15px;
@@ -86,6 +89,10 @@
       -ms-transform: rotate(-45deg); // IE9 compatibility
       transform: rotate(-45deg);
     }
+
+    &.selection-button-checkbox.selected::after {
+      border-color: currentColor;
+    }
   }
 
   &:last-child,

From 511dc70b35954bb6e23f1be1b2e280c84ca69712 Mon Sep 17 00:00:00 2001
From: Robin Whittleton <robin.whittleton@digital.cabinet-office.gov.uk>
Date: Thu, 1 Sep 2016 15:54:20 +0100
Subject: [PATCH 05/15] Tweak radio/checkbox styles

- Thicken checkmark
- Decrease size of radio bullet
- Increase focus ring size
- Reduce spacing between related inputs
- Increase padding between input and text
---
 .../elements/forms/_form-block-labels.scss    | 40 ++++++++++---------
 1 file changed, 21 insertions(+), 19 deletions(-)

diff --git a/public/sass/elements/forms/_form-block-labels.scss b/public/sass/elements/forms/_form-block-labels.scss
index 2e91a63ea..7ca5ed771 100644
--- a/public/sass/elements/forms/_form-block-labels.scss
+++ b/public/sass/elements/forms/_form-block-labels.scss
@@ -9,13 +9,15 @@
   clear: left;
   position: relative;
 
-  padding: (7px $gutter-one-third 7px $gutter * 1.5);
-  margin-bottom: $gutter-half;
+  padding: (8px $gutter-one-third 9px 50px);
+  margin-bottom: $gutter-one-third;
 
   cursor: pointer; // Encourage clicking on block labels
 
   @include media(tablet) {
     float: left;
+    padding-top: 7px;
+    padding-bottom: 7px;
     // width: 25%; - Test : check that text within labels will wrap
   }
 
@@ -25,8 +27,8 @@
     cursor: pointer;
     left: 0;
     top: 0;
-    width: 37px;
-    height: 37px;
+    width: 38px;
+    height: 38px;
 
     // IE8 doesn’t support pseudoelements, so we don’t want to hide native elements.
     @if ($is-ie == false) or ($ie-version == 9) {
@@ -42,8 +44,8 @@
       border: 2px solid currentColor;
       border-radius: 50%;
       background: transparent;
-      width: 33px;
-      height: 33px;
+      width: 34px;
+      height: 34px;
       position: absolute;
       top: 0;
       left: 0;
@@ -53,11 +55,11 @@
       content: "";
       border-radius: 50%;
       background: transparent;
-      width: 23px;
-      height: 23px;
+      width: 20px;
+      height: 20px;
       position: absolute;
-      top: 7px;
-      left: 7px;
+      top: 9px;
+      left: 9px;
     }
 
     &.selection-button-radio.selected::after {
@@ -68,8 +70,8 @@
       content: "";
       border: 2px solid currentColor;
       background: transparent;
-      width: 33px;
-      height: 33px;
+      width: 34px;
+      height: 34px;
       position: absolute;
       top: 0;
       left: 0;
@@ -78,13 +80,13 @@
     &.selection-button-checkbox::after {
       content: "";
       border: solid transparent;
-      border-width: 0 0 4px 4px;
+      border-width: 0 0 5px 5px;
       background: transparent;
-      width: 15px;
-      height: 9px;
+      width: 17px;
+      height: 7px;
       position: absolute;
-      top: 9px;
-      left: 9px;
+      top: 10px;
+      left: 8px;
       -webkit-transform: rotate(-45deg); // Safari 8 compatibility
       -ms-transform: rotate(-45deg); // IE9 compatibility
       transform: rotate(-45deg);
@@ -107,7 +109,7 @@
 
   @include media (tablet) {
     margin-bottom: 0;
-    margin-right: $gutter-half;
+    margin-right: $gutter;
   }
 }
 
@@ -118,7 +120,7 @@
 
 // Add focus to block labels inputs
 .js-enabled label.focused::before {
-  @include box-shadow(0 0 0 3px $focus-colour);
+  @include box-shadow(0 0 0 5px $focus-colour);
 }
 
 @include ie-lte(8) {

From a844cd2a472b82e84306f7a2c4fc5a0990c01cbb Mon Sep 17 00:00:00 2001
From: Robin Whittleton <robin.whittleton@digital.cabinet-office.gov.uk>
Date: Thu, 1 Sep 2016 16:08:34 +0100
Subject: [PATCH 06/15] Radio / checkbox hover state
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

We want a light hover state. As we’re using currentColor we can’t change this directly. This moves to an opacity solution for the marker that lets us set a low opacity for hover.
---
 .../elements/forms/_form-block-labels.scss    | 26 +++++++++++++------
 1 file changed, 18 insertions(+), 8 deletions(-)

diff --git a/public/sass/elements/forms/_form-block-labels.scss b/public/sass/elements/forms/_form-block-labels.scss
index 7ca5ed771..2ee889a4e 100644
--- a/public/sass/elements/forms/_form-block-labels.scss
+++ b/public/sass/elements/forms/_form-block-labels.scss
@@ -54,16 +54,13 @@
     &.selection-button-radio::after {
       content: "";
       border-radius: 50%;
-      background: transparent;
+      background: currentColor;
       width: 20px;
       height: 20px;
       position: absolute;
       top: 9px;
       left: 9px;
-    }
-
-    &.selection-button-radio.selected::after {
-      background: currentColor;
+      @include opacity(0);
     }
 
     &.selection-button-checkbox::before {
@@ -79,7 +76,7 @@
 
     &.selection-button-checkbox::after {
       content: "";
-      border: solid transparent;
+      border: solid currentColor;
       border-width: 0 0 5px 5px;
       background: transparent;
       width: 17px;
@@ -90,10 +87,23 @@
       -webkit-transform: rotate(-45deg); // Safari 8 compatibility
       -ms-transform: rotate(-45deg); // IE9 compatibility
       transform: rotate(-45deg);
+      @include opacity(0);
     }
 
-    &.selection-button-checkbox.selected::after {
-      border-color: currentColor;
+    // Hover state
+    &.selection-button-radio,
+    &.selection-button-checkbox {
+      &:hover::after {
+        @include opacity(.15);
+      }
+    }
+
+    // Selected state
+    &.selection-button-radio,
+    &.selection-button-checkbox {
+      &.selected::after {
+        @include opacity(1);
+      }
     }
   }
 

From 7c6fc6aefdb63bd838aadb0d502ba3c59903899a Mon Sep 17 00:00:00 2001
From: Robin Whittleton <robin.whittleton@digital.cabinet-office.gov.uk>
Date: Fri, 2 Sep 2016 18:40:49 +0100
Subject: [PATCH 07/15] Move trailing focus states into the main style block

The new selectors point at just the correct elements now.
---
 .../elements/forms/_form-block-labels.scss    | 44 +++++++++----------
 1 file changed, 20 insertions(+), 24 deletions(-)

diff --git a/public/sass/elements/forms/_form-block-labels.scss b/public/sass/elements/forms/_form-block-labels.scss
index 2ee889a4e..f8059be47 100644
--- a/public/sass/elements/forms/_form-block-labels.scss
+++ b/public/sass/elements/forms/_form-block-labels.scss
@@ -30,7 +30,7 @@
     width: 38px;
     height: 38px;
 
-    // IE8 doesn’t support pseudoelements, so we don’t want to hide native elements.
+    // IE8 doesn’t support pseudoelements, so we don’t want to hide native elements there.
     @if ($is-ie == false) or ($ie-version == 9) {
       .js-enabled & {
         @include visually-hidden;
@@ -98,6 +98,25 @@
       }
     }
 
+    // Focused state
+    &.selection-button-radio,
+    &.selection-button-checkbox {
+      &.focused::before {
+        @include box-shadow(0 0 0 5px $focus-colour);
+      }
+      // IE8 focus outline should stay as a border around the entire label
+      // Lack of padding doesn’t matter as IE8 won’t resize the inputs.
+      @include ie-lte(8) {
+        &.focused {
+          outline: 3px solid $focus-colour;
+
+          input:focus {
+            outline: none;
+          }
+        }
+      }
+    }
+
     // Selected state
     &.selection-button-radio,
     &.selection-button-checkbox {
@@ -122,26 +141,3 @@
     margin-right: $gutter;
   }
 }
-
-// Selected and focused states
-
-// Allow a qualifying element for the selected state
-// scss-lint:disable QualifyingElement
-
-// Add focus to block labels inputs
-.js-enabled label.focused::before {
-  @include box-shadow(0 0 0 5px $focus-colour);
-}
-
-@include ie-lte(8) {
-  .js-enabled label.focused {
-    outline: 3px solid $focus-colour;
-  }
-}
-
-// scss-lint:enable QualifyingElement
-
-// Remove focus from radio/checkboxes
-.js-enabled .focused input:focus {
-  outline: none;
-}

From e654d8bc721b0eba11bd11010600fa33da1dd077 Mon Sep 17 00:00:00 2001
From: Robin Whittleton <robin.whittleton@digital.cabinet-office.gov.uk>
Date: Sat, 3 Sep 2016 13:11:02 +0100
Subject: [PATCH 08/15] =?UTF-8?q?Make=20sure=20hover=20state=20doesn?=
 =?UTF-8?q?=E2=80=99t=20=E2=80=98stick=E2=80=99=20after=20deselection?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

iOS will fake :hover states after touching to make sure that pure-CSS :hover menus still work. This has the effect on the custom checkboxes that a grey checkmark is left in place after a checkbox is deselected.

Luckily, CSS4 media queries has a hover ability query that Safari and Chrome support (Safari 9.1+, Chrome 41+). We can use this to override the grey checkmark state and make sure it’s hidden after a touch deselection.
---
 public/sass/elements/forms/_form-block-labels.scss | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/public/sass/elements/forms/_form-block-labels.scss b/public/sass/elements/forms/_form-block-labels.scss
index f8059be47..25aadb785 100644
--- a/public/sass/elements/forms/_form-block-labels.scss
+++ b/public/sass/elements/forms/_form-block-labels.scss
@@ -96,6 +96,12 @@
       &:hover::after {
         @include opacity(.15);
       }
+      // hide the hover state in iOS / mobile Chrome
+      @media (hover: none) {
+        &:hover::after {
+          opacity: 0;
+        }
+      }
     }
 
     // Focused state

From 5eb6486cd35739ada4e34f64cab5148093df7af2 Mon Sep 17 00:00:00 2001
From: Robin Whittleton <robin.whittleton@digital.cabinet-office.gov.uk>
Date: Sun, 4 Sep 2016 21:54:12 +0100
Subject: [PATCH 09/15] Fix checkbox checkmark in old Firefox + Opera
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

These releases are pre-unprefixed transform, but it’s a simple fix that’s ignored in modern browsers and we still have a few users on them.
---
 public/sass/elements/forms/_form-block-labels.scss | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/public/sass/elements/forms/_form-block-labels.scss b/public/sass/elements/forms/_form-block-labels.scss
index 25aadb785..390c74f83 100644
--- a/public/sass/elements/forms/_form-block-labels.scss
+++ b/public/sass/elements/forms/_form-block-labels.scss
@@ -84,6 +84,8 @@
       position: absolute;
       top: 10px;
       left: 8px;
+      -moz-transform: rotate(-45deg); // Firefox 15 compatibility
+      -o-transform: rotate(-45deg); // Opera 12.0 compatibility
       -webkit-transform: rotate(-45deg); // Safari 8 compatibility
       -ms-transform: rotate(-45deg); // IE9 compatibility
       transform: rotate(-45deg);

From 29f756b2c35a047ed74c4f83edae04460faf7760 Mon Sep 17 00:00:00 2001
From: Robin Whittleton <robin.whittleton@digital.cabinet-office.gov.uk>
Date: Mon, 5 Sep 2016 10:55:58 +0100
Subject: [PATCH 10/15] Tweak the text inputs to match the new radios
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 1px increase in height to 38px total
- Make the border colour match the text
- Transparent background so that user’s colour choice is respected
---
 public/sass/elements/_forms.scss | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/public/sass/elements/_forms.scss b/public/sass/elements/_forms.scss
index fdab6401b..ec29352b7 100644
--- a/public/sass/elements/_forms.scss
+++ b/public/sass/elements/_forms.scss
@@ -145,9 +145,14 @@ textarea {
   @include core-19;
   width: 100%;
 
-  padding: 4px;
-  background-color: $white;
-  border: 2px solid $grey-1;
+  padding: 5px 4px 4px;
+  background-color: transparent;
+  border: 2px solid;
+  border-color: currentColor;
+
+  @include ie-lte(8) {
+    border-color: $text-colour;
+  }
 
   // TODO: Remove 50% width set for tablet and up
   // !! BREAKING CHANGE !!

From be17207d6b5cb39fd30678fac34b47b398f3773b Mon Sep 17 00:00:00 2001
From: Robin Whittleton <robin.whittleton@digital.cabinet-office.gov.uk>
Date: Mon, 5 Sep 2016 11:00:38 +0100
Subject: [PATCH 11/15] Remove hover states for custom radios / checkboxes

Given that there are problems in older iOS with showing the hover state after unchecking a checkbox and the lack of evidence for a benefit for desktop users we decided just to remove the hover states completely.
---
 public/sass/elements/forms/_form-block-labels.scss | 14 --------------
 1 file changed, 14 deletions(-)

diff --git a/public/sass/elements/forms/_form-block-labels.scss b/public/sass/elements/forms/_form-block-labels.scss
index 390c74f83..6082ef62b 100644
--- a/public/sass/elements/forms/_form-block-labels.scss
+++ b/public/sass/elements/forms/_form-block-labels.scss
@@ -92,20 +92,6 @@
       @include opacity(0);
     }
 
-    // Hover state
-    &.selection-button-radio,
-    &.selection-button-checkbox {
-      &:hover::after {
-        @include opacity(.15);
-      }
-      // hide the hover state in iOS / mobile Chrome
-      @media (hover: none) {
-        &:hover::after {
-          opacity: 0;
-        }
-      }
-    }
-
     // Focused state
     &.selection-button-radio,
     &.selection-button-checkbox {

From a50d8e88573f9296827d7bf38b3224bb2d9d6f92 Mon Sep 17 00:00:00 2001
From: Robin Whittleton <robin.whittleton@digital.cabinet-office.gov.uk>
Date: Mon, 5 Sep 2016 13:00:46 +0100
Subject: [PATCH 12/15] Remove currentColor keyword for borders
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

They’re the default for border shorthand.
---
 public/sass/elements/_forms.scss                   | 5 -----
 public/sass/elements/forms/_form-block-labels.scss | 6 +++---
 2 files changed, 3 insertions(+), 8 deletions(-)

diff --git a/public/sass/elements/_forms.scss b/public/sass/elements/_forms.scss
index ec29352b7..0a18c1c0c 100644
--- a/public/sass/elements/_forms.scss
+++ b/public/sass/elements/_forms.scss
@@ -148,11 +148,6 @@ textarea {
   padding: 5px 4px 4px;
   background-color: transparent;
   border: 2px solid;
-  border-color: currentColor;
-
-  @include ie-lte(8) {
-    border-color: $text-colour;
-  }
 
   // TODO: Remove 50% width set for tablet and up
   // !! BREAKING CHANGE !!
diff --git a/public/sass/elements/forms/_form-block-labels.scss b/public/sass/elements/forms/_form-block-labels.scss
index 6082ef62b..1c8d15c03 100644
--- a/public/sass/elements/forms/_form-block-labels.scss
+++ b/public/sass/elements/forms/_form-block-labels.scss
@@ -41,7 +41,7 @@
   .js-enabled & {
     &.selection-button-radio::before {
       content: "";
-      border: 2px solid currentColor;
+      border: 2px solid;
       border-radius: 50%;
       background: transparent;
       width: 34px;
@@ -65,7 +65,7 @@
 
     &.selection-button-checkbox::before {
       content: "";
-      border: 2px solid currentColor;
+      border: 2px solid;
       background: transparent;
       width: 34px;
       height: 34px;
@@ -76,7 +76,7 @@
 
     &.selection-button-checkbox::after {
       content: "";
-      border: solid currentColor;
+      border: solid;
       border-width: 0 0 5px 5px;
       background: transparent;
       width: 17px;

From f5893800295637b4b4c90042015110d448e18556 Mon Sep 17 00:00:00 2001
From: Robin Whittleton <robin.whittleton@digital.cabinet-office.gov.uk>
Date: Mon, 7 Nov 2016 15:44:33 +0000
Subject: [PATCH 13/15] Use border-radius mixin
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

@nickcolley tested this on gov.scot’s device lab and found that their iPad 1 on iOS4 needed a `-webkit-border-radius` to show radio buttons as circular.
---
 public/sass/elements/forms/_form-block-labels.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/public/sass/elements/forms/_form-block-labels.scss b/public/sass/elements/forms/_form-block-labels.scss
index 1c8d15c03..17782ee31 100644
--- a/public/sass/elements/forms/_form-block-labels.scss
+++ b/public/sass/elements/forms/_form-block-labels.scss
@@ -42,24 +42,24 @@
     &.selection-button-radio::before {
       content: "";
       border: 2px solid;
-      border-radius: 50%;
       background: transparent;
       width: 34px;
       height: 34px;
       position: absolute;
       top: 0;
       left: 0;
+      @include border-radius(50%);
     }
 
     &.selection-button-radio::after {
       content: "";
-      border-radius: 50%;
       background: currentColor;
       width: 20px;
       height: 20px;
       position: absolute;
       top: 9px;
       left: 9px;
+      @include border-radius(50%);
       @include opacity(0);
     }
 

From f1fdcc45516c91e124e5476c12d7ff0994dd9374 Mon Sep 17 00:00:00 2001
From: Robin Whittleton <robin.whittleton@digital.cabinet-office.gov.uk>
Date: Thu, 10 Nov 2016 16:16:50 +0000
Subject: [PATCH 14/15] Fix radios / checkboxes in Dragon NaturallySpeaking 13
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Dragon 13 doesn’t understand that clickable things exist with our standard (WebAIM based) visual hiding mixin. The upshot is that all radios and checkboxes stop responding with the current code.

Instead of using the default visually hidden code we can make the element completely translucent instead. It’s already positioned where the faked input is (barring default margins). Clicking on either the (invisible) input or the label causes a state change so there’s no change in behaviour.

Tested in Dragon NaturallySpeaking 13 on IE11 and Firefox. I’ve also tested in ancient and modern versions of Firefox, Chrome and Safari, latest Edge, IE8-11 and Windows Mobile 8.1.
---
 public/sass/elements/forms/_form-block-labels.scss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/public/sass/elements/forms/_form-block-labels.scss b/public/sass/elements/forms/_form-block-labels.scss
index 17782ee31..6410b4591 100644
--- a/public/sass/elements/forms/_form-block-labels.scss
+++ b/public/sass/elements/forms/_form-block-labels.scss
@@ -33,7 +33,8 @@
     // IE8 doesn’t support pseudoelements, so we don’t want to hide native elements there.
     @if ($is-ie == false) or ($ie-version == 9) {
       .js-enabled & {
-        @include visually-hidden;
+        margin: 0;
+        @include opacity(0);
       }
     }
   }

From 4e50e9bf44fadc42b1e5ac0737ad72a727a77fce Mon Sep 17 00:00:00 2001
From: Robin Whittleton <robin.whittleton@digital.cabinet-office.gov.uk>
Date: Thu, 17 Nov 2016 15:12:03 +0000
Subject: [PATCH 15/15] Fix radios in Windows high contrast mode
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Windows has a high contrast theme that sets borders and background to different colours. In our case we’ve rendered the custom checkboxes using only borders, so that’s fine. The custom radio however has its outline rendered with a border, but the bullet rendered with a background. In high contrast mode the bullet was black-on-black and wasn’t showing.

We can fix this by rendering the bullet with borders instead. We just set a width and height of 0, then make the border 10px thick on every side.

Tested in IE8+, Fx, Chrome, old iOS Safari and IE Mobile.
---
 public/sass/elements/forms/_form-block-labels.scss | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/public/sass/elements/forms/_form-block-labels.scss b/public/sass/elements/forms/_form-block-labels.scss
index 6410b4591..237658d34 100644
--- a/public/sass/elements/forms/_form-block-labels.scss
+++ b/public/sass/elements/forms/_form-block-labels.scss
@@ -54,9 +54,9 @@
 
     &.selection-button-radio::after {
       content: "";
-      background: currentColor;
-      width: 20px;
-      height: 20px;
+      border: 10px solid;
+      width: 0;
+      height: 0;
       position: absolute;
       top: 9px;
       left: 9px;