darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-08-24 00:07:02 -04:00
Code Issues Packages Projects Releases Wiki Activity

Mark up ‘pill’ component as being tabs

Browse Source 
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
This commit is contained in:
Chris Hill-Scott
2017-02-14 14:21:36 +00:00
parent 25227d89bd
commit 3e89baf117
9 changed files with 105 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

147
app/templates/views/usage.html
View File

@@ -13,91 +13,92 @@
<h2 class='heading-large'>Usage</h2>
<div class="bottom-gutter">
{{ pill('Year', years, selected_year, big_number_args={'smallest': True}) }}
{{ pill(years, selected_year, big_number_args={'smallest': True}) }}
</div>
<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 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='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 %}
<div class='grid-row'>
<div class='column-half'>
<div class="keyline-block">
&nbsp;
</div>
</div>
<div class='column-half'>
<div class="keyline-block">
{{ big_number(
sms_chargeable,
'at {:.2f} pence per message'.format(sms_rate * 100),
(sms_chargeable * sms_rate),
'spent',
currency="£",
smaller=True
) }}
{% endif %}
</div>
</div>
</div>
</div>
<div class='grid-row'>
<div class='column-half'>
<div class="keyline-block">
&nbsp;
{% 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>
</div>
<div class='column-half'>
<div class="keyline-block">
{{ big_number(
(sms_chargeable * sms_rate),
'spent',
currency="£",
smaller=True
) }}
</div>
</div>
{% endif %}
</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 class="grid-row">
<div class="column-half">
<p class="align-with-heading-copy">