Add aria-labelledby to alert banners

NOTE: this PR does not update the macro documentation - this will be done separately in #2001 We have decided to keep the aria-labelledby attribute on alert banners too, to make things consistent with the error summary. We were seeing some odd behaviour when testing with NVDA and Voiceover, but this change did not seem to have a negative impact and it also means that when we next revisit the component we're at least working from a place where everything is consistent to start with.
alphagov · Nov 18, 2020 · 6db2e47 · 6db2e47
1 parent 52e001f
commit 6db2e47
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 12 deletions.
diff --git a/src/govuk/components/notification-banner/template.njk b/src/govuk/components/notification-banner/template.njk
@@ -29,12 +29,12 @@
 {%- 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 -%}
+  aria-labelledby="{{ params.titleId | default('govuk-notification-banner-title')}}"
   data-module="govuk-notification-banner"
   {%- 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 %}>
+    <h{{ params.titleHeadingLevel | default(2) }} class="govuk-notification-banner__title" id="{{ params.titleId | default('govuk-notification-banner-title') }}" >
       {{ title }}
     </h{{ params.titleHeadingLevel | default(2) }}>
   </div>

diff --git a/src/govuk/components/notification-banner/template.test.js b/src/govuk/components/notification-banner/template.test.js
@@ -187,18 +187,18 @@ describe('Notification-banner', () => {
       expect($component.attr('role')).toEqual('alert')
     })
 
-    it('does not render aria-labelledby', () => {
+    it('does render aria-labelledby', () => {
       const $ = render('notification-banner', examples['with type as success'])
       const $component = $('.govuk-notification-banner')
 
-      expect($component.attr('aria-labelledby')).toBeUndefined()
+      expect($component.attr('aria-labelledby')).toEqual('govuk-notification-banner-title')
     })
 
-    it('does not render a title id for aria-labelledby', () => {
+    it('renders a title id for aria-labelledby', () => {
       const $ = render('notification-banner', examples['with type as success'])
-      const $component = $('.govuk-notification-banner')
+      const $component = $('.govuk-notification-banner__title')
 
-      expect($component.attr('id')).toBeUndefined()
+      expect($component.attr('id')).toEqual('govuk-notification-banner-title')
     })
 
     it('renders default success title text', () => {
@@ -207,6 +207,15 @@ describe('Notification-banner', () => {
 
       expect($title.html().trim()).toEqual('Success')
     })
+
+    it('renders custom title id and aria-labelledby', () => {
+      const $ = render('notification-banner', examples['custom title id with type as success'])
+      const $component = $('.govuk-notification-banner')
+      const $title = $('.govuk-notification-banner__title')
+
+      expect($component.attr('aria-labelledby')).toEqual('my-id')
+      expect($title.attr('id')).toEqual('my-id')
+    })
   })
 
   describe('when error type is passed', () => {
@@ -224,18 +233,18 @@ describe('Notification-banner', () => {
       expect($component.attr('role')).toEqual('alert')
     })
 
-    it('does not render aria-labbelledby', () => {
+    it('does render aria-labelledby', () => {
       const $ = render('notification-banner', examples['with type as error'])
       const $component = $('.govuk-notification-banner')
 
-      expect($component.attr('aria-labbelledby')).toBeUndefined()
+      expect($component.attr('aria-labelledby')).toEqual('govuk-notification-banner-title')
     })
 
-    it('does not render a title id for aria-labelledby', () => {
+    it('does render a title id for aria-labelledby', () => {
       const $ = render('notification-banner', examples['with type as error'])
-      const $component = $('.govuk-notification-banner')
+      const $component = $('.govuk-notification-banner__title')
 
-      expect($component.attr('id')).toBeUndefined()
+      expect($component.attr('id')).toEqual('govuk-notification-banner-title')
     })
 
     it('renders custom title id', () => {
@@ -251,6 +260,15 @@ describe('Notification-banner', () => {
 
       expect($title.html().trim()).toEqual('Error')
     })
+
+    it('renders custom title id and aria-labelledby', () => {
+      const $ = render('notification-banner', examples['custom title id with type as error'])
+      const $component = $('.govuk-notification-banner')
+      const $title = $('.govuk-notification-banner__title')
+
+      expect($component.attr('aria-labelledby')).toEqual('my-id')
+      expect($title.attr('id')).toEqual('my-id')
+    })
   })
 
   describe('when type that is invalid is passed', () => {