Files
notifications-admin/app/templates/views/check.html
Chris Hill-Scott 90cb44f332 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.
2017-02-14 11:49:54 +00:00

224 lines
7.4 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
{% extends "withnav_template.html" %}
{% from "components/banner.html" import banner_wrapper %}
{% from "components/radios.html" import radio_select %}
{% from "components/table.html" import list_table, field, text_field, index_field, hidden_field_heading %}
{% from "components/file-upload.html" import file_upload %}
{% from "components/page-footer.html" import page_footer %}
{% 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 %}
{% block maincolumn_content %}
{% if recipients.too_many_rows %}
<div class="bottom-gutter">
{% call banner_wrapper(type='dangerous') %}
<h1 class='banner-title'>
Your file has too many rows
</h1>
<p>
Notify can process up to
{{ "{:,}".format(recipients.max_rows) }} rows at once. Your
file has {{ "{:,}".format(recipients|length) }} rows.
</p>
{{ skip_to_file_contents() }}
{% endcall %}
</div>
{% elif not recipients.has_recipient_columns %}
<div class="bottom-gutter">
{% call banner_wrapper(type='dangerous') %}
<h1 class='banner-title'>
Your file needs to have a column called {{ recipients.recipient_column_header }}
</h1>
<p>
Your file has {{ formatted_list(
recipients.column_headers,
prefix='one column, called',
prefix_plural='columns called'
) }}.
</p>
{{ skip_to_file_contents() }}
{% endcall %}
</div>
{% elif recipients.missing_column_headers %}
<div class="bottom-gutter">
{% call banner_wrapper(type='dangerous') %}
<h1 class='banner-title'>
The columns in your file need to match the double brackets in
your template
</h1>
<p>
Your file has {{ formatted_list(
recipients.column_headers,
prefix='one column, called',
prefix_plural='columns called'
) }}.
</p>
<p>
It doesnt have {{ formatted_list(
recipients.missing_column_headers,
conjunction='or',
prefix='a column called',
prefix_plural='columns called'
) }}.
</p>
{{ skip_to_file_contents() }}
{% endcall %}
</div>
{% elif row_errors %}
<div class="bottom-gutter">
{% call banner_wrapper(type='dangerous') %}
{% if row_errors|length == 1 %}
<h1 class='banner-title'>
There is a problem with your data
</h1>
<p>
You need to {{ row_errors[0] }}
</p>
{% else %}
<h1 class='banner-title'>
There are some problems with your data
</h1>
<p>
You need to:
</p>
<ul class="list-bullet">
{% for error in row_errors %}
<li>{{ error }}</li>
{% endfor %}
</ul>
{% endif %}
{{ skip_to_file_contents() }}
{% endcall %}
</div>
{% elif not recipients.allowed_to_send_to %}
<div class="bottom-gutter">
{% call banner_wrapper(type='dangerous') %}
<h1 class='banner-title'>
You cant send to
{{ 'this' if count_of_recipients == 1 else 'these' }}
{{ recipients.recipient_column_headers[0] }}
{%- if count_of_recipients != 1 -%}
{{ 'es' if 'email address' == recipients.recipient_column_headers[0] else 's' }}
{%- endif %}
</h1>
<p>
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>
{% elif recipients.more_rows_than_can_send %}
{% include "partials/check/too-many-messages.html" %}
{% else %}
<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>
{% else %}
{{file_upload(form.file, button_text='Re-upload your file')}}
{% endif %}
{% else %}
<form method="post" enctype="multipart/form-data" action="{{url_for('main.start_job', service_id=current_service.id, upload_id=upload_id)}}" class='page-footer'>
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
<input type="hidden" name="help" value="{{ '3' if help else 0 }}" />
{% if choose_time_form %}
{{ radio_select(
choose_time_form.scheduled_for,
wrapping_class='bottom-gutter-2-3'
) }}
{% endif %}
<input type="submit" class="button" value="Send {{ count_of_recipients }} {{ message_count_label(count_of_recipients, template.template_type, suffix='') }}" />
<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) }}
{% for column in recipients.column_headers %}
{% if item['columns'][column].error and not recipients.missing_column_headers %}
{% call field() %}
<span class="table-field-error">
<span class="table-field-error-label">{{ item['columns'][column].error }}</span>
{{ item['columns'][column].data if item['columns'][column].data != None }}
</span>
{% endcall %}
{% elif item['columns'][column].ignore %}
{% call field(status='default') %}
{{ item['columns'][column].data if item['columns'][column].data != None }}
{% endcall %}
{% else %}
{% call field() %}
{{ item['columns'][column].data if item['columns'][column].data != None }}
{% endcall %}
{% endif %}
{% endfor %}
{% if item['columns'].get(None) %}
{% for column in item['columns'][None].data %}
{% call field(status='default') %}
{{ column }}
{% endcall %}
{% endfor %}
{% endif %}
{% endcall %}
{% if recipients.too_many_rows %}
<p class="table-show-more-link">
Cant show the contents of this file
</p>
{% elif count_of_displayed_recipients < count_of_recipients %}
<p class="table-show-more-link">
{% if row_errors and not recipients.missing_column_headers %}
Only showing the first {{ count_of_displayed_recipients }} rows with errors
{% else %}
Only showing the first {{ count_of_displayed_recipients }} rows
{% endif %}
</p>
{% elif row_errors and not recipients.missing_column_headers %}
<p class="table-show-more-link">
Only showing rows with errors
</p>
{% endif %}
{% endblock %}