darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-09-09 17:45:32 -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}, big_number_args={'smaller': True},
show_count=True show_count=True
) %} ) %}
<ul role='tablist' class='pill'> <nav aria-labelledby='page-header'>
{% for label, option, link, count in items %} <ul class='pill'>
{% if current_value == option %} {% for label, option, link, count in items %}
<li aria-selected='true' role='tab'> {% if current_value == option %}
<div class='pill-selected-item{% if not show_count %} pill-centered-item{% endif %}' tabindex='0'> <li>
{% else %} <div class='pill-selected-item{% if not show_count %} pill-centered-item{% endif %}' tabindex='0' aria-current='page'>
<li aria-selected='false' role='tab'> {% else %}
<a class="govuk-link govuk-link--no-visited-state" href="{{ link }}"> <li>
{% endif %} <a class="govuk-link govuk-link--no-visited-state" href="{{ link }}">
{% if show_count %}
{{ big_number(count, **big_number_args) }}
{% endif %} {% endif %}
<div class="pill-label{% if not show_count %} pill-centered-item{% endif %}">{{ label }}</div> {% if show_count %}
{% if current_value == option %} {{ big_number(count, **big_number_args) }}
</div> {% endif %}
{% else %} <div class="pill-label{% if not show_count %} pill-centered-item{% endif %}">{{ label }}</div>
</a> {% if current_value == option %}
{% endif %} </div>
</li> {% else %}
{% endfor %} </a>
</ul> {% endif %}
</li>
{% endfor %}
</ul>
</nav>
{% endmacro %} {% endmacro %}