Change HTML for template list items

Moves the link out of the label and increases
the hit-size for the checkbox. The intention is to
reduce the chance of clicking the wrong thing by
accident.

This includes a TODO in the checkboxes component
template code. The item meta needs to be
associated with the checkbox input by use of
`aria-describedby` but this needs changes in
govuk-frontend-jinja to happen.

app/assets/stylesheets/components/message.scss

@@ -24,13 +24,13 @@
   }
 }
 
-$message-text-left-spacing: 22px;
+$govuk-checkboxes-size: 40px;
+$govuk-checkboxes-label-padding-left-right: govuk-spacing(3);
 $message-type-bottom-spacing: govuk-spacing(4);
 
 .message {
 
   &-name {
-    @include bold-24;
     margin: 0;
 
     a {
@@ -78,6 +78,10 @@ $message-type-bottom-spacing: govuk-spacing(4);
 
   &-item {
 
+    &-with-checkbox {
+      padding-left: $govuk-checkboxes-size + $govuk-checkboxes-label-padding-left-right;
+    }
+
     &-hidden-by-default {
       display: none;
     }
@@ -105,14 +109,12 @@ $message-type-bottom-spacing: govuk-spacing(4);
 
     }
 
-    &-hint,
     &-label {
-      padding-left: $message-text-left-spacing;
-    }
-
-    &-label {
-      padding-top: 0px;
-      padding-bottom: 0px;
+      position: absolute;
+      left: 0;
+      width: $govuk-checkboxes-size + $govuk-checkboxes-label-padding-left-right;
+      height: 100%;
+      padding: 0;
     }
 
     // Fix for GOVUK Frontend selector with high precendence
@@ -121,6 +123,15 @@ $message-type-bottom-spacing: govuk-spacing(4);
       margin-bottom: $message-type-bottom-spacing;
     }
 
+    &-hint {
+      padding-left: 0;
+    }
+
+  }
+
+  &-folder,
+  &-template {
+    @include govuk-font($size: 24, $weight: bold, $line-height: 1.25);
   }
 
   &-folder {

app/templates/forms/fields/checkboxes/template.njk

@@ -78,6 +78,7 @@
     {% set itemDescribedBy = describedBy if not hasFieldset else "" %}
     {% set itemDescribedBy = (itemDescribedBy + " " + itemHintId) | trim %}
     <{{ groupItemElement }} class="govuk-checkboxes__item {%- if item.classes %} {{ item.classes }}{% endif %}">
+      {%- if item.before %}{{ item.before }}{% endif -%}
       <input class="govuk-checkboxes__input" id="{{ id }}" name="{{ name }}" type="checkbox" value="{{ item.value }}"
       {{-" checked" if item.checked }}
       {{-" disabled" if item.disabled }}
@@ -108,6 +109,7 @@
           {{ item.conditional.html | safe }}
         </div>
       {% endif %}
+      {%- if item.after %}{{ item.after }}{% endif -%}
     </{{ groupItemElement }}>
     {% if not params.asList and item.conditional %}
       <div class="govuk-checkboxes__conditional{% if not item.checked %} govuk-checkboxes__conditional--hidden{% endif %}" id="{{ conditionalId }}">

app/templates/views/templates/_template_list.html

@@ -25,7 +25,7 @@
 
     {% for item in template_list %}
 
-      {% set item_label_content %}
+      {% set item_link_content %}
         {% for ancestor in item.ancestors %}
           <a href="{{ url_for('.choose_template', service_id=current_service.id, template_type=template_type, template_folder_id=ancestor.id) }}" class="govuk-link govuk-link--no-visited-state template-list-folder">
             {{- format_item_name(ancestor.name) -}}
@@ -42,26 +42,34 @@
         {% endif %}
       {% endset %}
 
+      {% set label_content %}
+        <span class="govuk-visually-hidden">{{ format_item_name(item.name) }}</span>
+      {% endset %}
+
+      {% set item_meta %}
+        <span id="{{ item.id }}-item-hint" class="govuk-hint govuk-checkboxes__hint template-list-item-hint">
+          {{ item.hint }}
+        </span>
+      {% endset %}
+
       {# create the item config now to include the label content -#}
+      {# TODO: "attributes": { "aria-describedby": item.id ~ "-hint" } needs to be added but govuk-frontend-jinja doesn't currently support this -#}
       {% set checkbox_config = {
-        "html": item_label_content,
+        "html": label_content,
         "label": {
-          "classes": "template-list-item-label govuk-!-font-size-24 govuk-!-font-weight-bold"
+          "classes": "template-list-item-label",
         },
         "id": "templates-or-folder-" ~ item.id,
-        "hint": {
-          "text": item.hint,
-         "classes": "template-list-item-hint"
-        },
-        "classes": "template-list-item {}".format(
-          "template-list-item-hidden-by-default" if item.ancestors else "template-list-item-without-ancestors")
+        "classes": "template-list-item template-list-item-with-checkbox {}".format(
+          "template-list-item-hidden-by-default" if item.ancestors else "template-list-item-without-ancestors"),
+        "after": item_link_content ~ item_meta
       } %}
       {% set _ = checkboxes_data.append(checkbox_config) %}
 
       {% if not current_user.has_permissions('manage_templates') %}
         <div class="template-list-item {%- if item.ancestors %} template-list-item-hidden-by-default {%- else %} template-list-item-without-ancestors{%- endif %}">
           <h2 class="message-name">
-            {{ item_label_content }}
+            {{ item_link_content }}
           </h2>
           <p class="message-type govuk-!-margin-bottom-4">
             {{ item.hint }}