mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-04-02 00:20:02 -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
117 lines
3.6 KiB
HTML
117 lines
3.6 KiB
HTML
{% from "components/big-number.html" import big_number %}
|
||
{% from "components/table.html" import list_table, field, hidden_field_heading, row_heading, text_field %}
|
||
{% from "components/pill.html" import pill %}
|
||
|
||
{% extends "withnav_template.html" %}
|
||
|
||
{% block service_page_title %}
|
||
Usage
|
||
{% endblock %}
|
||
|
||
{% block maincolumn_content %}
|
||
|
||
<h2 class='heading-large'>Usage</h2>
|
||
|
||
<div class="bottom-gutter">
|
||
{{ pill(years, selected_year, big_number_args={'smallest': True}) }}
|
||
</div>
|
||
<div id='pill-selected-item'>
|
||
<div class='grid-row'>
|
||
<div class='column-half'>
|
||
<h2 class='heading-small'>Emails</h2>
|
||
<div class="keyline-block">
|
||
{{ big_number(emails_sent, 'sent', smaller=True) }}
|
||
{{ big_number("Unlimited", 'free allowance', smaller=True) }}
|
||
</div>
|
||
</div>
|
||
<div class='column-half'>
|
||
<h2 class='heading-small'>Text messages</h2>
|
||
<div class="keyline-block">
|
||
{{ big_number(sms_sent, 'sent', smaller=True) }}
|
||
{{ big_number(sms_free_allowance, 'free allowance', smaller=True) }}
|
||
{{ big_number(sms_allowance_remaining, 'free allowance remaining', smaller=True) }}
|
||
{% if sms_chargeable %}
|
||
{{ big_number(
|
||
sms_chargeable,
|
||
'at {:.2f} pence per message'.format(sms_rate * 100),
|
||
smaller=True
|
||
) }}
|
||
{% endif %}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class='grid-row'>
|
||
<div class='column-half'>
|
||
<div class="keyline-block">
|
||
|
||
</div>
|
||
</div>
|
||
<div class='column-half'>
|
||
<div class="keyline-block">
|
||
{{ big_number(
|
||
(sms_chargeable * sms_rate),
|
||
'spent',
|
||
currency="£",
|
||
smaller=True
|
||
) }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{% if months %}
|
||
<div class="dashboard-table body-copy-table">
|
||
{% call(month, row_index) list_table(
|
||
months,
|
||
caption="Total spend",
|
||
caption_visible=False,
|
||
empty_message='',
|
||
field_headings=[
|
||
'By month',
|
||
hidden_field_heading('Cost'),
|
||
],
|
||
field_headings_visible=True
|
||
) %}
|
||
{% call row_heading() %}
|
||
{{ month.name }}
|
||
{% endcall %}
|
||
{% call field(align='left') %}
|
||
{{ big_number(
|
||
sms_rate * month.paid,
|
||
currency="£",
|
||
smallest=True
|
||
) }}
|
||
<ul>
|
||
{% if month.free %}
|
||
<li class="tabular-numbers">{{ "{:,}".format(month.free) }} free text messages</li>
|
||
{% endif %}
|
||
{% if month.paid %}
|
||
<li class="tabular-numbers">{{ "{:,}".format(month.paid) }} text messages at
|
||
{{- ' {:.2f}p'.format(sms_rate * 100) }}</li>
|
||
{% endif %}
|
||
{% if not (month.free or month.paid) %}
|
||
<li aria-hidden="true">–</li>
|
||
{% endif %}
|
||
</ul>
|
||
{% endcall %}
|
||
{% endcall %}
|
||
</div>
|
||
{% endif %}
|
||
</div>
|
||
|
||
<div class="grid-row">
|
||
<div class="column-half">
|
||
<p class="align-with-heading-copy">
|
||
Financial year ends 31 March.
|
||
</p>
|
||
</div>
|
||
<div class="column-half">
|
||
<p class="align-with-heading-copy">
|
||
What counts as 1 text message?<br />
|
||
See <a href="{{ url_for('.pricing') }}">pricing</a>.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
{% endblock %}
|