Prevent error summary from being refocused after it has been initially focused on page load

src/govuk/components/error-summary/error-summary.js

@@ -11,11 +11,28 @@ ErrorSummary.prototype.init = function () {
   if (!$module) {
     return
   }
-  $module.focus()
 
+  this.setFocus()
   $module.addEventListener('click', this.handleClick.bind(this))
 }
 
+/**
+ * Focus the error summary
+ */
+ErrorSummary.prototype.setFocus = function () {
+  var $module = this.$module
+
+  // Set tabindex to -1 to make the element programmatically focusable, but
+  // remove it on blur as the error summary doesn't need to be focused again.
+  $module.setAttribute('tabindex', '-1')
+
+  $module.addEventListener('blur', function () {
+    $module.removeAttribute('tabindex')
+  })
+
+  $module.focus()
+}
+
 /**
 * Click event handler
 *

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

@@ -13,6 +13,15 @@ describe('Error Summary', () => {
     expect(moduleName).toBe('govuk-error-summary')
   })
 
+  it('removes the tabindex attribute on blur', async () => {
+    await page.goto(baseUrl + '/components/error-summary/preview', { waitUntil: 'load' })
+
+    await page.$eval('.govuk-error-summary', el => el.blur())
+
+    const tabindex = await page.$eval('.govuk-error-summary', el => el.getAttribute('tabindex'))
+    expect(tabindex).toBeNull()
+  })
+
   const inputTypes = [
     // [description, input id, selector for label or legend]
     ['an input', 'input', 'label[for="input"]'],

src/govuk/components/error-summary/template.njk

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

src/govuk/components/error-summary/template.test.js

@@ -32,13 +32,6 @@ describe('Error-summary', () => {
       expect(roleAttr).toEqual('alert')
     })
 
-    it('has the correct tabindex attribute to be focussed', () => {
-      const $ = render('error-summary', examples.default)
-      const tabindexAttr = $('.govuk-error-summary').attr('tabindex')
-
-      expect(tabindexAttr).toEqual('-1')
-    })
-
     it('renders title text', () => {
       const $ = render('error-summary', examples.default)
       const summaryTitle = $('.govuk-error-summary__title').text().trim()