diff --git a/govuk_frontend_jinja/templates/components/button/macro.html b/govuk_frontend_jinja/templates/components/button/macro.html
index 1680c2e3..12842b83 100644
--- a/govuk_frontend_jinja/templates/components/button/macro.html
+++ b/govuk_frontend_jinja/templates/components/button/macro.html
@@ -1,13 +1,15 @@
{% macro govukButton(params) %}
-{# Set classes for this component #}
+{% from "govuk_frontend_jinja/macros/attributes.html" import govukAttributes %}
+
+{#- Set classes for this component #}
{%- set classNames = "govuk-button" -%}
{%- if params.classes %}
- {% set classNames = classNames + " " + params.classes %}
+ {% set classNames = classNames ~ " " ~ params.classes %}
{% endif %}
{%- if params.isStartButton %}
- {% set classNames = classNames + " govuk-button--start" %}
+ {% set classNames = classNames ~ " govuk-button--start" %}
{% endif %}
{#- Determine type of element to use, if not explicitly set #}
@@ -32,7 +34,7 @@
{#- Define common attributes that we can use across all element types #}
-{%- set commonAttributes %} class="{{ classNames }}" data-module="govuk-button" {%- for attribute, value in (params.attributes.items() if params.attributes else {}.items()) %} {{ attribute }}="{{ value }}"{% endfor %}{% if params.id %} id="{{ params.id }}"{% endif %}{% endset %}
+{%- set commonAttributes %} class="{{ classNames }}" data-module="govuk-button" {{- govukAttributes(params.attributes) -}} {% if params.id %} id="{{ params.id }}"{% endif %}{% endset %}
{#- Define common attributes we can use for both button and input types #}
diff --git a/govuk_frontend_jinja/templates/components/character-count/macro.html b/govuk_frontend_jinja/templates/components/character-count/macro.html
index 23e1a8d3..e58f5907 100644
--- a/govuk_frontend_jinja/templates/components/character-count/macro.html
+++ b/govuk_frontend_jinja/templates/components/character-count/macro.html
@@ -1,14 +1,47 @@
{% macro govukCharacterCount(params) %}
+{% from "govuk_frontend_jinja/macros/attributes.html" import govukAttributes %}
{% from "govuk_frontend_jinja/macros/i18n.html" import govukI18nAttributes %}
{% from "govuk_frontend_jinja/components/textarea/macro.html" import govukTextarea %}
{% from "govuk_frontend_jinja/components/hint/macro.html" import govukHint %}
+{#-
+ If the limit is set in JavaScript, we won't be able to interpolate the message
+ until JavaScript, so we only set a text if the `maxlength` or `maxwords` options
+ were provided to the macro.
+#}
{%- set hasNoLimit = (not params.maxwords and not params.maxlength) -%}
+{%- set textareaDescriptionLength = params.maxwords or params.maxlength -%}
+{%- set textareaDescriptionText = params.textareaDescriptionText or 'You can enter up to %{count} ' ~ ('words' if params.maxwords else 'characters') -%}
+{%- set textareaDescriptionTextNoLimit = textareaDescriptionText | replace('%{count}', textareaDescriptionLength) if not hasNoLimit -%}
+
+{%- set countMessageHtml %}
+{{ govukHint({
+ 'text': textareaDescriptionTextNoLimit,
+ 'id': params.id ~ '-info',
+ 'classes': 'govuk-character-count__message' ~ (' ' ~ params.countMessage.classes if params.countMessage and params.countMessage.classes)
+}) | trim }}
+{% if params.formGroup and params.formGroup.afterInput %}
+ {{- params.formGroup.afterInput.html | safe | trim if params.formGroup and params.formGroup.afterInput.html else params.formGroup.afterInput.text }}
+{% endif -%}
+{% endset -%}
+
+{%- set attributesHtml %}
+ {{- govukAttributes({
+ "data-module": "govuk-character-count",
+ "data-maxlength": {
+ 'value': params.maxlength,
+ 'optional': true
+ },
+ "data-threshold": {
+ 'value': params.threshold,
+ 'optional': true
+ },
+ "data-maxwords": {
+ 'value': params.maxwords,
+ 'optional': true
+ }
+ }) -}}
-
- {{ govukTextarea({
- 'id': params.id,
- 'name': params.name,
- 'describedBy': params.id + '-info',
- 'rows': params.rows,
- 'spellcheck': params.spellcheck,
- 'value': params.value,
- 'formGroup': params.formGroup,
- 'classes': 'govuk-js-character-count' + (' ' + params.classes if params.classes else ''),
- 'label': {
- 'html': params.label.html,
- 'text': params.label.text,
- 'classes': params.label.classes,
- 'isPageHeading': params.label.isPageHeading,
- 'attributes': params.label.attributes,
- 'for': params.id
- },
- 'hint': params.hint,
- 'errorMessage': params.errorMessage,
- 'attributes': params.attributes
- }) }}
+ }) -}}
+{% endset -%}
- {%- set textareaDescriptionLength = params.maxwords or params.maxlength %}
- {%- set textareaDescriptionText = params.textareaDescriptionText or 'You can enter up to %{count} ' + ('words' if params.maxwords else 'characters') %}
- {#-
- If the limit is set in JavaScript, we won't be able to interpolate the message
- until JavaScript, so we only set a text if the `maxlength` or `maxwords` options
- were provided to the macro.
- #}
- {{ govukHint({
- 'text': ((textareaDescriptionText) | replace('%{count}', textareaDescriptionLength) if not hasNoLimit),
- 'id': params.id + '-info',
- 'classes': 'govuk-character-count__message' + (' ' + params.countMessage.classes if params.countMessage and params.countMessage.classes else '')
- }) | trim | indent(2) }}
-
+{#- Append form group attributes onto attributes set above #}
+{%- if params.formGroup -%}
+ {%- for name, value in params.formGroup.attributes if params.formGroup %}
+ {% set attributesHtml = attributesHtml ~ " " ~ name | escape ~ '="' ~ value | escape ~ '"' %}
+ {% endfor -%}
+{%- endif -%}
+
+{{ govukTextarea({
+ 'id': params.id,
+ 'name': params.name,
+ 'describedBy': params.id ~ '-info',
+ 'rows': params.rows,
+ 'spellcheck': params.spellcheck,
+ 'value': params.value,
+ 'formGroup': {
+ 'classes': 'govuk-character-count' ~ (' ' ~ params.formGroup.classes if params.formGroup and params.formGroup.classes),
+ 'attributes': attributesHtml,
+ 'beforeInput': params.formGroup.beforeInput if params.fromGroup,
+ 'afterInput': {
+ 'html': countMessageHtml
+ }
+ },
+ 'classes': 'govuk-js-character-count' ~ (' ' ~ params.classes if params.classes),
+ 'label': {
+ 'html': params.label.html,
+ 'text': params.label.text,
+ 'classes': params.label.classes,
+ 'isPageHeading': params.label.isPageHeading,
+ 'attributes': params.label.attributes,
+ 'for': params.id
+ },
+ 'hint': params.hint,
+ 'errorMessage': params.errorMessage,
+ 'attributes': params.attributes
+}) | trim }}
{% endmacro %}
diff --git a/govuk_frontend_jinja/templates/components/checkboxes/macro.html b/govuk_frontend_jinja/templates/components/checkboxes/macro.html
index a45d0dfb..4c257095 100644
--- a/govuk_frontend_jinja/templates/components/checkboxes/macro.html
+++ b/govuk_frontend_jinja/templates/components/checkboxes/macro.html
@@ -1,4 +1,5 @@
{% macro govukCheckboxes(params) %}
+{% from "govuk_frontend_jinja/macros/attributes.html" import govukAttributes %}
{% from "govuk_frontend_jinja/components/error-message/macro.html" import govukErrorMessage %}
{% from "govuk_frontend_jinja/components/fieldset/macro.html" import govukFieldset %}
{% from "govuk_frontend_jinja/components/hint/macro.html" import govukHint %}
@@ -20,11 +21,58 @@
{#- fieldset is false by default -#}
{% set hasFieldset = true if params.fieldset else false %}
+{%- macro _checkboxItem(params, item, index) %}
+ {#- If the user explicitly sets an id, use this instead of the regular idPrefix -#}
+ {#- The first id should not have a number suffix so it's easy to link to from the error summary component -#}
+ {% set itemId = item.id if item.id else idPrefix ~ ("-" ~ index if index > 1 else "") %}
+ {% set itemName = item.name if item.name else params.name %}
+ {% set conditionalId = "conditional-" ~ itemId %}
+ {%- if item.divider %}
+
{{ item.divider }}
+ {% else %}
+ {% set isChecked = item.checked | default((item.value in params.get('values', []) and item.checked is not false) if params.values else false, true) %}
+ {% set hasHint = true if item.hint and (item.hint.text or item.hint.html) %}
+ {% set itemHintId = itemId ~ "-item-hint" if hasHint else "" %}
+ {% set itemDescribedBy = ns.describedBy if not hasFieldset else "" %}
+ {% set itemDescribedBy = (itemDescribedBy ~ " " ~ itemHintId) | trim %}
+
+
+ {{ govukLabel({
+ 'html': item.html,
+ 'text': item.text,
+ 'classes': 'govuk-checkboxes__label' ~ (' ' ~ item.label.classes if item.label and item.label.classes else ""),
+ 'attributes': item.label.attributes if item.label,
+ 'for': itemId
+ }) | trim | indent(6) }}
+ {% if hasHint %}
+ {{ govukHint({
+ 'id': itemHintId,
+ 'classes': 'govuk-checkboxes__hint' ~ (' ' ~ item.hint.classes if item.hint and item.hint.classes else ""),
+ 'attributes': item.hint.attributes if item.hint,
+ 'html': item.hint.html,
+ 'text': item.hint.text
+ }) | trim | indent(6) }}
+ {% endif %}
+
+ {% if item.conditional and item.conditional.html %}
+
+ {{ item.conditional.html | safe | trim }}
+
+ {% endif %}
+ {% endif %}
+{% endmacro -%}
+
{#- Capture the HTML so we can optionally nest it in a fieldset -#}
{% set innerHtml %}
{% if params.hint %}
- {% set hintId = idPrefix + '-hint' %}
- {% set ns.describedBy = ns.describedBy + ' ' + hintId if ns.describedBy else hintId %}
+ {% set hintId = idPrefix ~ '-hint' %}
+ {% set ns.describedBy = ns.describedBy ~ ' ' ~ hintId if ns.describedBy else hintId %}
{{ govukHint({
'id': hintId,
'classes': params.hint.classes,
@@ -34,8 +82,8 @@
}) | trim | indent(2) }}
{% endif %}
{% if params.errorMessage %}
- {% set errorId = idPrefix + '-error' %}
- {% set ns.describedBy = ns.describedBy + ' ' + errorId if ns.describedBy else errorId %}
+ {% set errorId = idPrefix ~ '-error' %}
+ {% set ns.describedBy = ns.describedBy ~ ' ' ~ errorId if ns.describedBy else errorId %}
{{ govukErrorMessage({
'id': errorId,
'classes': params.errorMessage.classes,
@@ -46,67 +94,23 @@
}) | trim | indent(2) }}
{% endif %}
+ {{- govukAttributes(params.attributes) }} data-module="govuk-checkboxes">
+ {% if params.formGroup and params.formGroup.beforeInputs %}
+ {{ params.formGroup.beforeInputs.html | safe | trim | indent(4) if params.formGroup and params.formGroup.beforeInputs.html else params.formGroup.beforeInputs.text }}
+ {% endif %}
{% for item in params['items'] %}
{% if item %}
- {#- If the user explicitly sets an id, use this instead of the regular idPrefix -#}
- {%- if item.id -%}
- {%- set id = item.id -%}
- {%- else -%}
- {#- The first id should not have a number suffix so it's easy to link to from the error summary component -#}
- {%- if loop.first -%}
- {%- set id = idPrefix %}
- {% else %}
- {%- set id = idPrefix + "-" ~ loop.index -%}
- {%- endif -%}
- {%- endif -%}
- {% set name = item.name if item.name else params.name %}
- {% set conditionalId = "conditional-" + id %}
- {%- if item.divider %}
-
{{ item.divider }}
- {%- else %}
- {% set isChecked = item.checked | default((item.value in params.get('values', []) and item.checked != false) if params.values else false, true) %}
- {% set hasHint = true if item.hint and (item.hint.text or item.hint.html) %}
- {% set itemHintId = id + "-item-hint" if hasHint else "" %}
- {% set itemDescribedBy = ns.describedBy if not hasFieldset else "" %}
- {% set itemDescribedBy = (itemDescribedBy + " " + itemHintId) | trim %}
-
{% endmacro %}
\ No newline at end of file
diff --git a/govuk_frontend_jinja/templates/components/date-input/macro.html b/govuk_frontend_jinja/templates/components/date-input/macro.html
index a40dc163..9f2f16a3 100644
--- a/govuk_frontend_jinja/templates/components/date-input/macro.html
+++ b/govuk_frontend_jinja/templates/components/date-input/macro.html
@@ -1,4 +1,5 @@
{% macro govukDateInput(params) %}
+{% from "govuk_frontend_jinja/macros/attributes.html" import govukAttributes %}
{% from "govuk_frontend_jinja/components/error-message/macro.html" import govukErrorMessage %}
{% from "govuk_frontend_jinja/components/fieldset/macro.html" import govukFieldset %}
{% from "govuk_frontend_jinja/components/hint/macro.html" import govukHint %}
@@ -6,8 +7,8 @@
{#- a record of other elements that we need to associate with the input using
aria-describedby – for example hints or error messages -#}
-{% set ns = namespace() %}
-{% set ns.describedBy = params.fieldset.describedBy if params.fieldset and params.fieldset.describedBy else "" %}
+ {% set ns = namespace() %}
+ {% set ns.describedBy = params.fieldset.describedBy if params.fieldset and params.fieldset.describedBy else "" %}
{#- fieldset is false by default -#}
{% set hasFieldset = true if params.fieldset else false %}
@@ -34,8 +35,8 @@
{#- Capture the HTML so we can optionally nest it in a fieldset -#}
{% set innerHtml %}
{% if params.hint %}
- {% set hintId = params.id + "-hint" %}
- {% set ns.describedBy = ns.describedBy + " " + hintId if ns.describedBy else hintId %}
+ {% set hintId = params.id ~ "-hint" %}
+ {% set ns.describedBy = ns.describedBy ~ " " ~ hintId if ns.describedBy else hintId %}
{{ govukHint({
'id': hintId,
'classes': params.hint.classes,
@@ -45,8 +46,8 @@
}) | trim | indent(2) }}
{% endif %}
{% if params.errorMessage %}
- {% set errorId = params.id + "-error" %}
- {% set ns.describedBy = ns.describedBy + " " + errorId if ns.describedBy else errorId %}
+ {% set errorId = params.id ~ "-error" %}
+ {% set ns.describedBy = ns.describedBy ~ " " ~ errorId if ns.describedBy else errorId %}
{{ govukErrorMessage({
'id': errorId,
'classes': params.errorMessage.classes,
@@ -57,8 +58,11 @@
}) | trim | indent(2) }}
{% endif %}
+ {% if params.formGroup and params.formGroup.beforeInputs %}
+ {{ params.formGroup.beforeInputs.html | safe | trim | indent(4) if params.formGroup and params.formGroup.beforeInputs.html else params.formGroup.beforeInputs.text }}
+ {% endif %}
{% for item in dateInputItems %}
- {% endfor %}
+ {% endfor %}
+ {% if params.formGroup and params.formGroup.afterInputs %}
+ {{ params.formGroup.afterInputs.html | safe | trim | indent(4) if params.formGroup and params.formGroup.afterInputs.html else params.formGroup.afterInputs.text }}
+ {% endif %}
{% endset -%}
-
+
{% if hasFieldset %}
{# We override the fieldset's role to 'group' because otherwise JAWS does not
announce the description for a fieldset comprised of text inputs, but
diff --git a/govuk_frontend_jinja/templates/components/details/macro.html b/govuk_frontend_jinja/templates/components/details/macro.html
index 61ab3dd8..0ec3b31d 100644
--- a/govuk_frontend_jinja/templates/components/details/macro.html
+++ b/govuk_frontend_jinja/templates/components/details/macro.html
@@ -1,8 +1,12 @@
{% macro govukDetails(params) %}
-
+{% from "govuk_frontend_jinja/macros/attributes.html" import govukAttributes -%}
+
+
- {{ params.summaryHtml | safe if params.summaryHtml else params.summaryText }}
+ {{ params.summaryHtml | safe | trim | indent(6) if params.summaryHtml else params.summaryText }}
diff --git a/govuk_frontend_jinja/templates/components/error-message/macro.html b/govuk_frontend_jinja/templates/components/error-message/macro.html
index 083d7e8f..a0a93843 100644
--- a/govuk_frontend_jinja/templates/components/error-message/macro.html
+++ b/govuk_frontend_jinja/templates/components/error-message/macro.html
@@ -1,8 +1,11 @@
{% macro govukErrorMessage(params) %}
+{% from "govuk_frontend_jinja/macros/attributes.html" import govukAttributes -%}
+
{% set visuallyHiddenText = params.visuallyHiddenText | default("Error") -%}
{% set errorMessageText = params.html | safe | trim | indent(2) if params.html else params.text -%}
-
+ {{- govukAttributes(params.attributes) }} data-module="govuk-error-summary">
{#- Keep the role="alert" in a seperate child container to prevent a race condition between
the focusing js at the alert, resulting in information getting missed in screen reader announcements #}
@@ -15,19 +17,22 @@
{{ caller() if caller else (params.descriptionHtml | safe | trim | indent(8) if params.descriptionHtml else params.descriptionText) }}
{% endif %}
-