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

Change pills from tabs to navigation

Browse Source 
Changes the HTML to do the following:
- remove all tabs semantics
- give the list a role of navigation
- label the navigation with the h1
- mark the selected item with aria-current
This commit is contained in:
Tom Byers
2020-09-03 16:05:08 +01:00
parent 3bebb1fbfd
commit 9598d3a97b
1 changed files with 22 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
app/templates/components/pill.html
View File

@@ -6,25 +6,27 @@
big_number_args={'smaller': True},
show_count=True
) %}
<ul role='tablist' class='pill'>
{% for label, option, link, count in items %}
{% if current_value == option %}
<li aria-selected='true' role='tab'>
<div class='pill-selected-item{% if not show_count %} pill-centered-item{% endif %}' tabindex='0'>
{% else %}
<li aria-selected='false' role='tab'>
<a class="govuk-link govuk-link--no-visited-state" href="{{ link }}">
{% endif %}
{% if show_count %}
{{ big_number(count, **big_number_args) }}
<nav aria-labelledby='page-header'>
<ul class='pill'>
{% for label, option, link, count in items %}
{% if current_value == option %}
<li>
<div class='pill-selected-item{% if not show_count %} pill-centered-item{% endif %}' tabindex='0' aria-current='page'>
{% else %}
<li>
<a class="govuk-link govuk-link--no-visited-state" href="{{ link }}">
{% endif %}
<div class="pill-label{% if not show_count %} pill-centered-item{% endif %}">{{ label }}</div>
{% if current_value == option %}
</div>
{% else %}
</a>
{% endif %}
</li>
{% endfor %}
</ul>
{% if show_count %}
{{ big_number(count, **big_number_args) }}
{% endif %}
<div class="pill-label{% if not show_count %} pill-centered-item{% endif %}">{{ label }}</div>
{% if current_value == option %}
</div>
{% else %}
</a>
{% endif %}
</li>
{% endfor %}
</ul>
</nav>
{% endmacro %}