mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-02-10 13:23:40 -05:00
c2ef522986
This duplicates how the task list pattern is coded in the GOV.UK Prototype kit[1]. It adds ARIA attributes and the use of a semantically-meaningful element (`<strong>`) to give more information to screen reader users. 1. https://govuk-prototype-kit.herokuapp.com/docs/templates/task-list
17 lines
551 B
HTML
17 lines
551 B
HTML
{% macro task_list_item(completed, label, link) %}
|
|
<li class="task-list-item">
|
|
<span aria-describedby="{{ label|id_safe }}"><a href="{{ link }}">{{ label }}</a></span>
|
|
{% if completed %}
|
|
<strong class="task-list-indicator-completed" id="{{ label|id_safe }}">Completed</strong>
|
|
{% else %}
|
|
<strong class="task-list-indicator-not-completed" id="{{ label|id_safe }}">Not completed</strong>
|
|
{% endif %}
|
|
</li>
|
|
{% endmacro %}
|
|
|
|
{% macro task_list_wrapper() %}
|
|
<ul class="task-list">
|
|
{{ caller() }}
|
|
</ul>
|
|
{% endmacro %}
|