mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-03-01 06:40:54 -05: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
43 lines
1.4 KiB
HTML
43 lines
1.4 KiB
HTML
{% from "components/page-footer.html" import page_footer %}
|
|
{% from "components/previous-next-navigation.html" import previous_next_navigation %}
|
|
{% from "components/table.html" import list_table, field, text_field, link_field, right_aligned_field_heading, hidden_field_heading, row_heading, notification_status_field %}
|
|
|
|
<div class="ajax-block-container" id='pill-selected-item'>
|
|
|
|
{% if notifications %}
|
|
<div class='dashboard-table'>
|
|
{% endif %}
|
|
{% call(item, row_number) list_table(
|
|
notifications,
|
|
caption="Recent activity",
|
|
caption_visible=False,
|
|
empty_message='No messages found',
|
|
field_headings=['Recipient', 'Status'],
|
|
field_headings_visible=False
|
|
) %}
|
|
|
|
{% call row_heading() %}
|
|
<p>
|
|
{{ item.to }}
|
|
</p>
|
|
<p class="hint">
|
|
{% if item.job %}
|
|
From <a href="{{ url_for(".view_job", service_id=current_service.id, job_id=item.job.id) }}">{{ item.job.original_file_name }}</a>
|
|
{% else %}
|
|
<a href="{{ url_for('.view_template_version', service_id=current_service.id, template_id=item.template.id, version=item.template_version) }}">{{ item.template.name }}</a>
|
|
from an API call
|
|
{% endif %}
|
|
</p>
|
|
{% endcall %}
|
|
|
|
{{ notification_status_field(item) }}
|
|
|
|
{% endcall %}
|
|
{% if notifications %}
|
|
</div>
|
|
{% endif %}
|
|
|
|
{{ previous_next_navigation(prev_page, next_page) }}
|
|
|
|
</div>
|