mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-08-29 18:54:47 -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
73 lines
2.1 KiB
HTML
73 lines
2.1 KiB
HTML
{% from "components/big-number.html" import big_number_with_status, big_number %}
|
||
{% from "components/pill.html" import pill %}
|
||
{% from "components/table.html" import list_table, field, hidden_field_heading, right_aligned_field_heading, row_heading %}
|
||
{% from "components/message-count-label.html" import message_count_label %}
|
||
|
||
{% extends "withnav_template.html" %}
|
||
|
||
{% block page_title %}
|
||
Activity breakdown
|
||
{{ selected_year }} to {{ selected_year + 1 }} financial year
|
||
– GOV.UK Notify
|
||
{% endblock %}
|
||
|
||
{% block maincolumn_content %}
|
||
|
||
<h1 class="heading-large">
|
||
Activity breakdown
|
||
</h1>
|
||
<div class="bottom-gutter">
|
||
{{ pill(
|
||
items=years,
|
||
current_value=selected_year,
|
||
big_number_args={'smallest': True},
|
||
) }}
|
||
</div>
|
||
{% if months %}
|
||
<div class="body-copy-table" id='pill-selected-item'>
|
||
{% call(month, row_index) list_table(
|
||
months,
|
||
caption="Total spend",
|
||
caption_visible=False,
|
||
empty_message='',
|
||
field_headings=[
|
||
'Month',
|
||
'Emails',
|
||
'Text messages',
|
||
],
|
||
field_headings_visible=False
|
||
) %}
|
||
{% if not month.future %}
|
||
{% call row_heading() %}
|
||
{{ month.name }}
|
||
{% endcall %}
|
||
{% for counts, template_type in [
|
||
(month.email_counts, 'email'),
|
||
(month.sms_counts, 'sms')
|
||
] %}
|
||
{% call field(align='left') %}
|
||
{{ big_number(
|
||
counts.requested,
|
||
message_count_label(counts.requested, template_type, suffix=''),
|
||
smallest=True,
|
||
) }}
|
||
{% if counts.requested %}
|
||
<span class="{{ 'failure-highlight' if counts.show_warning else '' }}">
|
||
{{ "{:,}".format(counts.failed) }} failed
|
||
</span>
|
||
{% else %}
|
||
–
|
||
{% endif %}
|
||
{% endcall %}
|
||
{% endfor %}
|
||
{% endif %}
|
||
{% endcall %}
|
||
</div>
|
||
{% endif %}
|
||
|
||
<p class="align-with-heading-copy">
|
||
Financial year ends 31 March.
|
||
</p>
|
||
|
||
{% endblock %}
|