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

CHANGELOG.md

@@ -2,9 +2,18 @@
 
 ## Unreleased
 
+### Recommended changes
+
+#### Remove the tabindex attribute from the Error Summary component
+
+If you're not using Nunjucks macros, remove the `tabindex` attribute from the HTML for the Error Summary component. This attribute is now added and removed by the JavaScript.
+
+This change was introduced in [#2491: Prevent error summary from being re-focused after it has been initially focused on page load](https://github.com/alphagov/govuk-frontend/pull/2491).
+
 ### Fixes
 
 - [#2475: Tweak whitespace in input component HTML for improved readability](https://github.com/alphagov/govuk-frontend/pull/2475)
+- [#2491: Prevent error summary from being re-focused after it has been initially focused on page load](https://github.com/alphagov/govuk-frontend/pull/2491)
 
 ## 4.0.0 (Breaking release)
 

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

@@ -6,13 +6,29 @@ const PORT = configPaths.ports.test
 const baseUrl = 'http://localhost:' + PORT
 
 describe('Error Summary', () => {
+  it('adds the tabindex attribute on page load', async () => {
+    await page.goto(baseUrl + '/components/error-summary/preview', { waitUntil: 'load' })
+
+    const tabindex = await page.$eval('.govuk-error-summary', el => el.getAttribute('tabindex'))
+    expect(tabindex).toEqual('-1')
+  })
+
   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('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()