Merge pull request #1178 from NHSDigital/12368-focus-style-flash-messages

Enable auto-focus on flash messages

Author: malcolmbaig

manage_breast_screening/core/jinja2/layout-app.jinja

@@ -61,18 +61,15 @@
 {% block content %}
   {% block flash_messages %}
     {% set info_notification_params = get_notification_banner_params(
-        request, message_type='info',
-        disable_auto_focus=disable_auto_focus|default(true)
+        request, message_type='info'
       ) %}
 
     {% set success_notification_params = get_notification_banner_params(
-        request, message_type='success',
-        disable_auto_focus=disable_auto_focus|default(true)
+        request, message_type='success'
       ) %}
 
     {% set warning_notification_params = get_notification_banner_params(
-        request, message_type='warning',
-        disable_auto_focus=disable_auto_focus|default(true)
+        request, message_type='warning'
       ) %}
 
     {% if success_notification_params %}

manage_breast_screening/core/jinja2/workflow_step.jinja

@@ -21,18 +21,15 @@
     </div>
     <div class="nhsuk-grid-column-three-quarters app-workflow-container__main" id="workflow_content">
       {% set info_notification_params = get_notification_banner_params(
-          request, message_type='info',
-          disable_auto_focus=disable_auto_focus|default(true)
+          request, message_type='info'
         ) %}
 
       {% set success_notification_params = get_notification_banner_params(
-          request, message_type='success',
-          disable_auto_focus=disable_auto_focus|default(true)
+          request, message_type='success'
         ) %}
 
       {% set warning_notification_params = get_notification_banner_params(
-          request, message_type='warning',
-          disable_auto_focus=disable_auto_focus|default(true)
+          request, message_type='warning'
         ) %}
 
       {% if success_notification_params %}

manage_breast_screening/core/template_helpers.py

@@ -86,7 +86,7 @@ def message_with_heading(heading: str, html=None) -> SafeString:
 
 
 def get_notification_banner_params(
-    request, message_type="info", disable_auto_focus=True
+    request, message_type="info", disable_auto_focus=False
 ):
     levels = {"info": INFO, "warning": WARNING, "success": SUCCESS}
     try:
@@ -102,18 +102,15 @@ def get_notification_banner_params(
 
     message = messages[0].message
 
+    params = {"type": message_type}
+    if disable_auto_focus:
+        params["disableAutoFocus"] = True
     if _is_safe_message(message):
-        return {
-            "html": Markup(message),
-            "type": message_type,
-            "disableAutoFocus": disable_auto_focus,
-        }
+        params["html"] = Markup(message)
     else:
-        return {
-            "text": message,
-            "type": message_type,
-            "disableAutoFocus": disable_auto_focus,
-        }
+        params["text"] = message
+    params["role"] = "alert"
+    return params
 
 
 def _user_name_and_role_item(user):

manage_breast_screening/core/tests/jinja2/test_base_template.py

@@ -50,7 +50,7 @@ def test_success_banner(jinja_env):
 
     assertInHTML(
         """
-        <div class="nhsuk-notification-banner nhsuk-notification-banner--success" role="alert" aria-labelledby="nhsuk-notification-banner-title" data-module="nhsuk-notification-banner" data-disable-auto-focus="true">
+        <div class="nhsuk-notification-banner nhsuk-notification-banner--success" role="alert" aria-labelledby="nhsuk-notification-banner-title" data-module="nhsuk-notification-banner">
             <div class="nhsuk-notification-banner__header">
                 <h2 class="nhsuk-notification-banner__title" id="nhsuk-notification-banner-title">Success</h2>
             </div>
@@ -80,7 +80,7 @@ def test_success_banner_with_html_message(jinja_env):
 
     assertInHTML(
         """
-        <div class="nhsuk-notification-banner nhsuk-notification-banner--success" role="alert" aria-labelledby="nhsuk-notification-banner-title" data-module="nhsuk-notification-banner" data-disable-auto-focus="true">
+        <div class="nhsuk-notification-banner nhsuk-notification-banner--success" role="alert" aria-labelledby="nhsuk-notification-banner-title" data-module="nhsuk-notification-banner">
             <div class="nhsuk-notification-banner__header">
                 <h2 class="nhsuk-notification-banner__title" id="nhsuk-notification-banner-title">Success</h2>
             </div>

manage_breast_screening/core/tests/test_template_helpers.py

@@ -80,19 +80,15 @@ def dummy_request(self):
 
     def test_info_banner_with_text_message(self, dummy_request):
         result = get_notification_banner_params(dummy_request, "info")
-        assert result == {"text": "abc", "type": "info", "disableAutoFocus": True}
+        assert result == {"text": "abc", "type": "info", "role": "alert"}
 
     def test_success_banner_with_text_message(self, dummy_request):
         result = get_notification_banner_params(dummy_request, "success")
-        assert result == {"text": "def", "type": "success", "disableAutoFocus": True}
+        assert result == {"text": "def", "type": "success", "role": "alert"}
 
     def test_warning_banner_with_text_message(self, dummy_request):
         result = get_notification_banner_params(dummy_request, "warning")
-        assert result == {
-            "text": "warning!",
-            "type": "warning",
-            "disableAutoFocus": True,
-        }
+        assert result == {"text": "warning!", "type": "warning", "role": "alert"}
 
     def test_invalid_message_type(self, dummy_request):
         with pytest.raises(
@@ -101,11 +97,16 @@ def test_invalid_message_type(self, dummy_request):
         ):
             get_notification_banner_params(dummy_request, "error")
 
-    def test_autofocus_param(self, dummy_request):
+    def test_autofocus_can_be_disabled(self, dummy_request):
         result = get_notification_banner_params(
-            dummy_request, "info", disable_auto_focus=False
+            dummy_request, "info", disable_auto_focus=True
         )
-        assert result == {"text": "abc", "type": "info", "disableAutoFocus": False}
+        assert result == {
+            "text": "abc",
+            "type": "info",
+            "disableAutoFocus": True,
+            "role": "alert",
+        }
 
 
 class TestNotificationBannerParamsForHTMLMessages:
@@ -120,16 +121,8 @@ def dummy_request(self):
 
     def test_info_banner_with_html_message(self, dummy_request):
         result = get_notification_banner_params(dummy_request, "info")
-        assert result == {
-            "html": mark_safe("abc"),
-            "type": "info",
-            "disableAutoFocus": True,
-        }
+        assert result == {"html": mark_safe("abc"), "type": "info", "role": "alert"}
 
     def test_success_banner_with_html_message(self, dummy_request):
         result = get_notification_banner_params(dummy_request, "success")
-        assert result == {
-            "html": mark_safe("def"),
-            "type": "success",
-            "disableAutoFocus": True,
-        }
+        assert result == {"html": mark_safe("def"), "type": "success", "role": "alert"}

manage_breast_screening/tests/system/clinical/test_appointment_tabs.py

@@ -180,14 +180,14 @@ def then_i_should_see_the_demographic_banner(self):
         expect(self.page.get_by_text("NHS Number")).to_be_visible()
 
     def and_the_message_says_in_progress_with_someone_else(self):
-        alert = self.page.get_by_role("region")
+        alert = self.page.get_by_role("alert")
         expect(alert).to_contain_text("Important")
         expect(alert).to_contain_text(
             "This appointment is currently being run by F. Lastname."
         )
 
     def and_no_message_says_in_progress_with_someone_else(self):
-        expect(self.page.get_by_role("region")).not_to_be_attached()
+        expect(self.page.get_by_role("alert")).not_to_be_attached()
 
     def when_i_change_to_the_participant_details_tab(self):
         self.when_i_change_to_an_appointment_tab("Participant")