From 90cb44f3326415b5c13afc7adcaab24532c021d2 Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Mon, 13 Feb 2017 15:20:56 +0000
Subject: [PATCH] Add a skip link to the preview page
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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    | 18 ++++++++++++++++++
 tests/app/main/views/test_send.py |  6 ++++--
 2 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/app/templates/views/check.html b/app/templates/views/check.html
index 0a5474c1b..9f24a26ba 100644
--- a/app/templates/views/check.html
+++ b/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) }}
diff --git a/tests/app/main/views/test_send.py b/tests/app/main/views/test_send.py
index d01e8029d..1306b819d 100644
--- a/tests/app/main/views/test_send.py
+++ b/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'
     )