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) { 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 --> -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 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 @@
+ Back

Check your answers before sending your application diff --git a/docs/views/examples/confirmation-page.html b/docs/views/examples/confirmation-page.html index d524c19d5a..88f3a81bc8 100644 --- a/docs/views/examples/confirmation-page.html +++ b/docs/views/examples/confirmation-page.html @@ -12,13 +12,18 @@
-

Application complete

-

+

+ Application complete +

+

Your reference number is
- HDJ2123F + HDJ2123F

-

We have sent you a confirmation email.

+ +

+ We have sent you a confirmation email. +

What happens next

We've sent your application to Hackney Electoral Register Office.

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 %} +
+ + {% include "includes/breadcrumb_examples.html" %} + +
+
+ +

+ Checkboxes +

+ + + +
+
+
+ + +

+ What is your nationality? +

+ Select all options that are relevant to you. + + +
+ + +
+
+ + +
+
+ + +
+
+ + +
+ +
+
+
+ +
+
+
+{% endblock %} diff --git a/docs/views/examples/elements/forms.html b/docs/views/examples/elements/forms.html index 17f39fd3cc..ff99b3c758 100644 --- a/docs/views/examples/elements/forms.html +++ b/docs/views/examples/elements/forms.html @@ -17,49 +17,49 @@

- -

As shown on your birth certificate or passport

+
-
- Date of birth - + + + What is your date of birth? + + For example, 31 3 1980 +
- -

For example, 31 3 1980

-
- - + +
-
- - + +
-
- - + +
-
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 %} -
- - {% include "includes/breadcrumb_examples.html" %} - -
-
- -
- -

- Radio buttons
and checkboxes -

- -

- This test page demonstrates the new .multiple-choice radio buttons and checkboxes, released in GOV.UK elements v3.0.0. -

- - - -

Where do you live?

- -
-
- - - -
- - -
-
- - -
-

or

-
- - -
- -
-
- - - -

- What is your nationality? -

-

- Select all options that are relevant to you. -

- -
-
- - - -
- - -
-
- - -
-
- - -
-
- - -
- -
-
- -
- -
-
-
-{% 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 %} +
+ + {% include "includes/breadcrumb_examples.html" %} + +
+
+ +

+ Radio buttons +

+ +
+
+
+ + +

Where do you live?

+ + +
+ + +
+
+ + +
+

or

+
+ + +
+ +
+
+
+ +
+
+
+{% 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 @@
-
- -

- Toggled content -

- -

- This page shows how to use the data-target attribute to show and hide content when a radio button or checkbox is selected. -

-

- These examples require show-hide-content.js - updated in GOV.UK frontend toolkit v5.1.2. -

- +

+ Toggled content +

+ +

+ This page shows how to use the data-target attribute to show and hide content when a radio button or checkbox is selected. +

+

+ These examples require show-hide-content.js - updated in GOV.UK frontend toolkit v5.1.2. +

+ +
- + +

+ What is your nationality? +

+ Select all options that are relevant to you. +
@@ -49,16 +53,17 @@

+
-

- Where should we send your new
passport? -

- +
- - Where should we send your new passport? + +

+ Where should we send your new passport? +

+ Select one.
@@ -107,7 +112,6 @@

-
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 @@ Back -

- What is your date of birth? -

-
- Date of birth -
+ +

+ What is your date of birth? +

+

+ For example, 31 3 1980 +

+ -

For example, 31 3 1980

+
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 @@

Components

  • - - Radio buttons and checkboxes + + Radio buttons + +
    • +
  • + + Checkboxes
  • diff --git a/package.json b/package.json index 96c83e7a76..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.0.1", + "govuk-elements-sass": "3.1.1", "govuk_frontend_toolkit": "7.0.0", "govuk_template_jinja": "0.22.3", "gulp": "^3.9.1",