Merge pull request #3700 from alphagov/fix-template-list-item-focus-style

Fix template list item focus style

app/templates/views/templates/_template_list.html

@@ -26,6 +26,10 @@
   <nav id="template-list" class="{{ 'govuk-!-margin-top-1' if (not show_template_nav and not show_search_box) else 'govuk-!-margin-top-6' }}">
     {% set checkboxes_data = [] %}
 
+    {% if not current_user.has_permissions('manage_templates') %}
+    <ul>
+    {% endif %}
+
     {% for item in template_list %}
 
       {% set item_link_content %}
@@ -73,17 +77,19 @@
       {% 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_link_content }}
-          </h2>
-          <p class="message-type govuk-!-margin-bottom-4">
+        <li class="template-list-item {%- if item.ancestors %} template-list-item-hidden-by-default {%- else %} template-list-item-without-ancestors{%- endif %}">
+          {{ item_link_content }}
+          <p class="template-list-item-hint govuk-!-margin-bottom-4">
             {{ item.hint }}
           </p>
-        </div>
+        </li>
       {% endif %}
     {% endfor %}
 
+    {% if not current_user.has_permissions('manage_templates') %}
+    </ul>
+    {% endif %}
+
     {% if current_user.has_permissions('manage_templates') %}
       {{ templates_and_folders_form.templates_and_folders(param_extensions={
         "items": checkboxes_data,

app/templates/views/templates/choose-reply.html

@@ -38,29 +38,29 @@
     {{ live_search(target_selector='#template-list .template-list-item', show=True, form=search_form) }}
 
     <nav id="template-list">
+      <ul>
       {% for item in templates_and_folders %}
-        <div class="template-list-item {% if item.ancestors %}template-list-item-hidden-by-default{% endif %} {% if not item.ancestors %}template-list-item-without-ancestors{% endif %}">
-          <h2 class="message-name">
-            {% for ancestor in item.ancestors %}
-                <a href="{{ url_for('.conversation_reply', service_id=current_service.id, notification_id=notification_id, from_folder=ancestor.id) }}" class="govuk-link govuk-link--no-visited-state template-list-folder">
-                {{ ancestor.name }}
-              </a> <span class="message-name-separator">/</span>
-            {% endfor %}
-            {% if item.is_folder %}
-              <a href="{{ url_for('.conversation_reply', service_id=current_service.id, notification_id=notification_id, from_folder=item.id) }}" class="govuk-link govuk-link--no-visited-state template-list-folder">
-                <span class="live-search-relevant">{{ item.name }}</span>
-              </a>
-            {% else %}
-              <a class="govuk-link govuk-link--no-visited-state" href="{{ url_for('.conversation_reply_with_template', service_id=current_service.id, template_id=item.id, notification_id=notification_id) }}">
-                <span class="live-search-relevant">{{ item.name }}</span>
-              </a>
-            {% endif %}
-          </h2>
-          <p class="message-type">
+        <li class="template-list-item {% if item.ancestors %}template-list-item-hidden-by-default{% endif %} {% if not item.ancestors %}template-list-item-without-ancestors{% endif %}">
+          {% for ancestor in item.ancestors %}
+              <a href="{{ url_for('.conversation_reply', service_id=current_service.id, notification_id=notification_id, from_folder=ancestor.id) }}" class="govuk-link govuk-link--no-visited-state template-list-folder">
+              {{ ancestor.name }}
+            </a> <span class="message-name-separator"></span>
+          {% endfor %}
+          {% if item.is_folder %}
+            <a href="{{ url_for('.conversation_reply', service_id=current_service.id, notification_id=notification_id, from_folder=item.id) }}" class="govuk-link govuk-link--no-visited-state template-list-folder">
+              <span class="live-search-relevant">{{ item.name }}</span>
+            </a>
+          {% else %}
+            <a class="govuk-link govuk-link--no-visited-state template-list-template" href="{{ url_for('.conversation_reply_with_template', service_id=current_service.id, template_id=item.id, notification_id=notification_id) }}">
+              <span class="live-search-relevant">{{ item.name }}</span>
+            </a>
+          {% endif %}
+          <p class="template-list-item-hint govuk-hint">
             {{ item.hint }}
           </p>
-        </div>
+        </li>
       {% endfor %}
+      </ul>
     </nav>
 
 

app/templates/views/templates/copy.html

@@ -26,37 +26,37 @@
         autofocus=True
       ) }}
       <nav id="template-list">
+        <ul>
         {% for item in services_templates_and_folders %}
-          <div class="template-list-item {% if item.ancestors %}template-list-item-hidden-by-default{% endif %} {% if not item.ancestors %}template-list-item-without-ancestors{% endif %}">
-            <h2 class="message-name">
-              {% for ancestor in item.ancestors %}
-                {% if ancestor.is_service %}
-                  <a href="{{ url_for('.choose_template_to_copy', service_id=current_service.id, from_service=ancestor.service_id) }}" class="govuk-link govuk-link--no-visited-state template-list-folder">
-                {% else %}
-                  <a href="{{ url_for('.choose_template_to_copy', service_id=current_service.id, from_folder=ancestor.id) }}" class="govuk-link govuk-link--no-visited-state template-list-folder">
-                {% endif %}
-                  {{ ancestor.name }}
-                </a> <span class="message-name-separator"></span>
-              {% endfor %}
-              {% if item.is_service %}
-                <a href="{{ url_for('.choose_template_to_copy', service_id=current_service.id, from_service=item.service_id) }}" class="govuk-link govuk-link--no-visited-state template-list-folder">
-                  <span class="live-search-relevant">{{ item.name }}</span>
-                </a>
-              {% elif item.is_folder %}
-                <a href="{{ url_for('.choose_template_to_copy', service_id=current_service.id, from_service=item.service_id, from_folder=item.id) }}" class="govuk-link govuk-link--no-visited-state template-list-folder">
-                  <span class="live-search-relevant">{{ item.name }}</span>
-                </a>
+          <li class="template-list-item {% if item.ancestors %}template-list-item-hidden-by-default{% endif %} {% if not item.ancestors %}template-list-item-without-ancestors{% endif %}">
+            {% for ancestor in item.ancestors %}
+              {% if ancestor.is_service %}
+                <a href="{{ url_for('.choose_template_to_copy', service_id=current_service.id, from_service=ancestor.service_id) }}" class="govuk-link govuk-link--no-visited-state template-list-folder">
               {% else %}
-                <a class="govuk-link govuk-link--no-visited-state" href="{{ url_for('.copy_template', service_id=current_service.id, template_id=item.id, from_service=item.service_id) }}">
-                  <span class="live-search-relevant">{{ item.name }}</span>
-                </a>
+                <a href="{{ url_for('.choose_template_to_copy', service_id=current_service.id, from_folder=ancestor.id) }}" class="govuk-link govuk-link--no-visited-state template-list-folder">
               {% endif %}
-            </h2>
-            <p class="message-type">
+                {{ ancestor.name }}
+              </a> <span class="message-name-separator"></span>
+            {% endfor %}
+            {% if item.is_service %}
+              <a href="{{ url_for('.choose_template_to_copy', service_id=current_service.id, from_service=item.service_id) }}" class="govuk-link govuk-link--no-visited-state template-list-folder">
+                <span class="live-search-relevant">{{ item.name }}</span>
+              </a>
+            {% elif item.is_folder %}
+              <a href="{{ url_for('.choose_template_to_copy', service_id=current_service.id, from_service=item.service_id, from_folder=item.id) }}" class="govuk-link govuk-link--no-visited-state template-list-folder">
+                <span class="live-search-relevant">{{ item.name }}</span>
+              </a>
+            {% else %}
+              <a class="govuk-link govuk-link--no-visited-state template-list-template" href="{{ url_for('.copy_template', service_id=current_service.id, template_id=item.id, from_service=item.service_id) }}">
+                <span class="live-search-relevant">{{ item.name }}</span>
+              </a>
+            {% endif %}
+            <p class="template-list-item-hint govuk-hint">
               {{ item.hint }}
             </p>
-          </div>
+          </li>
         {% endfor %}
+        </ul>
       </nav>
     {% endif %}