From c2ef5229862f3444b4b81a6774ea33d51e1d836a Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Fri, 21 Sep 2018 14:24:31 +0100
Subject: [PATCH] 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                               |  4 ++--
 app/templates/components/task-list.html       |  8 +++----
 .../service-settings/request-to-go-live.html  | 22 +++++++------------
 app/utils.py                                  |  4 ++++
 4 files changed, 18 insertions(+), 20 deletions(-)

diff --git a/app/__init__.py b/app/__init__.py
index 17588188f..38165e16b 100644
--- a/app/__init__.py
+++ b/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 gmt_timezones
+from app.utils import get_cdn_domain, gmt_timezones, id_safe
 
 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)
diff --git a/app/templates/components/task-list.html b/app/templates/components/task-list.html
index 38585ee54..1da18b7a3 100644
--- a/app/templates/components/task-list.html
+++ b/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 %}
diff --git a/app/templates/views/service-settings/request-to-go-live.html b/app/templates/views/service-settings/request-to-go-live.html
index 0b92f1d48..1f1c4e744 100644
--- a/app/templates/views/service-settings/request-to-go-live.html
+++ b/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>
-'.format(
-            url_for('main.manage_users', service_id=current_service.id)
-          )|safe,
+          'Add a team member who can manage settings, team and usage',
+          url_for('main.manage_users', service_id=current_service.id),
         ) }}
         {{ task_list_item(
           current_service.has_templates,
-          '<a href="{}">Add templates with examples of the content you plan to send
-</a>'.format(
-            url_for('main.choose_template', service_id=current_service.id)
-          )|safe,
+          'Add templates with examples of the content you plan to send',
+          url_for('main.choose_template', service_id=current_service.id),
         ) }}
         {% 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(
-              url_for('main.service_email_reply_to', service_id=current_service.id)
-            )|safe,
+            'Add an email reply-to address',
+            url_for('main.service_email_reply_to', service_id=current_service.id),
           ) }}
         {% 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(
-              url_for('main.service_sms_senders', service_id=current_service.id)
-            )|safe
+            'Change your text message sender name',
+            url_for('main.service_sms_senders', service_id=current_service.id),
           ) }}
         {% endif %}
       {% endcall %}
diff --git a/app/utils.py b/app/utils.py
index ec2a0147c..8ddc976ca 100644
--- a/app/utils.py
+++ b/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']