Add a skip link to the preview page

The accessibility audit raised the issue that screen reader users could
miss the table of data on the preview page, because it’s after the
submit/back buttons.

> The back button is before the table of error messages - a screen
> reader user might read the initial error summary then get to the back
> button and not realise the error detail are later in the sequence.

> The send and back buttons are before the table of field values - a
> screen reader user might read the template details ror summary then
> get to the buttons and not realise the field details are later in the
> sequence.

This commit add a skip link to navigate the users directly to the table,
which:
- allows them to skip past a lot of content which they might already
  have read
- makes them aware that the table exists

It’s added:
– as the first thing after the `<h1>` when there are no errors with the
  file
- as the last thing in the error summary when there are errors with the
  file

The link is hidden from those interacting with the site visually.

app/templates/views/check.html

@@ -7,6 +7,13 @@
 {% from "components/list.html" import formatted_list %}
 {% from "components/message-count-label.html" import message_count_label %}
 
+{% set file_contents_header_id = 'file-preview' %}
+{% macro skip_to_file_contents() %}
+  <p class="visually-hidden">
+    <a href="#{{ file_contents_header_id }}">Skip to file contents</a>
+  </p>
+{% endmacro %}
+
 {% block page_title %}
   {{ "Error" if errors else "Preview" }} – GOV.UK Notify
 {% endblock %}
@@ -25,6 +32,7 @@
           {{ "{:,}".format(recipients.max_rows) }} rows at once. Your
           file has {{ "{:,}".format(recipients|length) }} rows.
         </p>
+        {{ skip_to_file_contents() }}
       {% endcall %}
     </div>
 
@@ -42,6 +50,7 @@
             prefix_plural='columns called'
           ) }}.
         </p>
+        {{ skip_to_file_contents() }}
       {% endcall %}
     </div>
 
@@ -68,6 +77,7 @@
             prefix_plural='columns called'
           ) }}.
         </p>
+        {{ skip_to_file_contents() }}
       {% endcall %}
     </div>
 
@@ -95,6 +105,7 @@
             {% endfor %}
           </ul>
         {% endif %}
+        {{ skip_to_file_contents() }}
       {% endcall %}
     </div>
 
@@ -114,6 +125,7 @@
           In <a href="{{ url_for('.trial_mode') }}">trial mode</a> you can only
           send to yourself and members of your team
         </p>
+        {{ skip_to_file_contents() }}
       {% endcall %}
     </div>
 
@@ -124,11 +136,13 @@
     <h1 class="heading-large">
       Preview
     </h1>
+    {{ skip_to_file_contents() }}
 
   {% endif %}
 
   {{ template|string }}
 
+  <div class="bottom-gutter-3-2">
   {% if errors %}
     {% if request.args.from_test %}
       <a href="{{ back_link }}" class="page-footer-back-link">Back</a>
@@ -149,10 +163,14 @@
       <a href="{{ back_link }}" class="page-footer-back-link">Back</a>
     </form>
   {% endif %}
+  </div>
+
+  <h2 class="heading-medium" id="{{ file_contents_header_id }}">{{ original_file_name }}</h2>
 
   {% call(item, row_number) list_table(
     recipients.initial_annotated_rows_with_errors if row_errors and not recipients.missing_column_headers else recipients.initial_annotated_rows,
     caption=original_file_name,
+    caption_visible=False,
     field_headings=['1'] + recipients.column_headers
   ) %}
     {{ index_field(item.index + 2) }}

tests/app/main/views/test_send.py

@@ -841,7 +841,8 @@ def test_check_messages_shows_trial_mode_error(
         page.find('div', class_='banner-dangerous').text.split()
     ) == (
         'You can’t send to this phone number '
-        'In trial mode you can only send to yourself and members of your team'
+        'In trial mode you can only send to yourself and members of your team '
+        'Skip to file contents'
     )
 
 
@@ -878,7 +879,8 @@ def test_check_messages_shows_over_max_row_error(
     ) == (
         'Your file has too many rows '
         'Notify can process up to 11,111 rows at once. '
-        'Your file has 99,999 rows.'
+        'Your file has 99,999 rows. '
+        'Skip to file contents'
     )