Merge pull request #3624 from alphagov/add-accessible-letter-specification

Add accessible letter specification

app/main/views/index.py

@@ -386,6 +386,14 @@ def upload_a_letter():
     )
 
 
+@main.route('/using-notify/guidance/letter-specification')
+def letter_specification():
+    return render_template(
+        'views/guidance/letter-specification.html',
+        navigation_links=using_notify_nav(),
+    )
+
+
 # --- Redirects --- #
 
 @main.route('/roadmap', endpoint='old_roadmap')

app/main/views/sub_navigation_dictionaries.py

@@ -84,6 +84,10 @@ def using_notify_nav():
                     "name": "Upload a letter",
                     "link": "main.upload_a_letter",
                 },
+                {
+                    "name": "Letter specification",
+                    "link": "main.letter_specification",
+                },
             ]
         },
         {

app/navigation.py

@@ -208,6 +208,7 @@ class HeaderNavigation(Navigation):
         'edit_and_format_messages',
         'send_files_by_email',
         'upload_a_letter',
+        'letter_specification',
         'history',
         'inbound_sms_admin',
         'inbox',
@@ -585,6 +586,7 @@ class MainNavigation(Navigation):
         'edit_and_format_messages',
         'send_files_by_email',
         'upload_a_letter',
+        'letter_specification',
         'history',
         'how_to_pay',
         'inbound_sms_admin',
@@ -840,6 +842,7 @@ class CaseworkNavigation(Navigation):
         'edit_and_format_messages',
         'send_files_by_email',
         'upload_a_letter',
+        'letter_specification',
         'history',
         'how_to_pay',
         'inbound_sms_admin',
@@ -1153,6 +1156,7 @@ class OrgNavigation(Navigation):
         'edit_and_format_messages',
         'send_files_by_email',
         'upload_a_letter',
+        'letter_specification',
         'history',
         'how_to_pay',
         'inbound_sms_admin',

app/templates/views/guidance/letter-specification.html

@@ -0,0 +1,57 @@
+{% extends "content_template.html" %}
+{% from "components/service-link.html" import service_link %}
+
+{% block per_page_title %}
+  Letter specification
+{% endblock %}
+
+{% block content_column_content %}
+
+  <h1 class="heading-large">Letter specification</h1>
+
+  <p class="govuk-body">Page size and layout: A4 portrait (210 × 297 mm)</p>
+  <p class="govuk-body">Maximum file size: 2 MB</p>
+  <p class="govuk-body">Your letter must 10 pages or less (5 double-sided sheets of paper).</p>
+  <p class="govuk-body">The content of your letter must appear inside the printable area.</p>
+
+  <p class="govuk-body">To help you set up your letter, you can download our <a class="govuk-link govuk-link--no-visited-state" href="{{ url_for('.letter_spec') }}">letter specification as a PDF</a>.</p>
+
+  <details class="govuk-details" data-module="govuk-details">
+  <summary class="govuk-details__summary">
+    <span class="govuk-details__summary-text">
+      See a text version of the letter specification
+    </span>
+  </summary>
+  <div class="govuk-details__text">
+  <h2 class="heading-medium">Page 1 of 10</h2>
+
+  <p class="govuk-body">Left margin 15mm</p>
+  <p class="govuk-body">Right margin 15mm</p>
+  <p class="govuk-body">Top margin 5mm</p>
+  <p class="govuk-body">Bottom margin 5mm</p>
+
+  <h3 class="heading-small">Logo block</h3>
+
+  <p class="govuk-body">Position: 15mm from left edge, 5mm from top edge</p>
+  <p class="govuk-body">Size: 200mm wide by 25mm high</p>
+
+  <h3 class="heading-small">Address block</h3>
+
+  <p class="govuk-body">Position: 39.5mm from left edge, 24.6mm from top edge</p>
+  <p class="govuk-body">Size: 95.4mm wide by 26.8mm high</p>
+
+  <h3 class="heading-small">Letter contact block</h3>
+
+  <p class="govuk-body">Position: 125mm from left edge, 30mm from top edge</p>
+  <p class="govuk-body">Size: 65mm wide by 65mm high</p>
+
+  <h2 class="heading-medium">Pages 2 to 10</h2>
+
+  <p class="govuk-body">Left margin 15mm</p>
+  <p class="govuk-body">Right margin 15mm</p>
+  <p class="govuk-body">Top margin 5mm</p>
+  <p class="govuk-body">Bottom margin 5mm</p>
+  </div>
+</details>
+
+{% endblock %}

app/templates/views/guidance/upload-a-letter.html

@@ -20,19 +20,6 @@
     <li>Select <b class="govuk-!-font-weight-bold">Choose file</b>.</li>
   </ol>
 
-  <h2 class="heading-medium" id="letter-specification">Your file must meet our letter specification</h2>
-
-  <p class="govuk-body">The content of your letter must appear inside the printable area.</p>
-
-  <p class="govuk-body">Your file must be:</p>
-
-  <ul class="list list-bullet">
-    <li>a PDF</li>
-    <li>A4 portrait size (210 × 297 mm)</li>
-    <li>10 pages or less (5 double-sided sheets of paper)</li>
-    <li>smaller than 2MB</li>
-  </ul>
-
-  <p class="govuk-body">To help you set up your letter, you can download our <a class="govuk-link govuk-link--no-visited-state" href="{{ url_for('.letter_spec') }}">letter specification document (PDF)</a>.</p>
+  <p class="govuk-body">Your file must meet our <a class="govuk-link" href="{{ url_for('main.letter_specification') }}">letter specification</a>.</p>
 
 {% endblock %}

app/templates/views/uploads/choose-file.html

@@ -35,20 +35,7 @@
     )}}
   </p>
 
-  <h2 class="heading-medium">Your file must meet our letter specification</h2>
-
-  <p class="govuk-body">The content of your letter must appear inside the printable area.</p>
-
-  <p class="govuk-body">Your file must be:</p>
-
-    <ul class="list list-bullet">
-      <li>a PDF</li>
-      <li>A4 portrait size (210 × 297 mm)</li>
-      <li>10 pages or less (5 double-sided sheets of paper)</li>
-      <li>smaller than 2MB</li>
-    </ul>
-
-  <p class="govuk-body">To help you set up your letter, you can download our <a class="govuk-link govuk-link--no-visited-state" href="{{ url_for('.letter_spec') }}">letter specification document (PDF)</a>.</p>
+    <p class="govuk-body">Your file must meet our <a class="govuk-link" href="{{ url_for('main.letter_specification') }}">letter specification</a>.</p>
   </div>
 </div>
 {% endblock %}

app/utils.py

@@ -631,7 +631,7 @@ LETTER_VALIDATION_MESSAGES = {
         'summary': (
             'Validation failed because {invalid_pages} {invalid_pages_are_or_is} not A4 portrait size.<br>'
             'Files must meet our '
-            '<a class="govuk-link govuk-link--no-visited-state" href="{letter_spec}" target="_blank">'
+            '<a class="govuk-link govuk-link--no-visited-state" href="{letter_spec_guidance}">'
             'letter specification'
             '</a>.'
         ),
@@ -641,14 +641,14 @@ LETTER_VALIDATION_MESSAGES = {
         'detail': (
             'You need to edit {invalid_pages}.<br>'
             'Files must meet our '
-            '<a class="govuk-link govuk-link--destructive" href="{letter_spec_guidance}" target="_blank">'
+            '<a class="govuk-link govuk-link--destructive" href="{letter_spec_guidance}">'
             'letter specification'
             '</a>.'
         ),
         'summary': (
             'Validation failed because content is outside the printable area on {invalid_pages}.<br>'
             'Files must meet our '
-            '<a class="govuk-link govuk-link--no-visited-state" href="{letter_spec}" target="_blank">'
+            '<a class="govuk-link govuk-link--no-visited-state" href="{letter_spec_guidance}" target="_blank">'
             'letter specification'
             '</a>.'
         ),
@@ -690,7 +690,7 @@ LETTER_VALIDATION_MESSAGES = {
         'summary': (
             'Validation failed because the address block is empty.<br>'
             'Files must meet our '
-            '<a class="govuk-link govuk-link--no-visited-state" href="{letter_spec}" target="_blank">'
+            '<a class="govuk-link govuk-link--no-visited-state" href="{letter_spec_guidance}" target="_blank">'
             'letter specification'
             '</a>.'
         ),
@@ -792,13 +792,13 @@ def get_letter_validation_error(validation_message, invalid_pages=None, page_cou
             invalid_pages=invalid_pages,
             invalid_pages_are_or_is=invalid_pages_are_or_is,
             page_count=page_count,
-            letter_spec_guidance=url_for('.upload_a_letter')
+            letter_spec_guidance=url_for('.letter_specification')
         ),
         'summary': LETTER_VALIDATION_MESSAGES[validation_message]['summary'].format(
             invalid_pages=invalid_pages,
             invalid_pages_are_or_is=invalid_pages_are_or_is,
             page_count=page_count,
-            letter_spec=url_for('.letter_spec'),
+            letter_spec_guidance=url_for('.letter_specification'),
         ),
     }
 

tests/app/test_utils.py

@@ -587,13 +587,11 @@ def test_get_letter_validation_error_for_known_errors(
 
     assert detail.text == expected_content
     if detail.select_one('a'):
-        assert detail.select_one('a')['href'] == url_for('.upload_a_letter')
-        assert detail.select_one('a')['target'] == '_blank'
+        assert detail.select_one('a')['href'] == url_for('.letter_specification')
 
     assert summary.text == expected_summary
     if summary.select_one('a'):
-        assert summary.select_one('a')['href'] == url_for('.letter_spec')
-        assert summary.select_one('a')['target'] == '_blank'
+        assert summary.select_one('a')['href'] == url_for('.letter_specification')
 
 
 @pytest.mark.parametrize("date_from_db, expected_result", [