mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-09-03 14:08:24 -04:00
3e89baf117
Currently it’s not possible for a screen reader user to know which financial year they’re looking at. From the accessibility report: > The financial year links are contained in a navigation region - > tabbing or arrowing through only reads out the links, not the main > information of "2016 to 2017 financial year" - that information is > vital for understanding the page content. This problem also applies to other pages which use the `pill` component, which is effectively tabbed navigation (that reloads the page rather than showing or hiding content on the page). There are specific ARIA attributes that can be used to mark up a navigation as being tabbed. This commit: - adds those attributes - makes the selected ‘tab’ visible to screenreaders and keyboard focusable - adds a visual focus indicator to the selected tab - adds `id`s to the parts of the page that are controlled by the tabs so that they are labelled as such This also means changing the pill component from being a `<nav>` to a `<ul>` because `tablist` is not a valid `role` for a `nav`. Mostly follows the example here: http://accessibility.athena-ict.com/aria/examples/tabpanel2.shtml
68 lines
1.8 KiB
HTML
68 lines
1.8 KiB
HTML
{% from "components/table.html" import list_table, field, right_aligned_field_heading, row_heading, notification_status_field %}
|
|
{% from "components/page-footer.html" import page_footer %}
|
|
|
|
<div class="ajax-block-container" aria-labelledby='pill-selected-item'>
|
|
{% if job.job_status == 'scheduled' %}
|
|
|
|
<p>
|
|
Sending will start {{ job.scheduled_for|format_datetime_relative }}
|
|
</p>
|
|
<div class="page-footer">
|
|
<form method="post">
|
|
{{ page_footer(
|
|
button_text="Cancel sending",
|
|
destructive=True
|
|
) }}
|
|
</form>
|
|
</div>
|
|
|
|
{% else %}
|
|
|
|
{% if notifications %}
|
|
<div class="dashboard-table">
|
|
{% endif %}
|
|
|
|
{% if not help %}
|
|
{% if percentage_complete < 100 %}
|
|
<p class="bottom-gutter-1-2 hint">
|
|
Report is {{ "{:.0f}%".format(percentage_complete) }} complete…
|
|
</p>
|
|
{% elif notifications %}
|
|
<p class="bottom-gutter">
|
|
<a href="{{ download_link }}" download="download" class="heading-small">Download this report</a>
|
|
 
|
|
<span id="time-left">{{ time_left }}</span>
|
|
</p>
|
|
{% endif %}
|
|
{% endif %}
|
|
|
|
{% call(item, row_number) list_table(
|
|
notifications,
|
|
caption=uploaded_file_name,
|
|
caption_visible=False,
|
|
empty_message="No messages to show",
|
|
field_headings=[
|
|
'Recipient',
|
|
'Status'
|
|
],
|
|
field_headings_visible=False
|
|
) %}
|
|
{% call row_heading() %}
|
|
<p>{{ item.to }}</p>
|
|
{% endcall %}
|
|
{{ notification_status_field(item) }}
|
|
{% endcall %}
|
|
|
|
{% if more_than_one_page %}
|
|
<p class="table-show-more-link">
|
|
Only showing the first 50 rows
|
|
</p>
|
|
{% endif %}
|
|
|
|
{% if notifications %}
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% endif %}
|
|
</div>
|