Send Message A11Y Audit - Adjust headers in Send Message flow

app/assets/sass/uswds/_uswds-theme-custom-styles.scss

@@ -265,6 +265,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 +398,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 {

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"
 
 

app/templates/components/folder-path.html

@@ -4,7 +4,7 @@
   template_type,
   current_user,
   link_current_item=False,
-  root_element='h1'
+  root_element='h2'
 ) %}
   <{{ root_element }} class="font-body-lg folder-heading margin-bottom-0"{% if root_element == 'h1' %} id="page-header"{% endif %}>
     {% for folder in folders %}

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>

app/templates/components/service_nav.html

@@ -6,7 +6,7 @@
       <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">
+  <div class="font-body-lg text-bold">
     {{ current_service.name }}
     {% if not current_service.active %}
       <span class="navigation-service-name navigation-service-type--suspended">Suspended</span>

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

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>

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

app/templates/views/templates/choose.html

@@ -34,8 +34,9 @@
   {% else %}
 
     <div class="grid-row flex-column">
+      <h1 class="font-body-2xl line-height-sans-2 margin-bottom-1 margin-top-0">Select or create a template</h2>
       <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 usa-alert--slim usa-alert--info margin-bottom-6">
           <div class="usa-alert__body">
             <p class="usa-alert__text">
               Every message starts with a template. To send, choose or create a template.

app/templates/views/templates/template.html

@@ -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 folder-heading margin-top-0">
+          Confirm your template
         </h1>
         {{ folder_path(
           folders=current_service.get_template_path(template._template),

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