Test autofocusing behaviour of notification banner

Test if the element has the correct tabindex and can be focused. Test that element is not focused if it has the data-disable-auto-focus attribute or it doesn’t have role=alert.
alphagov · Oct 29, 2020 · d9cc60a · d9cc60a
1 parent 5cf522d
commit d9cc60a
Show file tree

Hide file tree

Showing 4 changed files with 90 additions and 140 deletions.
diff --git a/src/govuk/components/notification-banner/notification-banner.test.js b/src/govuk/components/notification-banner/notification-banner.test.js
@@ -0,0 +1,64 @@
+/* eslint-env jest */
+
+const configPaths = require('../../../../config/paths.json')
+const PORT = configPaths.ports.test
+
+const baseUrl = 'http://localhost:' + PORT
+
+describe('/components/notification-banner/with-type-as-success', () => {
+  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 tabindex = await page.$eval('.govuk-notification-banner', el => el.getAttribute('tabindex'))
+
+    expect(tabindex).toEqual('-1')
+  })
+
+  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)
+
+    expect(activeElement).toBe('govuk-notification-banner')
+  })
+})
+
+describe('components/notification-banner/auto-focus-disabled,-with-type-as-success/', () => {
+  describe('when auto-focus is disabled', () => {
+    it('does not have a tabindex attribute', async () => {
+      await page.goto(`${baseUrl}/components/notification-banner/auto-focus-disabled,-with-type-as-success/preview`, { waitUntil: 'load' })
+
+      const tabindex = await page.$eval('.govuk-notification-banner', el => el.getAttribute('tabindex'))
+
+      expect(tabindex).toBeFalsy()
+    })
+
+    it('does not focus the notification banner', async () => {
+      await page.goto(`${baseUrl}/components/notification-banner/auto-focus-disabled,-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/role=alert-overridden-to-role=region,-with-type-as-success', () => {
+  describe('when role is not alert', () => {
+    it('does not have a tabindex attribute', async () => {
+      await page.goto(`${baseUrl}/components/notification-banner/role=alert-overridden-to-role=region,-with-type-as-success/preview`, { waitUntil: 'load' })
+
+      const tabindex = await page.$eval('.govuk-notification-banner', el => el.getAttribute('tabindex'))
+
+      expect(tabindex).toBeFalsy()
+    })
+
+    it('does not focus the notification banner', async () => {
+      await page.goto(`${baseUrl}/components/notification-banner/role=alert-overridden-to-role=region,-with-type-as-success/preview`, { waitUntil: 'load' })
+
+      const activeElement = await page.evaluate(() => document.activeElement.dataset.module)
+
+      expect(activeElement).not.toBe('govuk-notification-banner')
+    })
+  })
+})
diff --git a/src/govuk/components/notification-banner/notification-banner.yaml b/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,6 +83,16 @@ 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 disabled, with type as success
+  data:
+    type: success
+    disableAutoFocus: true
+    text: Email sent to example@email.com
+- name:  role=alert overridden to role=region, with type as success
+  data:
+    type: success
+    role: region
+    text: Email sent to example@email.com-
 
 # Hidden examples are not shown in the review app, but are used for tests and HTML fixtures
 
@@ -142,34 +148,6 @@ examples:
   data:
     role: banner
     text: This publication was withdrawn on 7 March 2014.
-- name:  role overridden to region
-  hidden: true
-  data:
-    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
-  hidden: true
-  data:
-    type: success
-    tabindex: false
-    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: autoFocus as false and type as success
-  hidden: true
-  data:
-    type: success
-    autoFocus: false
-    text: Email sent to example@email.com
 
 - name: classes
   hidden: true

diff --git a/src/govuk/components/notification-banner/template.njk b/src/govuk/components/notification-banner/template.njk
@@ -16,21 +16,6 @@
   {% set role = "region" %}
 {% endif %}
 
-{# Check whether to add `data-auto-focus="true"` which focuses the notification banner on page load #}
-{% if params.autoFocus is defined %}
-  {% set autoFocus = params.autoFocus %}
-{% elif successOrError %}
-  {% set autoFocus = true %}
-{% endif %}
-
-{% if params.tabindex is defined %}
-  {% set tabindex = params.tabindex %}
-{# Make sure that success or error banner should be focused on page load #}
-{% elif successOrError and autoFocus %}
-  {# Make the notification banner focusable #}
-  {% set tabindex = "-1" %}
-{% endif %}
-
 {%- if params.titleHtml %}
   {% set title = params.titleHtml | safe %}
 {%- elif params.title %}
@@ -43,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 autoFocus -%} data-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 %}>

diff --git a/src/govuk/components/notification-banner/template.test.js b/src/govuk/components/notification-banner/template.test.js
@@ -33,27 +33,13 @@ describe('Notification-banner', () => {
       expect($component.attr('role')).toEqual('region')
     })
 
-    it('does not have tabindex set', () => {
-      const $ = render('notification-banner', examples.default)
-
-      const $component = $('.govuk-notification-banner')
-      expect($component.attr('tabindex')).toBeUndefined()
-    })
-
     it('has data-module attribute to initialise JavaScript', () => {
       const $ = render('notification-banner', examples.default)
       const $component = $('.govuk-notification-banner')
 
       expect($component.attr('data-module')).toEqual('govuk-notification-banner')
     })
 
-    it('does not have data-auto-focus attribute to focus component on page load', () => {
-      const $ = render('notification-banner', examples.default)
-      const $component = $('.govuk-notification-banner')
-
-      expect($component.attr('data-auto-focus')).not.toEqual('govuk-auto-focus')
-    })
-
     it('renders header container', () => {
       const $ = render('notification-banner', examples.default)
       const $header = $('.govuk-notification-banner__header')
@@ -113,20 +99,13 @@ describe('Notification-banner', () => {
     })
 
     it('renders aria-labelledby attribute matching the title id when role overridden to region', () => {
-      const $ = render('notification-banner', examples['role overridden to region'])
+      const $ = render('notification-banner', examples['role=alert overridden to role=region, with type as success'])
       const ariaAttr = $('.govuk-notification-banner').attr('aria-labelledby')
       const titleId = $('.govuk-notification-banner__title').attr('id')
 
       expect(ariaAttr).toEqual(titleId)
     })
 
-    it('renders custom tabindex', () => {
-      const $ = render('notification-banner', examples['custom tabindex'])
-      const $component = $('.govuk-notification-banner')
-
-      expect($component.attr('tabindex')).toEqual('0')
-    })
-
     it('renders custom title id', () => {
       const $ = render('notification-banner', examples['custom title id'])
       const $title = $('.govuk-notification-banner__title')
@@ -141,25 +120,11 @@ describe('Notification-banner', () => {
       expect(ariaAttr).toEqual('my-id')
     })
 
-    it('renders data-auto-focus attribute to focus component on page load', () => {
-      const $ = render('notification-banner', examples['autoFocus as true'])
-
-      const $component = $('.govuk-notification-banner')
-      expect($component.attr('data-auto-focus')).toEqual('true')
-    })
-
-    it('removes tabindex attribute so component is not focusable', () => {
-      const $ = render('notification-banner', examples['tabindex as false and type as success'])
-
-      const $component = $('.govuk-notification-banner')
-      expect($component.attr('tabindex')).toBeUndefined()
-    })
-
-    it('removes data-auto-focus attribute so component is not focused on page load', () => {
-      const $ = render('notification-banner', examples['autoFocus as false and type as success'])
+    it('adds the data-disable-auto-focus attribute so component is not focused on page load', () => {
+      const $ = render('notification-banner', examples['auto-focus disabled, with type as success'])
 
       const $component = $('.govuk-notification-banner')
-      expect($component.attr('data-auto-focus')).toBeUndefined()
+      expect($component.attr('data-disable-auto-focus')).toBeTruthy()
     })
 
     it('renders classes', () => {
@@ -192,11 +157,11 @@ describe('Notification-banner', () => {
       expect($title.html().trim()).toEqual('<span>Important information</span>')
     })
 
-    it(' as escaped html when passed as text', () => {
+    it('renders content as escaped html when passed as text', () => {
       const $ = render('notification-banner', examples['html as text'])
-      const $content = $('.govuk-notification-banner__heading')
+      const $content = $('.govuk-notification-banner__content')
 
-      expect($content.html().trim()).toEqual('&lt;span&gt;This publication was withdrawn on 7 March 2014.&lt;/span&gt;')
+      expect($content.html().trim()).toEqual('<p class="govuk-notification-banner__heading">&lt;span&gt;This publication was withdrawn on 7 March 2014.&lt;/span&gt;</p>')
     })
 
     it('renders content as html', () => {
@@ -236,27 +201,6 @@ describe('Notification-banner', () => {
       expect($component.attr('id')).toBeUndefined()
     })
 
-    it('renders custom title id', () => {
-      const $ = render('notification-banner', examples['custom title id with type as success'])
-      const $title = $('.govuk-notification-banner__title')
-
-      expect($title.attr('id')).toEqual('my-id')
-    })
-
-    it('has the correct tabindex attribute to be focused', () => {
-      const $ = render('notification-banner', examples['with type as success'])
-
-      const $component = $('.govuk-notification-banner')
-      expect($component.attr('tabindex')).toEqual('-1')
-    })
-
-    it('renders data-auto-focus attribute to focus component on page load', () => {
-      const $ = render('notification-banner', examples['with type as success'])
-
-      const $component = $('.govuk-notification-banner')
-      expect($component.attr('data-auto-focus')).toEqual('true')
-    })
-
     it('renders default success title text', () => {
       const $ = render('notification-banner', examples['with type as success'])
       const $title = $('.govuk-notification-banner__title')
@@ -301,20 +245,6 @@ describe('Notification-banner', () => {
       expect($title.attr('id')).toEqual('my-id')
     })
 
-    it('has the correct tabindex attribute to be focused', () => {
-      const $ = render('notification-banner', examples['with type as error'])
-
-      const $component = $('.govuk-notification-banner')
-      expect($component.attr('tabindex')).toEqual('-1')
-    })
-
-    it('renders data-auto-focus attribute to focus component on page load', () => {
-      const $ = render('notification-banner', examples['with type as error'])
-
-      const $component = $('.govuk-notification-banner')
-      expect($component.attr('data-auto-focus')).toEqual('true')
-    })
-
     it('renders default error title text', () => {
       const $ = render('notification-banner', examples['with type as error'])
       const $title = $('.govuk-notification-banner__title')
@@ -331,18 +261,12 @@ describe('Notification-banner', () => {
       expect($component.attr('role')).toEqual('region')
     })
 
-    it('does not have tabindex set', () => {
-      const $ = render('notification-banner', examples['with invalid type'])
-
-      const $component = $('.govuk-notification-banner')
-      expect($component.attr('tabindex')).toBeUndefined()
-    })
-
-    it('does not have data-auto-focus attribute to focus component on page load', () => {
+    it('aria-labelledby attribute matches the title id', () => {
       const $ = render('notification-banner', examples['with invalid type'])
-      const $component = $('.govuk-notification-banner')
+      const ariaAttr = $('.govuk-notification-banner').attr('aria-labelledby')
+      const titleId = $('.govuk-notification-banner__title').attr('id')
 
-      expect($component.attr('data-auto-focus')).not.toEqual('govuk-auto-focus')
+      expect(ariaAttr).toEqual(titleId)
     })
   })
 })