mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-02-17 17:04:55 -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
9 lines
152 B
HTML
9 lines
152 B
HTML
{% from "components/pill.html" import pill %}
|
|
|
|
<div class='bottom-gutter ajax-block-container'>
|
|
{{ pill(
|
|
status_filters,
|
|
status
|
|
) }}
|
|
</div>
|