Merge pull request #2198 from alphagov/error-page-design

Error page design
alphagov · Jun 1, 2023 · 4e570e4 · 4e570e4
2 parents 33b2225 + 79969aa
commit 4e570e4
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 7 deletions.
diff --git a/cypress/e2e/errors/1-error-page-tests/fatal-error.cypress.js b/cypress/e2e/errors/1-error-page-tests/fatal-error.cypress.js
@@ -29,6 +29,8 @@ describe('Fatal Error Test', () => {
     cy.task('log', `Replace ${appRoutes} with Broken routes`)
     cy.task('copyFile', { source: completelyBrokenRoutesFixture, target: appRoutes })
 
+    cy.wait(5000)
+
     cy.get('.govuk-heading-l').contains(pageName)
     cy.get('.govuk-body .govuk-link').contains(contactSupportText)
     cy.get('#govuk-prototype-kit-error-file').contains(expectedErrorFileAndLine)
@@ -37,6 +39,8 @@ describe('Fatal Error Test', () => {
     cy.task('log', `Restore ${appRoutes} with original routes`)
     restore()
 
+    cy.wait(5000)
+
     cy.get('.govuk-heading-l').contains(homePageName)
   })
 })
diff --git a/lib/assets/sass/prototype.scss b/lib/assets/sass/prototype.scss
@@ -25,7 +25,8 @@
   }
 }
 
-#govuk-prototype-kit-error-block {
+
+.govuk-prototype-kit-error-code {
   display: block;
   border: 1px solid black;
   padding: 1em;
@@ -37,6 +38,12 @@
   }
 }
 
+.govuk-prototype-kit-error-code:focus{
+  outline: 3px solid govuk-colour("yellow");
+  outline-offset: 0;
+  box-shadow: inset 0 0 0 2px;
+}
+
 #govuk-prototype-kit-error-line {
   background: govuk-colour("red");
   color: govuk-colour("white");

diff --git a/lib/nunjucks/views/error-handling/server-error.njk b/lib/nunjucks/views/error-handling/server-error.njk
@@ -27,18 +27,18 @@
       </p>
 
       {% if error.sourceCode %}
-      <pre id="govuk-prototype-kit-error-block"><code>{{ error.sourceCode.before }}</code><br><code id="govuk-prototype-kit-error-line">{{ error.sourceCode.error }}</code><br><code>{{ error.sourceCode.after }}</code></pre>
+      <pre tabindex="0" class="govuk-prototype-kit-error-code govuk-!-margin-bottom-5" id="govuk-prototype-kit-error-block"><code>{{ error.sourceCode.before }}</code><br><code id="govuk-prototype-kit-error-line">{{ error.sourceCode.error }}</code><br><code>{{ error.sourceCode.after }}</code></pre>
       {% endif %}
 
       <div id="govuk-prototype-kit-show-error-button-container" hidden>
-        <button id="govuk-prototype-kit-show-error-button" class="govuk-button govuk-button--secondary" data-module="govuk-button">
+        <button id="govuk-prototype-kit-show-error-button" class="govuk-button govuk-button--secondary govuk-!-margin-bottom-1" data-module="govuk-button" aria-expanded="false" aria-controls="govuk-prototype-kit-error-stack">
           Show full error
         </button>
       </div>
 
-      <pre id="govuk-prototype-kit-error-stack" class="js-hidden"><code>{{ errorStack }}</code></pre>
+      <pre tabindex="0" id="govuk-prototype-kit-error-stack" class="govuk-prototype-kit-error-code js-hidden"><code>{{ errorStack }}</code></pre>
 
-      <p class="govuk-body">
+      <p class="govuk-body govuk-!-margin-top-5">
         <a class="govuk-link" href="https://prototype-kit.service.gov.uk/docs/support">Get support</a>
       </p>
 
@@ -48,12 +48,25 @@
 
 {% endblock %}
 
+
+{% block footer %}
+  {{ govukFooter({}) }}
+{% endblock %}
+
+
 {% block pageScripts %}
 <script>
   ;(() => {
-    const toggleErrorStack = () => {
+    const toggleErrorStack = (event) => {
+      const button = event.target
+      const isExpanded = button.getAttribute('aria-expanded') === 'true'
+      const newState = isExpanded ? 'false' : 'true'
+      const newText = isExpanded ? 'Show full error' : 'Hide full error'
+      button.setAttribute('aria-expanded', newState)
+      button.textContent = newText
+
       const element = document.getElementById('govuk-prototype-kit-error-stack')
-      element.className = element.className === 'js-hidden' ? '' : element.className = 'js-hidden'
+      element.classList.toggle('js-hidden')
     }
 
     document.getElementById('govuk-prototype-kit-show-error-button-container').hidden = false