From 695e8d55ad75089f8fdd94414d7452d9633bdee3 Mon Sep 17 00:00:00 2001
From: "greenkeeper[bot]" <greenkeeper[bot]@users.noreply.github.com>
Date: Fri, 16 Jun 2017 09:37:10 +0000
Subject: [PATCH 01/13] fix(package): update govuk-elements-sass to version
 3.1.0

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 96c83e7a76..d92e358446 100644
--- a/package.json
+++ b/package.json
@@ -21,7 +21,7 @@
     "express": "4.15.2",
     "express-session": "^1.13.0",
     "express-writer": "0.0.4",
-    "govuk-elements-sass": "3.0.1",
+    "govuk-elements-sass": "3.1.0",
     "govuk_frontend_toolkit": "7.0.0",
     "govuk_template_jinja": "0.22.3",
     "gulp": "^3.9.1",

From f84f3de503857632d8ca139bd6dba587370a6edc Mon Sep 17 00:00:00 2001
From: Gemma Leigh <hello@gemmaleigh.com>
Date: Fri, 28 Jul 2017 16:07:11 +0100
Subject: [PATCH 02/13] Update elements example - date of birth

Fixes #412. Uses date example from GOV.UK elements.
---
 docs/views/examples/elements/forms.html | 26 ++++++++++++-------------
 1 file changed, 12 insertions(+), 14 deletions(-)

diff --git a/docs/views/examples/elements/forms.html b/docs/views/examples/elements/forms.html
index 17f39fd3cc..f4f70dc4a7 100644
--- a/docs/views/examples/elements/forms.html
+++ b/docs/views/examples/elements/forms.html
@@ -38,28 +38,26 @@ <h1 class="form-title heading-large">
     <!-- Date of birth -->
     <div class="form-group">
       <fieldset>
-        <legend class="form-label-bold">Date of birth</legend>
-
+        <legend>
+          <span class="form-label-bold">
+            What is your date of birth?
+          </span>
+          <span class="form-hint">For example, 31 3 1980</span>
+        </legend>
         <div class="form-date">
-
-          <p class="form-hint">For example, 31 3 1980</p>
-
           <div class="form-group form-group-day">
-            <label for="dob-day">Day</label>
-            <input class="form-control" id="dob-day" type="number" pattern="[0-9]*" min="0" max="31">
+            <label class="form-label" for="dob-day">Day</label>
+            <input class="form-control" id="dob-day" name="dob-day" type="number" pattern="[0-9]*" min="0" max="31">
           </div>
-
           <div class="form-group form-group-month">
-            <label for="dob-month">Month</label>
-            <input class="form-control" id="dob-month" type="number" pattern="[0-9]*" min="0" max="12">
+            <label class="form-label" for="dob-month">Month</label>
+            <input class="form-control" id="dob-month" name="dob-month" type="number" pattern="[0-9]*" min="0" max="12">
           </div>
-
           <div class="form-group form-group-year">
-            <label for="dob-year">Year</label>
-            <input class="form-control" id="dob-year" type="number" pattern="[0-9]*" min="0" max="2014">
+            <label class="form-label" for="dob-year">Year</label>
+            <input class="form-control" id="dob-year" name="dob-year" type="number" pattern="[0-9]*" min="0" max="2016">
           </div>
         </div>
-
       </fieldset>
     </div>
 

From 91e27207580708071c4b04231e76db3384065664 Mon Sep 17 00:00:00 2001
From: Gemma Leigh <hello@gemmaleigh.com>
Date: Fri, 28 Jul 2017 16:11:15 +0100
Subject: [PATCH 03/13] Update elements example - full name

Move the form-hint inside the label, so it is read by screen readers
when the input is focussed.
---
 docs/views/examples/elements/forms.html | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/docs/views/examples/elements/forms.html b/docs/views/examples/elements/forms.html
index f4f70dc4a7..7f1b64060b 100644
--- a/docs/views/examples/elements/forms.html
+++ b/docs/views/examples/elements/forms.html
@@ -17,8 +17,10 @@ <h1 class="form-title heading-large">
 
     <!-- Full name -->
     <div class="form-group">
-      <label class="form-label-bold" for="full-name">Full name</label>
-      <p class="form-hint">As shown on your birth certificate or passport</p>
+      <label class="form-label-bold" for="full-name">
+        Full name
+        <span class="form-hint">As shown on your birth certificate or passport</span>
+      </label>
       <input type="text" class="form-control" id="full-name">
     </div>
 

From 32a49e2f2498543bccaa90843a9b566f9e0faa19 Mon Sep 17 00:00:00 2001
From: Gemma Leigh <hello@gemmaleigh.com>
Date: Fri, 28 Jul 2017 16:12:29 +0100
Subject: [PATCH 04/13] Update elements example - NI number

---
 docs/views/examples/elements/forms.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/views/examples/elements/forms.html b/docs/views/examples/elements/forms.html
index 7f1b64060b..3817ee5120 100644
--- a/docs/views/examples/elements/forms.html
+++ b/docs/views/examples/elements/forms.html
@@ -31,10 +31,10 @@ <h1 class="form-title heading-large">
         <span class="form-hint">
           It's on your National Insurance card, benefit letter, payslip or P60.
           <br>
-          For example, 'VO 12 34 56 D'.
+          For example, ‘QQ 12 34 56 C’.
         </span>
       </label>
-      <input type="text" class="form-control" id="ni-number">
+      <input class="form-control" id="ni-number" type="text" name="ni-number">
     </div>
 
     <!-- Date of birth -->

From c03e8fd05c50ab85b8db6830a723555860ad10e1 Mon Sep 17 00:00:00 2001
From: Gemma Leigh <hello@gemmaleigh.com>
Date: Fri, 28 Jul 2017 16:13:20 +0100
Subject: [PATCH 05/13] Ensure form labels use normal weight

---
 docs/views/examples/elements/forms.html | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/docs/views/examples/elements/forms.html b/docs/views/examples/elements/forms.html
index 3817ee5120..ff99b3c758 100644
--- a/docs/views/examples/elements/forms.html
+++ b/docs/views/examples/elements/forms.html
@@ -17,7 +17,7 @@ <h1 class="form-title heading-large">
 
     <!-- Full name -->
     <div class="form-group">
-      <label class="form-label-bold" for="full-name">
+      <label class="form-label" for="full-name">
         Full name
         <span class="form-hint">As shown on your birth certificate or passport</span>
       </label>
@@ -26,7 +26,7 @@ <h1 class="form-title heading-large">
 
     <!-- National Insurance number -->
     <div class="form-group">
-      <label class="form-label-bold" for="ni-number">
+      <label class="form-label" for="ni-number">
         National Insurance number
         <span class="form-hint">
           It's on your National Insurance card, benefit letter, payslip or P60.
@@ -41,7 +41,7 @@ <h1 class="form-title heading-large">
     <div class="form-group">
       <fieldset>
         <legend>
-          <span class="form-label-bold">
+          <span class="form-label">
             What is your date of birth?
           </span>
           <span class="form-hint">For example, 31 3 1980</span>

From 3e82c70fc9d80329c971d69e7ea3f7757140c402 Mon Sep 17 00:00:00 2001
From: Gemma Leigh <hello@gemmaleigh.com>
Date: Fri, 28 Jul 2017 16:18:48 +0100
Subject: [PATCH 06/13] Add a back link to check your answers example

Fixes #413.
---
 docs/views/examples/check-your-answers-page.html | 1 +
 1 file changed, 1 insertion(+)

diff --git a/docs/views/examples/check-your-answers-page.html b/docs/views/examples/check-your-answers-page.html
index 47bb492532..1ff7a951d4 100644
--- a/docs/views/examples/check-your-answers-page.html
+++ b/docs/views/examples/check-your-answers-page.html
@@ -9,6 +9,7 @@
 <main id="content" role="main">
   <div class="grid-row">
     <div class="column-two-thirds">
+      <a href="#" class="link-back">Back</a>
 
       <h1 class="heading-large">
         Check your answers before sending your application

From 90c4827969b6c41500ac6464580e07d532df99c8 Mon Sep 17 00:00:00 2001
From: Gemma Leigh <hello@gemmaleigh.com>
Date: Fri, 28 Jul 2017 16:36:32 +0100
Subject: [PATCH 07/13] Update radio and checkbox examples

These examples move the h1 inside the legend and add extra text -
select one, or select all.

Split the radio buttons and checkboxes examples onto separate pages.
---
 docs/views/examples/elements/checkboxes.html  | 56 ++++++++++++
 .../elements/radio-buttons-checkboxes.html    | 90 -------------------
 .../examples/elements/radio-buttons.html      | 48 ++++++++++
 .../examples/elements/toggled-content.html    | 46 +++++-----
 docs/views/tutorials-and-examples.html        |  9 +-
 5 files changed, 136 insertions(+), 113 deletions(-)
 create mode 100644 docs/views/examples/elements/checkboxes.html
 delete mode 100644 docs/views/examples/elements/radio-buttons-checkboxes.html
 create mode 100644 docs/views/examples/elements/radio-buttons.html

diff --git a/docs/views/examples/elements/checkboxes.html b/docs/views/examples/elements/checkboxes.html
new file mode 100644
index 0000000000..81bbd011ce
--- /dev/null
+++ b/docs/views/examples/elements/checkboxes.html
@@ -0,0 +1,56 @@
+{% extends "layout.html" %}
+
+{% block page_title %}
+  Example - Checkboxes
+{% endblock %}
+
+{% block content %}
+<main id="content" role="main">
+
+  {% include "includes/breadcrumb_examples.html" %}
+
+  <div class="grid-row">
+    <div class="column-two-thirds">
+
+      <h1 class="heading-xlarge">
+        Checkboxes
+      </h1>
+
+      <!-- Copied from https://govuk-elements.herokuapp.com/form-elements/#form-toggle-content-checkboxes -->
+
+      <form>
+        <div class="form-group">
+          <fieldset>
+
+            <legend>
+              <h1 class="heading-medium">
+                What is your nationality?
+              </h1>
+              <span class="body-text">Select all options that are relevant to you.</span>
+            </legend>
+
+            <div class="multiple-choice">
+              <input id="nationalities-british" name="nationalities" type="checkbox" value="British">
+              <label for="nationalities-british">British (including English, Scottish, Welsh and Northern Irish)</label>
+            </div>
+            <div class="multiple-choice">
+              <input id="nationalities-irish" name="nationalities" type="checkbox" value="Irish">
+              <label for="nationalities-irish">Irish</label>
+            </div>
+            <div class="multiple-choice" data-target="example-different-country">
+              <input id="nationalities-other" name="nationalities" type="checkbox" value="Citizen of a different country">
+              <label for="nationalities-other">Citizen of a different country</label>
+            </div>
+            <div class="panel panel-border-narrow js-hidden" id="example-different-country">
+              <label class="form-label" for="nationalities-other-country">Country name</label>
+              <input class="form-control" type="text" id="nationalities-other-country" name="nationalities-other-country">
+            </div>
+
+          </fieldset>
+        </div>
+      </form>
+
+    </div>
+  </div>
+</main>
+{% endblock %}
diff --git a/docs/views/examples/elements/radio-buttons-checkboxes.html b/docs/views/examples/elements/radio-buttons-checkboxes.html
deleted file mode 100644
index a39d30840d..0000000000
--- a/docs/views/examples/elements/radio-buttons-checkboxes.html
+++ /dev/null
@@ -1,90 +0,0 @@
-{% extends "layout.html" %}
-
-{% block page_title %}
-  Example - Radio buttons and checkboxes
-{% endblock %}
-
-{% block content %}
-<main id="content" role="main">
-
-  {% include "includes/breadcrumb_examples.html" %}
-
-  <div class="grid-row">
-    <div class="column-two-thirds">
-
-      <form action="/" method="post" class="form">
-
-        <h1 class="heading-xlarge">
-          Radio buttons <br> and checkboxes
-        </h1>
-
-        <p>
-          This test page demonstrates the new <code class="code">.multiple-choice</code> radio buttons and checkboxes, released in GOV.UK elements v3.0.0.
-        </p>
-
-        <!-- Copied from https://govuk-elements.herokuapp.com/form-elements/#form-radio-buttons -->
-
-        <h2 class="heading-medium">Where do you live?</h2>
-
-        <div class="form-group">
-          <fieldset>
-
-            <legend class="visually-hidden">Where do you live?</legend>
-
-            <div class="multiple-choice">
-              <input id="radio-1" type="radio" name="radio-group" value="Northern Ireland">
-              <label for="radio-1">Northern Ireland</label>
-            </div>
-            <div class="multiple-choice">
-              <input id="radio-2" type="radio" name="radio-group" value="Isle of Man or the Channel Islands">
-              <label for="radio-2">Isle of Man or the Channel Islands</label>
-            </div>
-            <p class="form-block">or</p>
-            <div class="multiple-choice">
-              <input id="radio-3" type="radio" name="radio-group" value="I am a British citizen living abroad">
-              <label for="radio-3">I am a British citizen living abroad</label>
-            </div>
-
-          </fieldset>
-        </div>
-
-        <!-- Copied from https://govuk-elements.herokuapp.com/form-elements/#form-toggle-content-checkboxes -->
-
-        <h2 class="heading-medium">
-          What is your nationality?
-        </h2>
-        <p>
-          Select all options that are relevant to you.
-        </p>
-
-        <div class="form-group">
-          <fieldset>
-
-            <legend class="visually-hidden">What is your nationality?</legend>
-
-            <div class="multiple-choice">
-              <input id="nationalities-british" name="nationalities" type="checkbox" value="British">
-              <label for="nationalities-british">British (including English, Scottish, Welsh and Northern Irish)</label>
-            </div>
-            <div class="multiple-choice">
-              <input id="nationalities-irish" name="nationalities" type="checkbox" value="Irish">
-              <label for="nationalities-irish">Irish</label>
-            </div>
-            <div class="multiple-choice" data-target="example-different-country">
-              <input id="nationalities-other" name="nationalities" type="checkbox" value="Citizen of a different country">
-              <label for="nationalities-other">Citizen of a different country</label>
-            </div>
-            <div class="panel panel-border-narrow js-hidden" id="example-different-country">
-              <label class="form-label" for="nationalities-other-country">Country name</label>
-              <input class="form-control" type="text" id="nationalities-other-country" name="nationalities-other-country">
-            </div>
-
-          </fieldset>
-        </div>
-
-      </form>
-
-    </div>
-  </div>
-</main>
-{% endblock %}
diff --git a/docs/views/examples/elements/radio-buttons.html b/docs/views/examples/elements/radio-buttons.html
new file mode 100644
index 0000000000..d5bd559fa9
--- /dev/null
+++ b/docs/views/examples/elements/radio-buttons.html
@@ -0,0 +1,48 @@
+{% extends "layout.html" %}
+
+{% block page_title %}
+  Example - Radio buttons
+{% endblock %}
+
+{% block content %}
+<main id="content" role="main">
+
+  {% include "includes/breadcrumb_examples.html" %}
+
+  <div class="grid-row">
+    <div class="column-two-thirds">
+
+      <h1 class="heading-xlarge">
+        Radio buttons
+      </h1>
+
+      <form>
+        <div class="form-group">
+          <fieldset>
+
+            <legend>
+              <h1 class="heading-medium">Where do you live?</h1>
+            </legend>
+
+            <div class="multiple-choice">
+              <input id="radio-1" type="radio" name="radio-group" value="Northern Ireland">
+              <label for="radio-1">Northern Ireland</label>
+            </div>
+            <div class="multiple-choice">
+              <input id="radio-2" type="radio" name="radio-group" value="Isle of Man or the Channel Islands">
+              <label for="radio-2">Isle of Man or the Channel Islands</label>
+            </div>
+            <p class="form-block">or</p>
+            <div class="multiple-choice">
+              <input id="radio-3" type="radio" name="radio-group" value="I am a British citizen living abroad">
+              <label for="radio-3">I am a British citizen living abroad</label>
+            </div>
+
+          </fieldset>
+        </div>
+      </form>
+
+    </div>
+  </div>
+</main>
+{% endblock %}
diff --git a/docs/views/examples/elements/toggled-content.html b/docs/views/examples/elements/toggled-content.html
index 642d9ca7bf..251bdd3948 100644
--- a/docs/views/examples/elements/toggled-content.html
+++ b/docs/views/examples/elements/toggled-content.html
@@ -12,23 +12,27 @@
   <div class="grid-row">
     <div class="column-two-thirds">
 
-      <form action="/" method="post" class="form">
-
-        <h1 class="heading-xlarge">
-          Toggled content
-        </h1>
-
-        <p>
-          This page shows how to use the <code class="code">data-target</code> attribute to show and hide content when a radio button or checkbox is selected.
-        </p>
-        <p>
-          These examples require show-hide-content.js - updated in GOV.UK frontend toolkit v5.1.2.
-        </p>
-
+      <h1 class="heading-xlarge">
+        Toggled content
+      </h1>
+
+      <p>
+        This page shows how to use the <code class="code">data-target</code> attribute to show and hide content when a radio button or checkbox is selected.
+      </p>
+      <p>
+        These examples require show-hide-content.js - updated in GOV.UK frontend toolkit v5.1.2.
+      </p>
+
+      <form>
         <div class="form-group">
           <fieldset>
 
-            <legend class="visually-hidden">What is your nationality?</legend>
+            <legend>
+              <h1 class="heading-medium">
+                What is your nationality?
+              </h1>
+              <span class="body-text">Select all options that are relevant to you.</span>
+            </legend>
 
             <div class="multiple-choice">
               <input id="nationalities-british" name="nationalities" type="checkbox" value="British">
@@ -49,16 +53,17 @@ <h1 class="heading-xlarge">
 
           </fieldset>
         </div>
+      </form>
 
-        <h1 class="heading-large">
-          Where should we send your new<br> passport?
-        </h1>
-
+      <form>
         <div class="form-group">
           <fieldset>
 
-            <legend class="visuallyhidden">
-              Where should we send your new passport?
+            <legend>
+              <h1 class="heading-medium">
+                Where should we send your new passport?
+              </h1>
+              <span class="body-text">Select one.</span>
             </legend>
 
             <div class="multiple-choice">
@@ -107,7 +112,6 @@ <h2 class="heading-medium">
             </div>
           </fieldset>
         </div>
-
       </form>
 
     </div>
diff --git a/docs/views/tutorials-and-examples.html b/docs/views/tutorials-and-examples.html
index 301b5d5cc4..c90cf0f997 100644
--- a/docs/views/tutorials-and-examples.html
+++ b/docs/views/tutorials-and-examples.html
@@ -103,8 +103,13 @@ <h3 class="heading-small">Components</h3>
           </a>
         </li>
         <li>
-          <a href="/docs/examples/elements/radio-buttons-checkboxes">
-            Radio buttons and checkboxes
+          <a href="/docs/examples/elements/radio-buttons">
+            Radio buttons
+          </a>
+        </li>
+        <li>
+          <a href="/docs/examples/elements/checkboxes">
+            Checkboxes
           </a>
         </li>
         <li>

From 0281fb9885655fc9857269ef2e34ba1299afd0e4 Mon Sep 17 00:00:00 2001
From: Gemma Leigh <hello@gemmaleigh.com>
Date: Fri, 28 Jul 2017 16:39:13 +0100
Subject: [PATCH 08/13] Update date of birth - move h1 inside legend

This removes the duplication of the h1 and legend text.
---
 docs/views/examples/question-page.html | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/docs/views/examples/question-page.html b/docs/views/examples/question-page.html
index 0adc3a5cc5..d8c7b0b57c 100644
--- a/docs/views/examples/question-page.html
+++ b/docs/views/examples/question-page.html
@@ -12,17 +12,19 @@
 
       <a class="link-back" href="/docs/tutorials-and-examples">Back</a>
 
-      <h1 class="heading-large">
-        What is your date of birth?
-      </h1>
-
       <form class="form">
 
         <fieldset class="form-group">
-          <legend class="visuallyhidden">Date of birth</legend>
-          <div class="form-date">
+          <legend>
+            <h1 class="heading-large">
+              What is your date of birth?
+            </h1>
+            <p class="body-text">
+              For example, 31 3 1980
+            </p>
+          </legend>
 
-            <p class="form-hint">For example, 31 3 1980</p>
+          <div class="form-date">
 
             <div class="form-group form-group-day">
               <label for="dob-day">Day</label>

From 11622c6e6f72e16cc783a48121d227d8cffa2407 Mon Sep 17 00:00:00 2001
From: Gemma Leigh <hello@gemmaleigh.com>
Date: Fri, 28 Jul 2017 16:41:57 +0100
Subject: [PATCH 09/13] Update confirmation page example

Fixes #390.
---
 docs/views/examples/confirmation-page.html | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/docs/views/examples/confirmation-page.html b/docs/views/examples/confirmation-page.html
index d524c19d5a..cb421f43da 100644
--- a/docs/views/examples/confirmation-page.html
+++ b/docs/views/examples/confirmation-page.html
@@ -11,14 +11,23 @@
   <div class="grid-row">
     <div class="column-two-thirds">
 
+      <h1 class="heading-large">
+        Service name goes here
+      </h1>
+
       <div class="govuk-box-highlight">
-        <h1 class="bold-large">Application complete</h1>
-        <p>
+        <h2 class="heading-xlarge">
+          Application complete
+        </h2>
+        <p class="font-large">
           Your reference number is <br>
-          <strong class="heading-medium">HDJ2123F</strong>
+          <strong class="bold">HDJ2123F</strong>
         </p>
       </div>
-      <p>We have sent you a confirmation email.</p>
+
+      <p>
+        We have sent you a confirmation email.
+      </p>
 
       <h2 class="heading-medium">What happens next</h2>
       <p>We've sent your application to Hackney Electoral Register Office.</p>

From dd89f36a7d29f09f0628b3c049afe1fc560b44e2 Mon Sep 17 00:00:00 2001
From: Gemma Leigh <hello@gemmaleigh.com>
Date: Fri, 28 Jul 2017 16:47:08 +0100
Subject: [PATCH 10/13] Fix link to question page

Fixes #376.
---
 docs/documentation/tips-and-tricks.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/documentation/tips-and-tricks.md b/docs/documentation/tips-and-tricks.md
index 8293a2dd46..85176a6f3d 100644
--- a/docs/documentation/tips-and-tricks.md
+++ b/docs/documentation/tips-and-tricks.md
@@ -27,7 +27,7 @@ Remove the comments surrounding the unordered list with an ID of proposition lin
       -->
     </nav>
 
-An example of this can be seen in the [question-page.html](../app/views/examples/question-page.html) template.
+An example of this can be seen in the [blank question page](/docs/examples/template-question-page-blank) template.
 
 ## Add a phase banner
 

From c6707e08bd959dc927cbc98b827bdafba2faf9ce Mon Sep 17 00:00:00 2001
From: Gemma Leigh <hello@gemmaleigh.com>
Date: Fri, 28 Jul 2017 17:00:22 +0100
Subject: [PATCH 11/13] fix(package): update govuk-elements-sass to version
 3.1.1

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index d92e358446..ff405f384f 100644
--- a/package.json
+++ b/package.json
@@ -21,7 +21,7 @@
     "express": "4.15.2",
     "express-session": "^1.13.0",
     "express-writer": "0.0.4",
-    "govuk-elements-sass": "3.1.0",
+    "govuk-elements-sass": "3.1.1",
     "govuk_frontend_toolkit": "7.0.0",
     "govuk_template_jinja": "0.22.3",
     "gulp": "^3.9.1",

From 12a87b27d0b934190ad2ea743b8721ae0d63acb4 Mon Sep 17 00:00:00 2001
From: Gemma Leigh <hello@gemmaleigh.com>
Date: Fri, 28 Jul 2017 17:08:08 +0100
Subject: [PATCH 12/13] Update details polyfill

https://github.com/alphagov/govuk_elements/pull/521
---
 app/assets/javascripts/details.polyfill.js | 51 +++++++++++++++++-----
 1 file changed, 41 insertions(+), 10 deletions(-)

diff --git a/app/assets/javascripts/details.polyfill.js b/app/assets/javascripts/details.polyfill.js
index 37ed22d2c2..284b73e4b7 100644
--- a/app/assets/javascripts/details.polyfill.js
+++ b/app/assets/javascripts/details.polyfill.js
@@ -6,10 +6,12 @@
 
 // http://www.sitepoint.com/fixing-the-details-element/
 
-(function () {
+;(function () {
   'use strict'
 
   var NATIVE_DETAILS = typeof document.createElement('details').open === 'boolean'
+  var KEY_ENTER = 13
+  var KEY_SPACE = 32
 
   // Add event construct for modern browsers or IE
   // which fires the callback with a pre-converted target reference
@@ -25,25 +27,50 @@
     }
   }
 
+  // Cross-browser character code / key pressed
+  function charCode (e) {
+    return (typeof e.which === 'number') ? e.which : e.keyCode
+  }
+
+  // Cross-browser preventing default action
+  function preventDefault (e) {
+    if (e.preventDefault) {
+      e.preventDefault()
+    } else {
+      e.returnValue = false
+    }
+  }
+
   // Handle cross-modal click events
   function addClickEvent (node, callback) {
-    // Prevent space(32) from scrolling the page
     addEvent(node, 'keypress', function (e, target) {
-      if (target.nodeName === 'SUMMARY') {
-        if (e.keyCode === 32) {
-          if (e.preventDefault) {
-            e.preventDefault()
+      // When the key gets pressed - check if it is enter or space
+      if (charCode(e) === KEY_ENTER || charCode(e) === KEY_SPACE) {
+        if (target.nodeName.toLowerCase() === 'summary') {
+          // Prevent space from scrolling the page
+          // and enter from submitting a form
+          preventDefault(e)
+          // Click to let the click event do all the necessary action
+          if (target.click) {
+            target.click()
           } else {
-            e.returnValue = false
+            // except Safari 5.1 and under don't support .click() here
+            callback(e, target)
           }
         }
       }
     })
-    // When the key comes up - check if it is enter(13) or space(32)
+
+    // Prevent keyup to prevent clicking twice in Firefox when using space key
     addEvent(node, 'keyup', function (e, target) {
-      if (e.keyCode === 13 || e.keyCode === 32) { callback(e, target) }
+      if (charCode(e) === KEY_SPACE) {
+        if (target.nodeName === 'SUMMARY') {
+          preventDefault(e)
+        }
+      }
     })
-    addEvent(node, 'mouseup', function (e, target) {
+
+    addEvent(node, 'click', function (e, target) {
       callback(e, target)
     })
   }
@@ -89,6 +116,10 @@
       details.__summary = details.getElementsByTagName('summary').item(0)
       details.__content = details.getElementsByTagName('div').item(0)
 
+      if (!details.__summary || !details.__content) {
+        return
+      }
+
       // If the content doesn't have an ID, assign it one now
       // which we'll need for the summary's aria-controls assignment
       if (!details.__content.id) {

From 2fcb9c8103eb1581217f87de2ae149383c8c6774 Mon Sep 17 00:00:00 2001
From: Gemma Leigh <hello@gemmaleigh.com>
Date: Tue, 15 Aug 2017 13:53:38 +0100
Subject: [PATCH 13/13] Ensure application complete is h1 for confirmation page
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The main heading for the page is “Application complete”.
---
 docs/views/examples/confirmation-page.html | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/docs/views/examples/confirmation-page.html b/docs/views/examples/confirmation-page.html
index cb421f43da..88f3a81bc8 100644
--- a/docs/views/examples/confirmation-page.html
+++ b/docs/views/examples/confirmation-page.html
@@ -11,14 +11,10 @@
   <div class="grid-row">
     <div class="column-two-thirds">
 
-      <h1 class="heading-large">
-        Service name goes here
-      </h1>
-
       <div class="govuk-box-highlight">
-        <h2 class="heading-xlarge">
+        <h1 class="heading-xlarge">
           Application complete
-        </h2>
+        </h1>
         <p class="font-large">
           Your reference number is <br>
           <strong class="bold">HDJ2123F</strong>