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

2135 - Send Message A11Y Audit - Adjust headers in Send Message flow
GSA · Dec 5, 2024 · 28a6b44 · 28a6b44
2 parents 7b56372 + d684168
commit 28a6b44
Show file tree

Hide file tree

Showing 17 changed files with 101 additions and 90 deletions.
diff --git 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;
+}
diff --git 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"
 
 

diff --git 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>

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

diff --git 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>

diff --git 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>
diff --git 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 @@ <h1 class="usa-sr-only">Dashboard</h1>
 
     {{ 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') }}
 

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

diff --git 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,

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

diff --git 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),

diff --git 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">

diff --git 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(

diff --git 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"],