darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-08-18 13:39:41 -04:00
Code Issues Packages Projects Releases Wiki Activity

Make task list read better for screen readers

Browse Source 
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
This commit is contained in:
Chris Hill-Scott
2018-09-21 14:24:31 +01:00
parent d4b481d55e
commit c2ef522986
4 changed files with 18 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
app/templates/components/task-list.html
View File

@@ -1,10 +1,10 @@
{% macro task_list_item(completed, label) %}
{% macro task_list_item(completed, label, link) %}
<li class="task-list-item">
{{ label }}
<span aria-describedby="{{ label|id_safe }}"><a href="{{ link }}">{{ label }}</a></span>
{% if completed %}
<span class="task-list-indicator-completed">Completed</span>
<strong class="task-list-indicator-completed" id="{{ label|id_safe }}">Completed</strong>
{% else %}
<span class="task-list-indicator-not-completed">Not completed</span>
<strong class="task-list-indicator-not-completed" id="{{ label|id_safe }}">Not completed</strong>
{% endif %}
</li>
{% endmacro %}