Make task list read better for screen readers

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

app/__init__.py

@@ -67,8 +67,7 @@ from app.notify_client.billing_api_client import BillingAPIClient
 from app.notify_client.complaint_api_client import ComplaintApiClient
 from app.notify_client.platform_stats_api_client import PlatformStatsAPIClient
 from app.commands import setup_commands
-from app.utils import get_cdn_domain
+from app.utils import get_cdn_domain, gmt_timezones, id_safe
-from app.utils import gmt_timezones
 
 login_manager = LoginManager()
 csrf = CSRFProtect()
@@ -664,5 +663,6 @@ def add_template_filters(application):
         formatted_list,
         nl2br,
         format_phone_number_human_readable,
+        id_safe,
     ]:
         application.add_template_filter(fn)

app/templates/components/task-list.html

@@ -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 %}

app/templates/views/service-settings/request-to-go-live.html

@@ -17,32 +17,26 @@
       {% call task_list_wrapper() %}
         {{ task_list_item(
           current_service.has_team_members,
-          '<a href="{}">Add a team member who can manage settings, team and usage</a>
+          'Add a team member who can manage settings, team and usage',
-'.format(
+          url_for('main.manage_users', service_id=current_service.id),
-            url_for('main.manage_users', service_id=current_service.id)
-          )|safe,
         ) }}
         {{ task_list_item(
           current_service.has_templates,
-          '<a href="{}">Add templates with examples of the content you plan to send
+          'Add templates with examples of the content you plan to send',
-</a>'.format(
+          url_for('main.choose_template', service_id=current_service.id),
-            url_for('main.choose_template', service_id=current_service.id)
-          )|safe,
         ) }}
         {% if current_service.has_email_templates %}
           {{ task_list_item(
             current_service.has_email_reply_to_address,
-            '<a href="{}">Add an email reply-to address</a>'.format(
+            'Add an email reply-to address',
-              url_for('main.service_email_reply_to', service_id=current_service.id)
+            url_for('main.service_email_reply_to', service_id=current_service.id),
-            )|safe,
           ) }}
         {% endif %}
         {% if current_service.has_sms_templates and current_service.shouldnt_use_govuk_as_sms_sender %}
           {{ task_list_item(
             not current_service.sms_sender_is_govuk,
-            '<a href="{}">Change your text message sender name</a>'.format(
+            'Change your text message sender name',
-              url_for('main.service_sms_senders', service_id=current_service.id)
+            url_for('main.service_sms_senders', service_id=current_service.id),
-            )|safe
           ) }}
         {% endif %}
       {% endcall %}

app/utils.py

@@ -206,6 +206,10 @@ def email_safe(string, whitespace='.'):
     return string.strip('.')
 
 
+def id_safe(string):
+    return email_safe(string, whitespace='-')
+
+
 class Spreadsheet():
 
     allowed_file_extensions = ['csv', 'xlsx', 'xls', 'ods', 'xlsm', 'tsv']