Add aria-describedby to template links (#1794)

* Add aria-describedby to template links

- Screen readers should now read the template name, as well as the template type when selecting either the checkbox for the template, or the link to the template

* Update aria-describedby value to conform to a11y requirements

* Quick fix

* Prefix describedby id with sr- instead of item.name

app/templates/views/templates/_template_list.html

@@ -45,17 +45,18 @@
               {{- format_item_name(ancestor.name) -}}
             </a> <span class="message-name-separator"></span>
           {% endfor %}
+          {# TODO: Add Cypress test to ensure describedby is present and properly associated with the link #}
           {% if item.is_folder %}
-            <a href="{{ url_for('.choose_template', service_id=current_service.id, template_type=template_type, template_folder_id=item.id, view='sending' if sending_view else None) }}" class="template-list-folder">
+            <a href="{{ url_for('.choose_template', service_id=current_service.id, template_type=template_type, template_folder_id=item.id, view='sending' if sending_view else None) }}" aria-describedby="sr-{{ item.id }}" class="template-list-folder">
               <span class="live-search-relevant">{{ format_item_name(item.name) }}</span>
             </a>
           {% else %}
-            <a href="{{ url_for('.view_template', service_id=current_service.id, template_id=item.id) }}" class="template-list-template">
+            <a href="{{ url_for('.view_template', service_id=current_service.id, template_id=item.id) }}" aria-describedby="sr-{{ item.id }}" class="template-list-template">
               <span class="live-search-relevant">{{ format_item_name(item.name) }}</span>
             </a>
           {% endif %}
         </p>
-        <p class="message-type">
+        <p id="sr-{{ item.id }}" class="message-type">
           {{ _(item.hint) }}
         </p>
       </div>