Merge pull request #1459 from alphagov/fix-error-summary-legacy

Fix legacy error summary component autofocus on full page examples
alphagov · Jun 18, 2019 · 5bfbeba · 5bfbeba
2 parents 4a81979 + a293479
commit 5bfbeba
Show file tree

Hide file tree

Showing 9 changed files with 80 additions and 85 deletions.
diff --git a/app/app.js b/app/app.js
@@ -64,6 +64,7 @@ module.exports = (options) => {
 
   // serve legacy code from node modules
   app.use('/vendor/govuk_template/', express.static('node_modules/govuk_template_jinja/assets/'))
+  app.use('/vendor/govuk_frontend_toolkit/assets', express.static('node_modules/govuk_frontend_toolkit/images'))
   app.use('/vendor/govuk_frontend_toolkit/', express.static('node_modules/govuk_frontend_toolkit/javascripts/govuk/'))
   app.use('/vendor/jquery/', express.static('node_modules/jquery/dist'))
 

diff --git a/app/assets/scss/app-legacy-ie8.scss b/app/assets/scss/app-legacy-ie8.scss
@@ -8,9 +8,13 @@ $govuk-compatibility-govukfrontendtoolkit: true;
 $govuk-compatibility-govuktemplate: true;
 $govuk-compatibility-govukelements: true;
 
+// Set Elements assets path
+$path: "/vendor/govuk_frontend_toolkit/assets/";
+
 // Import GOV.UK frontend toolkit and GOV.UK elements
 $is-ie: true;
 $ie-version: 8;
+
 @import "govuk-elements-sass/public/sass/govuk-elements";
 
 @import "app-ie8";
diff --git a/app/assets/scss/app-legacy.scss b/app/assets/scss/app-legacy.scss
@@ -9,7 +9,7 @@ $govuk-compatibility-govuktemplate: true;
 $govuk-compatibility-govukelements: true;
 
 // Set Elements assets path
-$path: "/assets/images/";
+$path: "/vendor/govuk_frontend_toolkit/assets/";
 
 // Import GOV.UK frontend toolkit and GOV.UK elements
 @import "govuk-elements-sass/public/sass/govuk-elements";

diff --git a/app/views/full-page-examples/applicant-details/confirm.njk b/app/views/full-page-examples/applicant-details/confirm.njk
@@ -1,27 +1,15 @@
-{% extends "govuk_template_jinja/views/layouts/govuk_template.html" %}
+{% extends "legacy.njk" %}
 
-{% from "panel/macro.njk" import govukPanel %}
-
-{% set asset_path = "/vendor/govuk_template/" %}
-{% set homepage_url = "/" %}
-{% set pageTitle = "Applicant details submitted" %}
-{% block pageTitle %}{{ pageTitle }} - GOV.UK{% endblock %}
+{% set page_title = "Applicant details submitted" %}
 
-{% block head %}
-  <!--[if !IE 8]><!-->
-    <link rel="stylesheet" href="/public/app-legacy.css">
-  <!--<![endif]-->
-  <!--[if IE 8]>
-    <link rel="stylesheet" href="/public/app-legacy-ie8.css">
-  <![endif]-->
-{% endblock %}
+{% from "panel/macro.njk" import govukPanel %}
 
 {% block content %}
   <main id="content" role="main">
     <div class="grid-row">
       <div class="column-two-thirds">
         {{ govukPanel({
-          titleText: pageTitle,
+          titleText: page_title,
           classes: "govuk-!-margin-top-8"
         }) }}
       </div>

diff --git a/app/views/full-page-examples/applicant-details/index.njk b/app/views/full-page-examples/applicant-details/index.njk
@@ -8,25 +8,13 @@ notes: >-
   known accessibility issues.
 ---
 
-{% extends "govuk_template_jinja/views/layouts/govuk_template.html" %}
+{% extends "legacy.njk" %}
 
 {% from "back-link/macro.njk" import govukBackLink %}
 {% from "date-input/macro.njk" import govukDateInput %}
 {% from "button/macro.njk" import govukButton %}
 
-{% set asset_path = "/vendor/govuk_template/" %}
-{% set homepage_url = "/" %}
 {% set page_title = "Applicant details" %}
-{% block page_title %}{{ "Error: " if errors }}{{ page_title }} - GOV.UK{% endblock %}
-
-{% block head %}
-  <!--[if !IE 8]><!-->
-    <link rel="stylesheet" href="/public/app-legacy.css">
-  <!--<![endif]-->
-  <!--[if IE 8]>
-    <link rel="stylesheet" href="/public/app-legacy-ie8.css">
-  <![endif]-->
-{% endblock %}
 
 {% block content %}
   <main id="content" role="main">
@@ -133,8 +121,3 @@ notes: >-
     </div>
   </main>
 {% endblock %}
-
-{% block body_end %}
-  <script src="/public/all.js"></script>
-  <script>window.GOVUKFrontend.initAll()</script>
-{% endblock %}
diff --git a/app/views/full-page-examples/renew-driving-licence/index.njk b/app/views/full-page-examples/renew-driving-licence/index.njk
@@ -8,25 +8,13 @@ notes: >-
 
 {# This example is based on the "Renew driving licence"
 example: https://www.gov.uk/renew-driving-licence #}
-{% extends "govuk_template_jinja/views/layouts/govuk_template.html" %}
+{% extends "legacy.njk" %}
 
 {% from "breadcrumbs/macro.njk" import govukBreadcrumbs %}
 {% from "inset-text/macro.njk" import govukInsetText %}
 {% from "tabs/macro.njk" import govukTabs %}
 
-{% set asset_path = "/vendor/govuk_template/" %}
-{% set homepage_url = "/" %}
-{% set pageTitle = "Renew your driving licence" %}
-{% block page_title %}{{ pageTitle }} - GOV.UK{% endblock %}
-
-{% block head %}
-  <!--[if !IE 8]><!-->
-    <link rel="stylesheet" href="/public/app-legacy.css">
-  <!--<![endif]-->
-  <!--[if IE 8]>
-    <link rel="stylesheet" href="/public/app-legacy-ie8.css">
-  <![endif]-->
-{% endblock %}
+{% set page_title = "Renew your driving licence" %}
 
 {% block content %}
   <main id="content" role="main">
@@ -50,7 +38,7 @@ example: https://www.gov.uk/renew-driving-licence #}
         }) }}
 
         <h1 class="heading-xlarge">
-         {{ pageTitle }}
+         {{ page_title }}
         </h1>
 
         <p>Renew your driving licence online with DVLA if you have a valid UK passport.</p>
@@ -157,8 +145,3 @@ example: https://www.gov.uk/renew-driving-licence #}
   </main>
 
 {% endblock %}
-
-{% block body_end %}
-  <script src="/public/all.js"></script>
-  <script>window.GOVUKFrontend.initAll()</script>
-{% endblock %}
diff --git a/app/views/layouts/_generic.njk b/app/views/layouts/_generic.njk
@@ -43,37 +43,8 @@
 {% endblock %}
 
 {% block bodyEnd %}
-
   {% if legacy %}
-    <script src="/vendor/govuk_template/javascripts/govuk-template.js"></script>
-
-    {# Frontend Toolkit dependency #}
-    <script src="/vendor/jquery/jquery.min.js"></script>
-    {# Frontend Toolkit modules #}
-    <script src="/vendor/govuk_frontend_toolkit/details.polyfill.js"></script>
-    <script src="/vendor/govuk_frontend_toolkit/modules.js"></script>
-    <script src="/vendor/govuk_frontend_toolkit/modules/auto-track-event.js"></script>
-    <script src="/vendor/govuk_frontend_toolkit/primary-links.js"></script>
-    <script src="/vendor/govuk_frontend_toolkit/shim-links-with-button-role.js"></script>
-    <script src="/vendor/govuk_frontend_toolkit/show-hide-content.js"></script>
-    <script src="/vendor/govuk_frontend_toolkit/stick-at-top-when-scrolling.js"></script>
-    <script src="/vendor/govuk_frontend_toolkit/stop-scrolling-at-footer.js"></script>
-
-    <script>
-      (function() {
-        // Instantiate Frontend Toolkit modules
-        // Ordering follows what we do in test manifest: /spec/manifest.js
-        GOVUK.details.init()
-        GOVUK.modules.start()
-        GOVUK.primaryLinks.init()
-
-        var showHideContent = new GOVUK.ShowHideContent()
-        showHideContent.init()
-
-        GOVUK.stickAtTopWhenScrolling.init()
-        GOVUK.shimLinksWithButtonRole.init()
-      })()
-     </script>
+    {% include "partials/legacyJavaScript.njk" %}
   {% endif %}
 
   <script src="/public/all.js"></script>

diff --git a/app/views/layouts/legacy.njk b/app/views/layouts/legacy.njk
@@ -0,0 +1,20 @@
+{% extends "govuk_template_jinja/views/layouts/govuk_template.html" %}
+
+{% set asset_path = "/vendor/govuk_template/" %}
+{% set homepage_url = "/" %}
+{% block page_title %}{{ "Error: " if errors }}{{ page_title }} - GOV.UK{% endblock %}
+
+{% block head %}
+  <!--[if !IE 8]><!-->
+    <link rel="stylesheet" href="/public/app-legacy.css">
+  <!--<![endif]-->
+  <!--[if IE 8]>
+    <link rel="stylesheet" href="/public/app-legacy-ie8.css">
+  <![endif]-->
+{% endblock %}
+
+{% block body_end %}
+  {% include "partials/legacyJavaScript.njk" %}
+  <script src="/public/all.js"></script>
+  <script>window.GOVUKFrontend.initAll()</script>
+{% endblock %}
diff --git a/app/views/partials/legacyJavaScript.njk b/app/views/partials/legacyJavaScript.njk
@@ -0,0 +1,45 @@
+<script src="/vendor/govuk_template/javascripts/govuk-template.js"></script>
+
+{# Frontend Toolkit dependency #}
+<script src="/vendor/jquery/jquery.min.js"></script>
+{# Frontend Toolkit modules #}
+<script src="/vendor/govuk_frontend_toolkit/details.polyfill.js"></script>
+<script src="/vendor/govuk_frontend_toolkit/modules.js"></script>
+<script src="/vendor/govuk_frontend_toolkit/modules/auto-track-event.js"></script>
+<script src="/vendor/govuk_frontend_toolkit/primary-links.js"></script>
+<script src="/vendor/govuk_frontend_toolkit/shim-links-with-button-role.js"></script>
+<script src="/vendor/govuk_frontend_toolkit/show-hide-content.js"></script>
+<script src="/vendor/govuk_frontend_toolkit/stick-at-top-when-scrolling.js"></script>
+<script src="/vendor/govuk_frontend_toolkit/stop-scrolling-at-footer.js"></script>
+
+<script>
+  (function() {
+    // Instantiate Frontend Toolkit modules
+    // Ordering follows what we do in test manifest: /spec/manifest.js
+    GOVUK.details.init()
+    GOVUK.modules.start()
+    GOVUK.primaryLinks.init()
+
+    var showHideContent = new GOVUK.ShowHideContent()
+    showHideContent.init()
+
+    GOVUK.stickAtTopWhenScrolling.init()
+    GOVUK.shimLinksWithButtonRole.init()
+
+    // Copied from https://github.com/alphagov/govuk_elements/blob/ef0baed92fabbbfdc0f6ea09d7dd76bffa994bf8/assets/javascripts/application.js#L22
+    $(window).load(function () {
+      // If there is an error summary, set focus to the summary
+      if ($('.error-summary').length) {
+        $('.error-summary').focus()
+        $('.error-summary a').click(function (e) {
+          e.preventDefault()
+          var href = $(this).attr('href')
+          $(href).focus()
+        })
+      } else {
+        // Otherwise, set focus to the field with the error
+        $('.error input:first').focus()
+      }
+    })
+  })()
+</script>