Re-named error examples, and added example with more extensive text.

alphagov · Oct 30, 2017 · 912e6a3 · 912e6a3
1 parent e8e4a41
commit 912e6a3
Show file tree

Hide file tree

Showing 9 changed files with 112 additions and 98 deletions.
diff --git a/app/routes.js b/app/routes.js
@@ -152,69 +152,69 @@ module.exports = {
     })
 
     // Example page: Form validation
-    app.get('/errors/example-form-validation-single-question-radio', function (req, res) {
+    app.get('/errors/example-form-validation-single-question-more-text', function (req, res) {
       var section = 'errors'
       var sectionName = 'Errors and validation'
-      var pageName = 'Example: Form validation - single question'
-      res.render('examples/example_form_validation_single_question_radio', { 'section': section, 'section_name': sectionName, 'page_name': pageName })
+      var pageName = 'Example: Form validation - single question with additional guidance'
+      res.render('examples/example_form_validation_single_question_more_text', { 'section': section, 'section_name': sectionName, 'page_name': pageName })
     })
 
-    app.post('/errors/example-form-validation-single-question-radio', function (req, res) {
+    app.post('/errors/example-form-validation-single-question-more-text', function (req, res) {
       var section = 'errors'
       var sectionName = 'Errors and validation'
-      var pageName = 'Example: Form validation - single question'
-      var personalDetails = req.body.personalDetails
+      var pageName = 'Example: Form validation - single question with additional guidance'
+      var recognisable = req.body.recognisable
       var error = false
-      if (!personalDetails) {
+      if (!recognisable) {
         error = true
       } else {
         error = false
       }
-      res.render('examples/example_form_validation_single_question_radio', { 'section': section, 'section_name': sectionName, 'page_name': pageName, 'personal_details': personalDetails, 'error': error })
+      res.render('examples/example_form_validation_single_question_more_text', { 'section': section, 'section_name': sectionName, 'page_name': pageName, 'recognisable': recognisable, 'error': error })
     })
 
     // Example page: Form validation
-    app.get('/errors/example-form-validation-single-question-radio-h1-legend', function (req, res) {
+    app.get('/errors/example-form-validation-single-question-radio', function (req, res) {
       var section = 'errors'
       var sectionName = 'Errors and validation'
-      var pageName = 'Example: Form validation - single question, page heading in legend'
-      res.render('examples/example_form_validation_single_question_radio_h1_legend', { 'section': section, 'section_name': sectionName, 'page_name': pageName })
+      var pageName = 'Example: Form validation - single question, radio button'
+      res.render('examples/example_form_validation_single_question_radio', { 'section': section, 'section_name': sectionName, 'page_name': pageName })
     })
 
-    app.post('/errors/example-form-validation-single-question-radio-h1-legend', function (req, res) {
+    app.post('/errors/example-form-validation-single-question-radio', function (req, res) {
       var section = 'errors'
       var sectionName = 'Errors and validation'
-      var pageName = 'Example: Form validation - single question, page heading in legend'
+      var pageName = 'Example: Form validation - single question, radio button'
       var personalDetails = req.body.personalDetails
       var error = false
       if (!personalDetails) {
         error = true
       } else {
         error = false
       }
-      res.render('examples/example_form_validation_single_question_radio_h1_legend', { 'section': section, 'section_name': sectionName, 'page_name': pageName, 'personal_details': personalDetails, 'error': error })
+      res.render('examples/example_form_validation_single_question_radio', { 'section': section, 'section_name': sectionName, 'page_name': pageName, 'personal_details': personalDetails, 'error': error })
     })
 
     // Example page: Form validation
-    app.get('/errors/example-form-validation-single-question-text-h1-label', function (req, res) {
+    app.get('/errors/example-form-validation-single-question-text', function (req, res) {
       var section = 'errors'
       var sectionName = 'Errors and validation'
-      var pageName = 'Example: Form validation - single question, labed in page heading'
-      res.render('examples/example_form_validation_single_question_text_h1_label', { 'section': section, 'section_name': sectionName, 'page_name': pageName })
+      var pageName = 'Example: Form validation - single question, text field'
+      res.render('examples/example_form_validation_single_question_text', { 'section': section, 'section_name': sectionName, 'page_name': pageName })
     })
 
-    app.post('/errors/example-form-validation-single-question-text-h1-label', function (req, res) {
+    app.post('/errors/example-form-validation-single-question-text', function (req, res) {
       var section = 'errors'
       var sectionName = 'Errors and validation'
-      var pageName = 'Example: Form validation - single question, label in page heading'
+      var pageName = 'Example: Form validation - single question, text field'
       var personalDetails = req.body.personalDetails
       var error = false
       if (!personalDetails) {
         error = true
       } else {
         error = false
       }
-      res.render('examples/example_form_validation_single_question_text_h1_label', { 'section': section, 'section_name': sectionName, 'page_name': pageName, 'personal_details': personalDetails, 'error': error })
+      res.render('examples/example_form_validation_single_question_text', { 'section': section, 'section_name': sectionName, 'page_name': pageName, 'personal_details': personalDetails, 'error': error })
     })
 
     // Redirect examples from /examples/ to /section/example-name-of-example

diff --git a/...tion_single_question_radio_h1_legend.html → ...validation_single_question_more_text.html b/...tion_single_question_radio_h1_legend.html → ...validation_single_question_more_text.html
@@ -3,15 +3,15 @@
 {% block page_title %}{% if error %}Error: {% endif %}Example: Form validation — Errors — GOV.UK elements{% endblock %}
 
 {% block content %}
-<main class="js-error-example" id="content" role="main" tabindex="-1">
+<main class="js-error-example" id="content" role="main">
 
   {% include "includes/breadcrumb.html" %}
 
   <div class="grid-row">
     <div class="column-two-thirds">
 
-      <form method="post" action="/errors/example-form-validation-single-question-radio-h1-legend">
-        {% include "snippets/form_error_radio_h1_legend.html" %}
+      <form method="post" action="/errors/example-form-validation-single-question-more-text">
+        {% include "snippets/form_error_radio_more_text.html" %}
       </form>
 
       {% include "examples/_form_validation_implementation_advice.html" %}

diff --git a/app/views/examples/example_form_validation_single_question_radio.html b/app/views/examples/example_form_validation_single_question_radio.html
@@ -3,7 +3,7 @@
 {% block page_title %}{% if error %}Error: {% endif %}Example: Form validation — Errors — GOV.UK elements{% endblock %}
 
 {% block content %}
-<main class="js-error-example" id="content" role="main">
+<main class="js-error-example" id="content" role="main" tabindex="-1">
 
   {% include "includes/breadcrumb.html" %}
 

diff --git a/...dation_single_question_text_h1_label.html → ...form_validation_single_question_text.html b/...dation_single_question_text_h1_label.html → ...form_validation_single_question_text.html
@@ -10,8 +10,8 @@
   <div class="grid-row">
     <div class="column-two-thirds">
 
-      <form method="post" action="/errors/example-form-validation-single-question-text-h1-label">
-        {% include "snippets/form_error_text_h1_label.html" %}
+      <form method="post" action="/errors/example-form-validation-single-question-text">
+        {% include "snippets/form_error_text.html" %}
       </form>
 
       {% include "examples/_form_validation_implementation_advice.html" %}

diff --git a/app/views/guide_errors.html b/app/views/guide_errors.html
@@ -105,18 +105,18 @@ <h3 class="heading-medium" id="highlight-errors">Highlight errors in forms</h3>
   <h3 class="heading-medium" id="examples">Examples</h3>
   <ul class="list list-bullet">
     <li>
-      <a href="/errors/example-form-validation-single-question-radio-h1-legend">
+      <a href="/errors/example-form-validation-single-question-radio">
         form validation - single question with radio buttons
       </a>
     </li>
     <li>
-      <a href="/errors/example-form-validation-single-question-text-h1-label">
+      <a href="/errors/example-form-validation-single-question-text">
         form validation - single question with text field
        </a>
      </li>
     <li>
-      <a href="/errors/example-form-validation-single-question-radio">
-        form validation - single question with more text
+      <a href="/errors/example-form-validation-single-question-more-text">
+        form validation - single question with additional guidance
       </a>
     </li>
     <li>

diff --git a/app/views/snippets/form_error_radio.html b/app/views/snippets/form_error_radio.html
@@ -16,31 +16,27 @@ <h2 class="heading-medium error-summary-heading" id="error-summary-heading">
 </div>
 {% endif %}
 
-<h1 class="heading-large">
-  Check your personal details
-</h1>
-
-<p class="lede">
-  Look at your name, signature and other details.
-</p>
-
-
-<div class="form-group {% if error %} form-group-error{% endif %}">
-  <fieldset>
+<div class="form-group">
+  <fieldset class="after-error-summary">
 
     <legend {% if error %} id="example-personal-details"{% endif %}>
-
-      <span class="form-label-bold">
+      <h1 class="heading-large">
         Are your personal details correct and up-to-date?
-      </span>
+      </h1>
+
+      {% if error %}<div class="form-group-error">{% endif %}
+      <span class="form-hint">Look at your name, signature and other details.</span>
+
       {% if error %}
         <span class="error-message">
           Error message about personal details goes here
         </span>
+      </div>
       {% endif %}
 
     </legend>
 
+    {% if error %}<div class="form-group-error">{% endif %}
     <div class="multiple-choice">
       <input id="personal_details_yes" type="radio" name="personalDetails" value="Yes">
       <label for="personal_details_yes">Yes, my personal details are correct</label>
@@ -50,6 +46,7 @@ <h1 class="heading-large">
       <input id="personal_details_no" type="radio" name="personalDetails" value="No">
       <label for="personal_details_no">No, some details are wrong or have changed</label>
     </div>
+    {% if error %}</div>{% endif %}
 
   </fieldset>
 </div>

diff --git a/app/views/snippets/form_error_radio_h1_legend.html b/app/views/snippets/form_error_radio_h1_legend.html
diff --git a/app/views/snippets/form_error_radio_more_text.html b/app/views/snippets/form_error_radio_more_text.html
@@ -0,0 +1,71 @@
+{% if error %}
+<div class="error-summary" role="alert" aria-labelledby="error-summary-heading" tabindex="-1">
+
+  <h2 class="heading-medium error-summary-heading" id="error-summary-heading">
+    Message to alert the user to a problem goes here
+  </h2>
+
+  <p>
+    Optional description of the errors and how to correct them
+  </p>
+
+  <ul class="error-summary-list">
+    <li><a href="#example-recognisable">Descriptive link to the question with an error</a></li>
+  </ul>
+
+</div>
+{% endif %}
+
+<h1 class="heading-large">
+  Compare your old and new photos
+</h1>
+
+<p>
+  To prevent fraud, an examiner will compare your new photo with the photo from your old passport.
+</p>
+
+<p>
+  If the examiner can't recognise you, someone else will have to complete a form to verify that it's really you (a 'countersignature').
+</p>
+
+<p>
+  To save time, look at the photo in your current passport and tell us now if you look very different.
+</p>
+
+<div class="panel panel-border-wide">
+  <p>
+    Don't worry about normal signs of ageing, or your hairstyle or facial hair changing a lot - the examiners are used to that
+  </p>
+</div>
+
+
+<div class="form-group {% if error %} form-group-error{% endif %}">
+  <fieldset>
+
+    <legend {% if error %} id="example-recognisable"{% endif %}>
+
+      <span class="form-label-bold">
+        Can you be recognised as the same person?
+      </span>
+      {% if error %}
+        <span class="error-message">
+          Error message about recognisable goes here
+        </span>
+      {% endif %}
+
+    </legend>
+
+    <div class="multiple-choice">
+      <input id="recognisable_yes" type="radio" name="recognisable" value="Yes">
+      <label for="recognisable_yes">Yes, I'm recognisable</label>
+    </div>
+
+    <div class="multiple-choice">
+      <input id="recognisable_no" type="radio" name="recognisable" value="No">
+      <label for="recognisable_no">No, my appearance has changed a lot</label>
+    </div>
+
+  </fieldset>
+</div>
+
+<input class="button" type="submit" value="Continue">
diff --git a/...ws/snippets/form_error_text_h1_label.html → app/views/snippets/form_error_text.html b/...ws/snippets/form_error_text_h1_label.html → app/views/snippets/form_error_text.html