PR fixes

src/govuk/components/notification-banner/notification-banner.js

@@ -4,16 +4,17 @@ function NotificationBanner ($module) {
   this.$module = $module
 }
 
-// Initialise component
+/**
+ * Initialise the component
+ */
 NotificationBanner.prototype.init = function () {
   var $module = this.$module
   // Check for module
   if (!$module) {
     return
   }
 
-  // Focus the element when the HTML document has loaded
-  window.addEventListener('DOMContentLoaded', this.setFocus.bind(this))
+  this.setFocus()
 }
 
 /**
@@ -22,25 +23,22 @@ NotificationBanner.prototype.init = function () {
  * If `role="alert"` is set, focus the element to help some assistive technologies
  * prioritise announcing it.
  *
- * This function should be called *after* the `DOMContentLoaded` event is fired.
- *
- * You can turn off the auto-focus functionality by setting `data-disable-auto-focus="true"` in the * component HTML. You might wish to do this based on user research findings, or to avoid
- * a clash with another element which should be focused when the page loads.
+ * You can turn off the auto-focus functionality by setting `data-disable-auto-focus="true"` in the
+ * component HTML. You might wish to do this based on user research findings, or to avoid a clash
+ * with another element which should be focused when the page loads.
  */
 NotificationBanner.prototype.setFocus = function () {
   var $module = this.$module
 
-  // Check if the attribute that disables the auto focus is present
   if ($module.getAttribute('data-disable-auto-focus') === 'true') {
     return
   }
 
-  // Check if `role="alert"` is set. When this role is added to an element, the browser will send out an accessible alert event to assistive technology products which can then notify the user about it.
   if ($module.getAttribute('role') !== 'alert') {
     return
   }
 
-  // Set tabindex to -1 so to make the element focusable with JavaScript (the element will not be reachable via sequential keyboard navigation).
+  // Set tabindex to -1 to make the element focusable with JavaScript.
   if (!$module.getAttribute('tabindex')) {
     $module.setAttribute('tabindex', '-1')
   }

src/govuk/components/notification-banner/notification-banner.test.js

@@ -5,64 +5,22 @@ const PORT = configPaths.ports.test
 
 const baseUrl = 'http://localhost:' + PORT
 
-describe('/components/notification-banner', () => {
-  describe('/examples/notification-banner', () => {
-    describe('when JavaScript is available', () => {
-      it('focuses the notification banner', async () => {
-        await page.goto(`${baseUrl}/examples/notification-banner`, { waitUntil: 'load' })
+describe('/components/notification-banner/with-type-as-success', () => {
+  describe('when JavaScript is available', () => {
+    it('has the correct tabindex to be focused with JavaScript', async () => {
+      await page.goto(baseUrl + '/components/notification-banner/with-type-as-success/preview', { waitUntil: 'load' })
 
-        const activeElement = await page.evaluate(() => document.activeElement.dataset.module)
+      const tabindex = await page.$eval('.govuk-notification-banner', el => el.getAttribute('tabindex'))
 
-        expect(activeElement).toBe('govuk-notification-banner')
-      })
+      expect(tabindex).toEqual('-1')
     })
-  })
-
-  describe('/examples/notification-banner-and-error-summary', () => {
-    describe('when there is an error summary on the page', () => {
-      it('the notification banner is not focused and the error summary is', async () => {
-        await page.goto(`${baseUrl}/examples/notification-banner-and-error-summary`, { waitUntil: 'load' })
-
-        const activeElement = await page.evaluate(() => document.activeElement.dataset.module)
-
-        expect(activeElement).toBe('govuk-error-summary')
-      })
-    })
-  })
-
-  describe('/examples/notification-banner-multiple', () => {
-    describe('when there are multiple notification banners on the page', () => {
-      it('the first one on the page is focused', async () => {
-        await page.goto(`${baseUrl}/examples/notification-banner-multiple`, { waitUntil: 'load' })
-
-        const activeElementTextContent = await page.evaluate(() => document.activeElement.textContent)
-
-        expect(activeElementTextContent).toContain('There was a problem uploading your file. Please try again.')
-      })
-    })
-  })
-
-  describe('components/notification-banner/auto-focus-as-is-set-to-false,-with-type-as-success', () => {
-    describe('when auto-focus is set to false', () => {
-      it('does not focus the notification banner', async () => {
-        await page.goto(`${baseUrl}/components/notification-banner/auto-focus-as-is-set-to-false,-with-type-as-success/preview`, { waitUntil: 'load' })
-
-        const activeElement = await page.evaluate(() => document.activeElement.dataset.module)
-
-        expect(activeElement).not.toBe('govuk-notification-banner')
-      })
-    })
-  })
 
-  describe('components/notification-banner/data-auto-focus-is-set-without-role=alert/', () => {
-    describe('when role="alert" is not set', () => {
-      it('does not focus the notification banner', async () => {
-        await page.goto(`${baseUrl}/components/notification-banner/data-auto-focus-is-set-without-role=alert/preview`, { waitUntil: 'load' })
+    it('is automatically focused when the page loads', async () => {
+      await page.goto(baseUrl + '/components/notification-banner/with-type-as-success/preview', { waitUntil: 'load' })
 
-        const activeElement = await page.evaluate(() => document.activeElement.dataset.module)
+      const activeElement = await page.evaluate(() => document.activeElement.dataset.module)
 
-        expect(activeElement).not.toBe('govuk-notification-banner')
-      })
+      expect(activeElement).toBe('govuk-notification-banner')
     })
   })
 })

src/govuk/components/notification-banner/notification-banner.yaml

@@ -27,18 +27,14 @@ params:
   type: string
   required: false
   description: Overrides the value of the `role` attribute for the notification banner. Defaults to `region`. If `type` is set to `success` or `error`, defaults to `alert`.
-- name: tabindex
-  type: string/boolean
-  required: false
-  description: Overrides the value of the `tabindex` attribute for the notification banner. Not set by default.  If `type` is set to `success` or `error`, defaults to `-1`; the attribute can be removed by setting `tabindex` to `false`;
 - name: titleId
   type: string
   required: false
   description: Overrides the value of the `id` attribute for the title. `id` used by the `aria-labelledby` attribute on the notification banner to provide information to users of assistive technologies. `id` defaults to `govuk-notification-banner-title` if `role` is set to `region`. If `type` is set to `success` or `error`, `id` is not rendered by default.
-- name: autoFocus
+- name: disableAutoFocus
   type: boolean
   required: false
-  description: Moves keyboard focus to the notification banner when the page loads. Defaults to `false`. If `type` is set to `success` or `error`, defaults to `true`.
+  description: If you set 'type' to 'success' or 'error', or 'role' to 'alert', JavaScript moves the keyboard focus to the notification banner when the page loads. To disable this behaviour, set 'disableAutoFocus' to 'true'.
 - name: classes
   type: string
   required: false
@@ -87,20 +83,6 @@ examples:
           <li><a href="#" class="govuk-notification-banner__link">government-strategy-v3-FINAL.pdf</a></li>
           <li><a href="#" class="govuk-notification-banner__link">government-strategy-v4-FINAL-v2.pdf</a></li>
       </ul>
-- name: auto-focus is enabled by setting role=alert
-  data:
-    type: success
-    text: Email sent to example@email.com
-- name: auto-focus is disabled, with role=alert
-  data:
-    type: success
-    disableAutoFocus: true
-    text: Email sent to example@email.com
-- name: auto-focus is enabled with tabindex=0
-  data:
-    type: success
-    tabindex: 0
-    text: Email sent to example@email.com
 
 # Hidden examples are not shown in the review app, but are used for tests and HTML fixtures
 
@@ -162,22 +144,12 @@ examples:
     type: success
     role: region
     text: Email sent to example@email.com-
-- name: custom tabindex
-  hidden: true
-  data:
-    tabindex: 0
-    text: This publication was withdrawn on 7 March 2014.
-- name: tabindex as false and type as success
+- name: auto-focus is disabled, with type as success
   hidden: true
   data:
     type: success
-    tabindex: false
+    disableAutoFocus: true
     text: Email sent to example@email.com
-- name: autoFocus as true
-  hidden: true
-  data:
-    autoFocus: true
-    text: This publication was withdrawn on 7 March 2014.
 
 - name: classes
   hidden: true

src/govuk/components/notification-banner/template.njk

@@ -16,11 +16,6 @@
   {% set role = "region" %}
 {% endif %}
 
-{% if params.tabindex is defined %}
-  {% set tabindex = params.tabindex %}
-{% endif %}
-
-
 {%- if params.titleHtml %}
   {% set title = params.titleHtml | safe %}
 {%- elif params.title %}
@@ -33,11 +28,10 @@
   {% set title = "Important" %}
 {%- endif -%}
 
-<div class="govuk-notification-banner {{ typeClass }} {%- if params.classes %} {{ params.classes }}{% endif -%}" role="{{ role }}"
-  {%- if tabindex or tabindex === 0 %} tabindex="{{ tabindex }}" {% endif %}
-  {%- if (role == "region") %} aria-labelledby="{{ params.titleId | default('govuk-notification-banner-title') }}" {%- endif -%}
+<div class="govuk-notification-banner{% if typeClass %} {{ typeClass }}{% endif %}{% if params.classes %} {{ params.classes }}{% endif %}" role="{{ role }}"
+  {%- if (role == "region") %} aria-labelledby="{{ params.titleId | default('govuk-notification-banner-title')}}" {% endif -%}
   data-module="govuk-notification-banner"
-  {%- if params.disableAutoFocus -%} data-disable-auto-focus="true"{% endif %}
+  {%- if params.disableAutoFocus %} data-disable-auto-focus="true"{% endif %}
   {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
   <div class="govuk-notification-banner__header">
     <h{{ params.titleHeadingLevel | default(2) }} class="govuk-notification-banner__title"{% if (role == "region" or params.titleId) %} id="{{ params.titleId | default('govuk-notification-banner-title') }}" {%- endif %}>