Test that tabindex is removed on blur

Also test that if the tabindex wasn't added with JavaScript, it doesn't get removed by the script.
alphagov · Nov 16, 2020 · f7e9b8f · f7e9b8f
1 parent e699b83
commit f7e9b8f
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 3 deletions.
diff --git a/src/govuk/components/notification-banner/notification-banner.test.js b/src/govuk/components/notification-banner/notification-banner.test.js
@@ -6,7 +6,7 @@ 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 () => {
+  it('has the correct tabindex attribute 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'))
@@ -21,6 +21,15 @@ describe('/components/notification-banner/with-type-as-success', () => {
 
     expect(activeElement).toBe('govuk-notification-banner')
   })
+
+  it('removes the tabindex attribute on blur', async () => {
+    await page.goto(baseUrl + '/components/notification-banner/with-type-as-success/preview', { waitUntil: 'load' })
+
+    await page.$eval('.govuk-notification-banner', el => el.blur())
+
+    const tabindex = await page.$eval('.govuk-notification-banner', el => el.getAttribute('tabindex'))
+    expect(tabindex).toBeNull()
+  })
 })
 
 describe('components/notification-banner/auto-focus-disabled,-with-type-as-success/', () => {
@@ -30,7 +39,7 @@ describe('components/notification-banner/auto-focus-disabled,-with-type-as-succe
 
       const tabindex = await page.$eval('.govuk-notification-banner', el => el.getAttribute('tabindex'))
 
-      expect(tabindex).toBeFalsy()
+      expect(tabindex).toBeNull()
     })
 
     it('does not focus the notification banner', async () => {
@@ -50,7 +59,7 @@ describe('components/notification-banner/role=alert-overridden-to-role=region,-w
 
       const tabindex = await page.$eval('.govuk-notification-banner', el => el.getAttribute('tabindex'))
 
-      expect(tabindex).toBeFalsy()
+      expect(tabindex).toBeNull()
     })
 
     it('does not focus the notification banner', async () => {
@@ -62,3 +71,16 @@ describe('components/notification-banner/role=alert-overridden-to-role=region,-w
     })
   })
 })
+
+describe('/components/notification-banner/custom-tabindex', () => {
+  describe('when custom tabindex set', () => {
+    it('it does not remove the tabindex attribute on blur', async () => {
+      await page.goto(baseUrl + '/components/notification-banner/custom-tabindex/preview', { waitUntil: 'load' })
+
+      await page.$eval('.govuk-notification-banner', el => el.blur())
+
+      const tabindex = await page.$eval('.govuk-notification-banner', el => el.getAttribute('tabindex'))
+      expect(tabindex).toEqual('2')
+    })
+  })
+})
diff --git a/src/govuk/components/notification-banner/notification-banner.yaml b/src/govuk/components/notification-banner/notification-banner.yaml
@@ -93,6 +93,12 @@ examples:
     type: success
     role: region
     text: Email sent to example@email.com-
+- name:  custom tabindex
+  data:
+    type: success
+    text: Email sent to example@email.com-
+    attributes:
+      tabindex: 2
 
 # Hidden examples are not shown in the review app, but are used for tests and HTML fixtures