darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-08-23 07:46:23 -04:00
Code Issues Packages Projects Releases Wiki Activity

Change HTML for template list items

Browse Source 
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.
This commit is contained in:
Tom Byers
2020-05-26 14:51:16 +01:00
parent 05088037d2
commit a99622aec5
3 changed files with 40 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/templates/forms/fields/checkboxes/template.njk
View File

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

28
app/templates/views/templates/_template_list.html
View File

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