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

@@ -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));
   }
 

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 %}

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({

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);
-
-    });
-
   });
 
 });