Merge pull request #2151 from GSA/2135-send-message-flow-h1-changes

2135 - Send Message A11Y Audit - Adjust headers in Send Message flow
2026-07-28 11:49:13 -04:00 · 2024-12-05 14:05:06 -08:00
parent 7b56372415 d684168a90
commit 28a6b44a98
17 changed files with 101 additions and 90 deletions
--- a/app/assets/sass/uswds/_uswds-theme-custom-styles.scss
+++ b/app/assets/sass/uswds/_uswds-theme-custom-styles.scss
@@ -231,6 +231,13 @@ td.table-empty-message {
   background-position: 0;
 }

+.folder-heading-template {
+   background: url(../img/material-icons/wysiwyg.svg) no-repeat;
+   padding-left: units(4);
+   display: inline-block;
+   background-position: 0;
+}
+
 .usa-checkbox .usa-checkbox__label {
   + a.template-list-folder {
      margin-left: units(4);
@@ -265,6 +272,7 @@ td.table-empty-message {
   margin-bottom: units(2);
   .usa-form-group {
      @include u-width("mobile-lg");
+      margin-top: units(2);
   }
   input#search {
      width: 100%;
@@ -397,6 +405,11 @@ td.table-empty-message {
         background-image: url(../img/material-icons/description.svg);
      }
   }
+   .get-started {
+      border: 1px solid color("gray-90");
+      padding: units(2);
+      margin-bottom: units(4);
+   }
 }

 .dashboard-table {
@@ -912,3 +925,10 @@ li.linked-card:hover svg,
   margin-left: calc(24px + 4px);
   margin-top: 4px;
 }
+
+// Send message flow
+
+#breadcrumb-template-folders, #nav-service-nav span {
+   font-size: units(3);
+   font-weight: bold;
+}
--- a/app/main/views/send.py
+++ b/app/main/views/send.py
@@ -739,7 +739,7 @@ def all_placeholders_in_session(placeholders):

 def get_send_test_page_title(template_type, entering_recipient, name=None):
    if entering_recipient:
-        return "Send ‘{}’".format(name)
+        return "Select recipients"
    return "Personalize this message"


--- a/app/templates/base.html
+++ b/app/templates/base.html
@@ -6,9 +6,7 @@
 <html lang="{{ htmlLang | default('en') }}" class="{{ htmlClasses }}">
  <head>
    <title>
-      {% block pageTitle %}
-        {% block per_page_title %}{% endblock %} – Notify.gov
-      {% endblock %}
+      {% block pageTitle %}{% block per_page_title %}{% endblock %} – Notify.gov{% endblock %}
    </title>
    {% include "components/head.html" %}
  </head>
--- a/app/templates/components/folder-path.html
+++ b/app/templates/components/folder-path.html
@@ -4,9 +4,9 @@
  template_type,
  current_user,
  link_current_item=False,
-  root_element='h1'
+  root_element='nav'
 ) %}
-  <{{ root_element }} class="font-body-lg folder-heading margin-bottom-0"{% if root_element == 'h1' %} id="page-header"{% endif %}>
+  <{{ root_element }} id="breadcrumb-template-folders" class="navigation-service usa-breadcrumb padding-top-0 padding-bottom-05" aria-label="Template folder path">
    {% for folder in folders %}
      {% if loop.last and not link_current_item %}
        {% if folder.template_type or not folder.id %}
--- a/app/templates/components/live-search.html
+++ b/app/templates/components/live-search.html
@@ -17,7 +17,7 @@
    {% endif %}

    {% if show %}
-        <div class="live-search js-header" data-module="live-search" data-targets="{{ target_selector }}">
+        <div class="live-search js-header margin-top-0" data-module="live-search" data-targets="{{ target_selector }}">
          {{ form.search(param_extensions=param_extensions) }}
          <div aria-live="polite" class="live-search__status usa-sr-only"></div>
        </div>
--- a/app/templates/components/service_nav.html
+++ b/app/templates/components/service_nav.html
@@ -6,12 +6,12 @@
      <a href="{{ url_for('.organization_dashboard', org_id=current_service.organization_id) }}" class="usa-link navigation-organization-link">{{ current_service.organization_name }}</a>
    {% endif %}
  {% endif %}
-  <div class="font-body-2xl text-bold">
+  <span>
    {{ current_service.name }}
    {% if not current_service.active %}
      <span class="navigation-service-name navigation-service-type--suspended">Suspended</span>
    {% endif %}
-  </div>
+  </span>
  <a href="{{ url_for('main.choose_account') }}" class="usa-link">Switch service</a>
 </div>
 </nav>
--- a/app/templates/views/dashboard/dashboard.html
+++ b/app/templates/views/dashboard/dashboard.html
@@ -13,7 +13,7 @@
  <script type="text/javascript" src="{{ asset_url('js/setTimezone.js') }}"></script>


-  <div class="dashboard margin-bottom-2">
+  <div class="dashboard margin-top-0 margin-bottom-2">

    <h1 class="usa-sr-only">Dashboard</h1>
    {% if current_user.has_permissions('manage_templates') and not current_service.all_templates %}
@@ -22,7 +22,7 @@

    {{ ajax_block(partials, updates_url, 'upcoming') }}

-    <h2 class="font-body-xl margin-top-0">{{ current_service.name }} Dashboard</h2>
+    <h2 class="font-body-2xl line-height-sans-2 margin-top-0">{{ current_service.name }} Dashboard</h2>

    {{ ajax_block(partials, updates_url, 'inbox') }}

--- a/app/templates/views/dashboard/write-first-messages.html
+++ b/app/templates/views/dashboard/write-first-messages.html
@@ -1,4 +1,6 @@
-<h2 class="font-body-lg margin-top-0 margin-bottom-1">Get started</h2>
-<a class="usa-button margin-bottom-5" href="{{ url_for('.choose_template', service_id=current_service.id) }}">
-  Create your first template
-</a>
+<div class="get-started">
+  <h2 class="font-body-lg margin-top-0 margin-bottom-2">Get started</h2>
+  <a class="usa-button" href="{{ url_for('.choose_template', service_id=current_service.id) }}">
+    Create your first template
+  </a>
+</div>
--- a/app/templates/views/notifications/preview.html
+++ b/app/templates/views/notifications/preview.html
@@ -10,7 +10,7 @@
  {% elif help %}
    {{ "Example text message" }}
  {% else %}
-    {{ "Preview" }}
+    {{ "Preview for sending" }}
  {% endif %}
 {% endblock %}

@@ -50,7 +50,7 @@
      {% endcall %}
    </div>
  {% else %}
-    {{ page_header("Example text message" if help else "Preview") }}
+    {{ page_header("Example text message" if help else "Preview for sending") }}
  {% endif %}

  {% if not help %}
--- a/app/templates/views/templates/choose.html
+++ b/app/templates/views/templates/choose.html
@@ -1,4 +1,4 @@
-{% from "components/folder-path.html" import folder_path, page_title_folder_path %}
+{% from "components/folder-path.html" import folder_path %}
 {% from "components/pill.html" import pill %}
 {% from "components/live-search.html" import live_search %}
 {% from "components/form.html" import form_wrapper %}
@@ -8,11 +8,9 @@

 {% extends "withnav_template.html" %}

-{% set page_title = 'Templates' %}
+{% set page_title = 'Select or create a template' %}

-{% block service_page_title %}
-  {{ page_title_folder_path(template_folder_path) }}
-{% endblock %}
+{% block service_page_title %}{{page_title}}{% endblock %}

 {% block maincolumn_content %}

@@ -34,14 +32,11 @@
  {% else %}

    <div class="grid-row flex-column">
+      <h1 class="font-body-2xl line-height-sans-2 margin-bottom-1 margin-top-0">{{page_title}}</h1>
      <div class="{% if current_user.has_permissions('manage_templates') %} grid-col-10 {% else %} grid-col-12 {% endif %}">
-        <div class="usa-alert usa-alert--slim usa-alert--info">
-          <div class="usa-alert__body">
-            <p class="usa-alert__text">
-              Every message starts with a template. To send, choose or create a template.
-            </p>
-          </div>
-        </div>
+        <p class="margin-top-0 margin-bottom-4">
+          Every message starts with a template. To send, choose or create a template.
+        </p>
        {{ folder_path(
          folders=template_folder_path,
          service_id=current_service.id,
--- a/app/templates/views/templates/manage-template-folder.html
+++ b/app/templates/views/templates/manage-template-folder.html
@@ -3,9 +3,9 @@
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/form.html" import form_wrapper %}

-{% block service_page_title %}
-  {{ page_title_folder_path(template_folder_path) }}
-{% endblock %}
+{% set page_title = 'Select or create a template' %}
+
+{% block service_page_title %}{{page_title}}{% endblock %}

 {% block maincolumn_content %}

--- a/app/templates/views/templates/template.html
+++ b/app/templates/views/templates/template.html
@@ -1,13 +1,13 @@
 {% extends "withnav_template.html" %}
 {% from "components/banner.html" import banner_wrapper %}
-{% from "components/folder-path.html" import folder_path, page_title_folder_path %}
+{% from "components/folder-path.html" import folder_path %}
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/copy-to-clipboard.html" import copy_to_clipboard %}
 {% from "components/components/button/macro.njk" import usaButton %}

-{% block service_page_title %}
-  {{ page_title_folder_path(current_service.get_template_path(template._template)) }}
-{% endblock %}
+{% set page_title = 'Confirm your template' %}
+
+{% block service_page_title %}{{page_title}}{% endblock %}

 {% block maincolumn_content %}

@@ -32,8 +32,8 @@
  {% else %}
    <div class="grid-row">
      <div class="grid-col-12">
-        <h1 class="font-body-xl folder-heading margin-top-0">
-          Review your message
+        <h1 class="font-body-2xl line-height-sans-2 folder-heading margin-top-0">
+          {{page_title}}
        </h1>
        {{ folder_path(
          folders=current_service.get_template_path(template._template),
--- a/app/templates/withnav_template.html
+++ b/app/templates/withnav_template.html
@@ -1,12 +1,7 @@
 {% extends "base.html" %}

-{% block per_page_title %}
-  {% if current_org.name %}
-    {% block org_page_title %}{% endblock %} – {{ current_org.name }}
-  {% else %}
-    {% block service_page_title %}{% endblock %} – {{ current_service.name }}
-  {% endif %}
-{% endblock %}
+{% block per_page_title %}{% if current_org.name %}{% block org_page_title %}{% endblock %} – {{ current_org.name }}{%
+  else %}{% block service_page_title %}{% endblock %} – {{ current_service.name }}{% endif %}{% endblock %}

 {% block main %}
  <div class="grid-container">
--- a/tests/app/main/views/test_accept_invite.py
+++ b/tests/app/main/views/test_accept_invite.py
@@ -269,7 +269,7 @@ def test_invite_goes_in_session(
    ("user", "landing_page_title"),
    [
        (create_active_user_with_permissions(), "Dashboard"),
-        (create_active_caseworking_user(), "Templates"),
+        (create_active_caseworking_user(), "Select or create a template"),
    ],
 )
 def test_accepting_invite_removes_invite_from_session(
--- a/tests/app/main/views/test_send.py
+++ b/tests/app/main/views/test_send.py
@@ -1253,7 +1253,7 @@ def test_send_one_off_has_correct_page_title(
        step_index=0,
        _follow_redirects=True,
    )
-    assert page.h1.text.strip() == "Send ‘Two week reminder’"
+    assert page.h1.text.strip() == "Select recipients"

    assert len(page.select(".banner-tour")) == 0

@@ -2712,7 +2712,7 @@ def test_preview_notification_shows_preview(
        template_id=fake_uuid,
        _expected_status=200,
    )
-    assert page.h1.text.strip() == "Preview"
+    assert page.h1.text.strip() == "Preview for sending"
    assert (page.find_all("a", {"class": "usa-back-link"})[0]["href"]) == url_for(
        "main.check_notification",
        service_id=service_one["id"],
--- a/tests/app/main/views/test_template_folders.py
+++ b/tests/app/main/views/test_template_folders.py
@@ -41,8 +41,8 @@ def _folder(name, folder_id=None, parent=None, users_with_permission=None):

@pytest.mark.parametrize(
    (
-        "expected_title_tag",
        "expected_page_title",
+        "expected_title_tag",
        "expected_parent_link_args",
        "extra_args",
        "expected_nav_links",
@@ -53,8 +53,8 @@ def _folder(name, folder_id=None, parent=None, users_with_permission=None):
    ),
    [
        (
-            "Templates – service one – Notify.gov",
-            "Templates",
+            "Select or create a template – service one – Notify.gov",
+            "Select or create a template",
            [],
            {},
            ["Email", "Text message"],
@@ -92,8 +92,8 @@ def _folder(name, folder_id=None, parent=None, users_with_permission=None):
            None,
        ),
        (
-            "Templates – service one – Notify.gov",
-            "Templates",
+            "Select or create a template – service one – Notify.gov",
+            "Select or create a template",
            [],
            {"template_type": "all"},
            ["Email", "Text message"],
@@ -131,8 +131,8 @@ def _folder(name, folder_id=None, parent=None, users_with_permission=None):
            None,
        ),
        (
-            "Templates – service one – Notify.gov",
-            "Templates",
+            "Select or create a template – service one – Notify.gov",
+            "Select or create a template",
            [],
            {"template_type": "sms"},
            ["All", "Email"],
@@ -159,8 +159,8 @@ def _folder(name, folder_id=None, parent=None, users_with_permission=None):
            None,
        ),
        (
-            "folder_one – Templates – service one – Notify.gov",
-            "Templates folder_one",
+            "Select or create a template – service one – Notify.gov",
+            "Select or create a template",
            [{"template_type": "all"}],
            {"template_folder_id": PARENT_FOLDER_ID},
            ["Email", "Text message"],
@@ -182,8 +182,8 @@ def _folder(name, folder_id=None, parent=None, users_with_permission=None):
            None,
        ),
        (
-            "folder_one – Templates – service one – Notify.gov",
-            "Templates folder_one",
+            "Select or create a template – service one – Notify.gov",
+            "Select or create a template",
            [{"template_type": "sms"}],
            {"template_type": "sms", "template_folder_id": PARENT_FOLDER_ID},
            ["All", "Email"],
@@ -199,8 +199,8 @@ def _folder(name, folder_id=None, parent=None, users_with_permission=None):
            None,
        ),
        (
-            "folder_one – Templates – service one – Notify.gov",
-            "Templates folder_one",
+            "Select or create a template – service one – Notify.gov",
+            "Select or create a template",
            [{"template_type": "email"}],
            {"template_type": "email", "template_folder_id": PARENT_FOLDER_ID},
            ["All", "Text message"],
@@ -210,8 +210,8 @@ def _folder(name, folder_id=None, parent=None, users_with_permission=None):
            "There are no email templates in this folder",
        ),
        (
-            "folder_one_one – folder_one – Templates – service one – Notify.gov",
-            "Templates folder_one folder_one_one",
+            "Select or create a template – service one – Notify.gov",
+            "Select or create a template",
            [
                {"template_type": "all"},
                {"template_type": "all", "template_folder_id": PARENT_FOLDER_ID},
@@ -229,8 +229,8 @@ def _folder(name, folder_id=None, parent=None, users_with_permission=None):
            None,
        ),
        (
-            "folder_one_one_one – folder_one_one – folder_one – Templates – service one – Notify.gov",
-            "Templates folder_one folder_one_one folder_one_one_one",
+            "Select or create a template – service one – Notify.gov",
+            "Select or create a template",
            [
                {"template_type": "all"},
                {"template_type": "all", "template_folder_id": PARENT_FOLDER_ID},
@@ -250,8 +250,8 @@ def _folder(name, folder_id=None, parent=None, users_with_permission=None):
            None,
        ),
        (
-            "folder_one_one_one – folder_one_one – folder_one – Templates – service one – Notify.gov",
-            "Templates folder_one folder_one_one folder_one_one_one",
+            "Select or create a template – service one – Notify.gov",
+            "Select or create a template",
            [
                {"template_type": "email"},
                {"template_type": "email", "template_folder_id": PARENT_FOLDER_ID},
@@ -268,8 +268,8 @@ def _folder(name, folder_id=None, parent=None, users_with_permission=None):
            "There are no email templates in this folder",
        ),
        (
-            "folder_two – Templates – service one – Notify.gov",
-            "Templates folder_two",
+            "Select or create a template – service one – Notify.gov",
+            "Select or create a template",
            [{"template_type": "all"}],
            {"template_folder_id": FOLDER_TWO_ID},
            ["Email", "Text message"],
@@ -279,8 +279,8 @@ def _folder(name, folder_id=None, parent=None, users_with_permission=None):
            "This folder is empty",
        ),
        (
-            "folder_two – Templates – service one – Notify.gov",
-            "Templates folder_two",
+            "Select or create a template – service one – Notify.gov",
+            "Select or create a template",
            [{"template_type": "sms"}],
            {"template_folder_id": FOLDER_TWO_ID, "template_type": "sms"},
            ["All", "Email"],
@@ -290,8 +290,8 @@ def _folder(name, folder_id=None, parent=None, users_with_permission=None):
            "This folder is empty",
        ),
        (
-            "folder_two – Templates – service one – Notify.gov",
-            "Templates folder_two",
+            "Select or create a template – service one – Notify.gov",
+            "Select or create a template",
            [{"template_type": "all"}],
            {"template_folder_id": FOLDER_TWO_ID, "template_type": "all"},
            ["Email", "Text message"],
@@ -346,12 +346,13 @@ def test_should_show_templates_folder_page(
        **extra_args,
    )

-    assert normalize_spaces(page.select_one("title").text) == expected_title_tag
-    assert normalize_spaces(page.select_one("h1").text) == expected_page_title
+    assert normalize_spaces(page.select_one("title").text) == expected_page_title
+    assert normalize_spaces(page.select_one("h1").text) == expected_title_tag

-    assert len(page.select("h1 a")) == len(expected_parent_link_args)
+    # remove this line if you don't want the breadcrumb on the first page
+    assert len(page.select("nav#breadcrumb-template-folders a")) == len(expected_parent_link_args)

-    for index, parent_link in enumerate(page.select("h1 a")):
+    for index, parent_link in enumerate(page.select("nav#breadcrumb-template-folders a")):
        assert parent_link["href"] == url_for(
            "main.choose_template",
            service_id=SERVICE_ONE_ID,
@@ -529,7 +530,7 @@ def test_get_manage_folder_page(
        _test_page_title=False,
    )
    assert normalize_spaces(page.select_one("title").text) == (
-        "folder_two – Templates – service one – Notify.gov"
+        "Select or create a template – service one – Notify.gov"
    )
    assert page.select_one("input[name=name]")["value"] == "folder_two"
    delete_link = page.find("a", string="Delete this folder")
@@ -571,7 +572,7 @@ def test_get_manage_folder_viewing_permissions_for_users(
        _test_page_title=False,
    )
    assert normalize_spaces(page.select_one("title").text) == (
-        "folder_two – Templates – service one – Notify.gov"
+        "Select or create a template – service one – Notify.gov"
    )
    form_labels = page.select("legend.usa-legend")
    assert (
@@ -634,7 +635,7 @@ def test_get_manage_folder_viewing_permissions_for_users_not_visible_when_no_man
        _test_page_title=False,
    )
    assert normalize_spaces(page.select_one("title").text) == (
-        "folder_two – Templates – service one – Notify.gov"
+        "Select or create a template – service one – Notify.gov"
    )
    form_labels = page.select("legend[class=form-label]")
    assert len(form_labels) == 0
@@ -671,7 +672,7 @@ def test_get_manage_folder_viewing_permissions_for_users_not_visible_for_service
        _test_page_title=False,
    )
    assert normalize_spaces(page.select_one("title").text) == (
-        "folder_two – Templates – service one – Notify.gov"
+        "Select or create a template – service one – Notify.gov"
    )
    form_labels = page.select("legend[class=form-label]")
    assert len(form_labels) == 0
--- a/tests/app/main/views/test_templates.py
+++ b/tests/app/main/views/test_templates.py
@@ -69,7 +69,7 @@ def test_should_show_empty_page_when_no_templates(
        service_id=service_one["id"],
    )

-    assert normalize_spaces(page.select_one("h1").text) == ("Templates")
+    assert normalize_spaces(page.select_one("h1").text) == ("Select or create a template")
    assert normalize_spaces(page.select_one("main p").text) == (expected_message)
    assert page.select_one("#add_new_folder_form")
    assert page.select_one("#add_new_template_form")
@@ -87,7 +87,7 @@ def test_should_show_add_template_form_if_service_has_folder_permission(
        service_id=service_one["id"],
    )

-    assert normalize_spaces(page.select_one("h1").text) == ("Templates")
+    assert normalize_spaces(page.select_one("h1").text) == ("Select or create a template")
    assert normalize_spaces(page.select_one("main p").text) == (
        "Every message starts with a template. You can change it later. "
        "You need a template before you can send messages."
@@ -110,7 +110,7 @@ def test_should_show_add_template_form_if_service_has_folder_permission(
    [
        (
            create_active_user_view_permissions(),
-            "Templates",
+            "Select or create a template",
            {},
            ["Email", "Text message"],
            [
@@ -122,21 +122,21 @@ def test_should_show_add_template_form_if_service_has_folder_permission(
        ),
        (
            create_active_user_view_permissions(),
-            "Templates",
+            "Select or create a template",
            {"template_type": "sms"},
            ["All", "Email"],
            ["sms_template_one", "sms_template_two"],
        ),
        (
            create_active_user_view_permissions(),
-            "Templates",
+            "Select or create a template",
            {"template_type": "email"},
            ["All", "Text message"],
            ["email_template_one", "email_template_two"],
        ),
        (
            create_active_caseworking_user(),
-            "Templates",
+            "Select or create a template",
            {},
            ["Email", "Text message"],
            [
@@ -148,7 +148,7 @@ def test_should_show_add_template_form_if_service_has_folder_permission(
        ),
        (
            create_active_caseworking_user(),
-            "Templates",
+            "Select or create a template",
            {"template_type": "email"},
            ["All", "Text message"],
            ["email_template_one", "email_template_two"],
@@ -581,9 +581,9 @@ def test_should_be_able_to_view_a_template_with_links(
        _test_page_title=False,
    )

-    assert normalize_spaces(page.select_one("h1").text) == ("Review your message")
+    assert normalize_spaces(page.select_one("h1").text) == ("Confirm your template")
    assert normalize_spaces(page.select_one("title").text) == (
-        "Two week reminder – Templates – service one – Notify.gov"
+        "Confirm your template – service one – Notify.gov"
    )

    assert [