Merge pull request #671 from alphagov/focus-error-summary-on-window-load

Focus error summary on window load

CHANGELOG.md

@@ -39,16 +39,19 @@ New features:
 - Checkboxes and Radios conditional reveal
 (PR [#616](https://github.com/alphagov/govuk-frontend/pull/616))
 
-- Vendor-in SassMQ functionality, write tests and remove external dependency 
+- Vendor-in SassMQ functionality, write tests and remove external dependency
   (PR [#657](https://github.com/alphagov/govuk-frontend/pull/657))
 
+- Focus Error Summary on window load
+    (PR [#671](https://github.com/alphagov/govuk-frontend/pull/671))
+
 Internal:
 
 - Update publishing docs (PR [#651](https://github.com/alphagov/govuk-frontend/pull/651))
 - Wrap `app.css` in conditional comments in review app layout (PR [#653](https://github.com/alphagov/govuk-frontend/pull/653))
 - Fix missing code highlight and remove duplicate layout
 (PR [#663](https://github.com/alphagov/govuk-frontend/pull/663))
-- Exclude test related files from `dist/` and `packages/` copy task 
+- Exclude test related files from `dist/` and `packages/` copy task
 (PR [#662](https://github.com/alphagov/govuk-frontend/pull/662))
 - Add test to check if Sass in packages compiles correctly after the `build:packages` task
 (PR [#669](https://github.com/alphagov/govuk-frontend/pull/669))

src/all/all.js

@@ -1,8 +1,9 @@
 import { nodeListForEach } from '../globals/common'
 
 import Button from '../button/button'
-import Details from '../details/details'
 import Checkboxes from '../checkboxes/checkboxes'
+import Details from '../details/details'
+import ErrorSummary from '../error-summary/error-summary'
 import Radios from '../radios/radios'
 
 export function initAll () {
@@ -14,6 +15,10 @@ export function initAll () {
     new Checkboxes($checkbox).init()
   })
 
+  // Find first Error Summary module to enhance.
+  var $errorSummary = document.querySelector('[data-module="error-summary"]')
+  new ErrorSummary($errorSummary).init()
+
   var $radios = document.querySelectorAll('[data-module="radios"]')
   nodeListForEach($radios, function ($radio) {
     new Radios($radio).init()

src/error-summary/README.md

@@ -16,7 +16,7 @@ Find out when to use the Error summary component in your service in the [GOV.UK
 
 #### Markup
 
-    <div class="govuk-error-summary optional-extra-class" aria-labelledby="error-summary-title" role="alert" tabindex="-1">
+    <div class="govuk-error-summary optional-extra-class" aria-labelledby="error-summary-title" role="alert" tabindex="-1" data-module="error-summary">
       <h2 class="govuk-error-summary__title" id="error-summary-title">
         Message to alert the user to a problem goes here
       </h2>

src/error-summary/error-summary.js

@@ -0,0 +1,17 @@
+import '../globals/polyfills/Event' // addEventListener
+
+function ErrorSummary ($module) {
+  this.$module = $module
+}
+
+ErrorSummary.prototype.init = function () {
+  var $module = this.$module
+  if (!$module) {
+    return
+  }
+  window.addEventListener('load', function () {
+    $module.focus()
+  })
+}
+
+export default ErrorSummary

src/error-summary/error-summary.test.js

@@ -0,0 +1,31 @@
+/**
+ * @jest-environment ./lib/puppeteer/environment.js
+ */
+/* eslint-env jest */
+
+const configPaths = require('../../config/paths.json')
+const PORT = configPaths.ports.test
+
+let browser
+let page
+let baseUrl = 'http://localhost:' + PORT
+
+beforeAll(async (done) => {
+  browser = global.__BROWSER__
+  page = await browser.newPage()
+  done()
+})
+
+afterAll(async (done) => {
+  await page.close()
+  done()
+})
+
+describe('Error Summary', () => {
+  it('is automatically focused when the page loads', async () => {
+    await page.goto(baseUrl + '/components/error-summary/preview', { waitUntil: 'load' })
+
+    const moduleName = await page.evaluate(() => document.activeElement.dataset.module)
+    expect(moduleName).toBe('error-summary')
+  })
+})

src/error-summary/error-summary.yaml

@@ -1,3 +1,6 @@
+accessibilityCriteria: |
+  - Must be focused when the page loads
+
 examples:
   - name: default
     data:

src/error-summary/template.njk

@@ -1,6 +1,6 @@
 <div class="govuk-error-summary
   {%- if params.classes %} {{ params.classes }}{% endif %}" aria-labelledby="error-summary-title" role="alert" tabindex="-1"
-  {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}>
+  {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %} data-module="error-summary">
   <h2 class="govuk-error-summary__title" id="error-summary-title">
     {{ params.titleHtml | safe if params.titleHtml else params.titleText }}
   </h2>