PR fixes

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

@@ -41,7 +41,7 @@ NotificationBanner.prototype.setFocus = function () {
     $module.setAttribute('tabindex', '-1')
   }
 
-  this.$module.focus()
+  $module.focus()
 }
 
 export default NotificationBanner

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

@@ -6,21 +6,59 @@ const PORT = configPaths.ports.test
 const baseUrl = 'http://localhost:' + PORT
 
 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' })
+  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).toEqual('-1')
+      expect(tabindex).toBeFalsy()
     })
 
-    it('is automatically focused when the page loads', async () => {
-      await page.goto(baseUrl + '/components/notification-banner/with-type-as-success/preview', { waitUntil: 'load' })
+    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).toBe('govuk-notification-banner')
+      expect(activeElement).not.toBe('govuk-notification-banner')
     })
   })
 })

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

@@ -83,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
 
@@ -138,18 +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: auto-focus is disabled, with type as success
-  hidden: true
-  data:
-    type: success
-    disableAutoFocus: true
-    text: Email sent to example@email.com
 
 - name: classes
   hidden: true

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

@@ -99,7 +99,7 @@ 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')
 
@@ -121,7 +121,7 @@ describe('Notification-banner', () => {
     })
 
     it('adds the data-disable-auto-focus attribute so component is not focused on page load', () => {
-      const $ = render('notification-banner', examples['auto-focus is disabled, with type as success'])
+      const $ = render('notification-banner', examples['auto-focus disabled, with type as success'])
 
       const $component = $('.govuk-notification-banner')
       expect($component.attr('data-disable-auto-focus')).toBeTruthy()