From ee276b3747568fdaa8d0b72e3eaaa3456d412722 Mon Sep 17 00:00:00 2001
From: Tom Byers <tombaromba@gmail.com>
Date: Thu, 20 Feb 2025 15:01:22 +0000
Subject: [PATCH] Give banner role of 'status' if just an update

We currently use the role of 'alert' for all
banners. In recent accessibility testing, the
Digital Accessibility Centre (DAC) suggested we
should only be using that role for important or
time-sensitive updates. This changes the banner
component so the default role is 'status' to
reflect that.

In practice, this will change how the green
banners are announced by screen readers.
---
 app/assets/javascripts/esm/focus-banner.mjs   |  2 +-
 app/templates/components/banner.html          |  2 +-
 .../email-reply-to/_verify-updates.html       |  2 +-
 tests/javascripts/focus-banner.test.mjs       | 29 -------------------
 4 files changed, 3 insertions(+), 32 deletions(-)

diff --git a/app/assets/javascripts/esm/focus-banner.mjs b/app/assets/javascripts/esm/focus-banner.mjs
index 1a60009769..d3580f35c3 100644
--- a/app/assets/javascripts/esm/focus-banner.mjs
+++ b/app/assets/javascripts/esm/focus-banner.mjs
@@ -23,7 +23,7 @@ class FocusBanner {
 
     // focus success and error banners when they appear in any content updates
     $(document).on("updateContent.onafterupdate", function(evt, el) {
-      this.focusBanner($(".banner-dangerous, .banner-default-with-tick", el));
+      this.focusBanner($(".banner-dangerous", el));
     }.bind(this));
   }
 
diff --git a/app/templates/components/banner.html b/app/templates/components/banner.html
index e1484fdb09..83a8ae4e98 100644
--- a/app/templates/components/banner.html
+++ b/app/templates/components/banner.html
@@ -5,7 +5,7 @@
 {% macro banner(body, type=None, with_tick=False, delete_button=None, subhead=None, context=None, action=None, id=None, thing=None) %}
   <div
     class='banner{% if type %}-{{ type }}{% endif %}{% if with_tick %}-with-tick{% endif %}'
-    role='alert'
+    {% if type == 'dangerous' %}role="alert"{% else %}role="status"{% endif %}
     {% if id %}
     id={{ id }}
     {% endif %}
diff --git a/app/templates/views/service-settings/email-reply-to/_verify-updates.html b/app/templates/views/service-settings/email-reply-to/_verify-updates.html
index 78fb823363..fc3fda2375 100644
--- a/app/templates/views/service-settings/email-reply-to/_verify-updates.html
+++ b/app/templates/views/service-settings/email-reply-to/_verify-updates.html
@@ -6,6 +6,7 @@
 
 <div class="ajax-block-container">
   {% if verification_status == "pending" %}
+    <div role="status"></div>
     {{ page_header('Checking email reply-to address') }}
     <p class="govuk-body">
       We’re checking that ‘{{ reply_to_email_address }}’ is a real email address.
@@ -19,7 +20,6 @@
     </p>
   {% elif verification_status == "success" %}
     {{ banner("‘{}’ is ready to use".format(reply_to_email_address), type='default', with_tick=True) }}
-
     {{ page_header('Checking email reply-to address') }}
     <div class="js-stick-at-bottom-when-scrolling">
       {{ govukButton({
diff --git a/tests/javascripts/focus-banner.test.mjs b/tests/javascripts/focus-banner.test.mjs
index 5f520b7ba6..1ec6080ff6 100644
--- a/tests/javascripts/focus-banner.test.mjs
+++ b/tests/javascripts/focus-banner.test.mjs
@@ -56,35 +56,6 @@ describe('Focus banner', () => {
 
     });
 
-    test('If there is a div.banner-default-with-tick in the updated content, it should be focused', () => {
-
-      document.body.innerHTML = `
-        <div class="ajax-block-container">
-        </div>`;
-
-      const ajaxBlockContainer = document.querySelector('.ajax-block-container');
-
-      (new FocusBanner());
-
-      ajaxBlockContainer.innerHTML = `
-        <div class="banner-default-with-tick">
-          <h2>This is a problem with your upload</h2>
-          <p>The file uploaded needs to be a PNG</p>
-        </div>`;
-
-      // simulate a content update event
-      $(document).trigger('updateContent.onafterupdate', ajaxBlockContainer);
-
-      const bannerEl = document.querySelector('.banner-default-with-tick');
-
-      expect(document.activeElement).toBe(bannerEl);
-
-      $(bannerEl).trigger('blur');
-
-      expect(bannerEl.hasAttribute('tabindex')).toBe(false);
-
-    });
-
   });
 
 });