From 59769c032700271f8c392dfb577dba812e34bb5a Mon Sep 17 00:00:00 2001 From: beeps Date: Wed, 24 Jul 2024 15:44:10 +0100 Subject: [PATCH 01/10] Set default ID for accordion component If unset, the accordion uses the string "accordion" as the ID and prefix for child element IDs. --- .../src/govuk/components/accordion/accordion.yaml | 3 +-- .../src/govuk/components/accordion/template.njk | 10 ++++++---- 2 files changed, 7 insertions(+), 6 deletions(-) diff --git a/packages/govuk-frontend/src/govuk/components/accordion/accordion.yaml b/packages/govuk-frontend/src/govuk/components/accordion/accordion.yaml index 11cf0a3296..8ecaa75412 100644 --- a/packages/govuk-frontend/src/govuk/components/accordion/accordion.yaml +++ b/packages/govuk-frontend/src/govuk/components/accordion/accordion.yaml @@ -1,7 +1,7 @@ params: - name: id type: string - required: true + required: false description: Must be unique across the domain of your service if `rememberExpanded` is `true` (as the expanded state of individual instances of the component persists across page loads using [session storage](https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage)). Used as an `id` in the HTML for the accordion as a whole, and also as a prefix for the `id`s of the section contents and the buttons that open them, so that those `id`s can be the target of `aria-control` attributes. - name: headingLevel type: integer @@ -95,7 +95,6 @@ params: examples: - name: default options: - id: default-example items: - heading: text: Section A diff --git a/packages/govuk-frontend/src/govuk/components/accordion/template.njk b/packages/govuk-frontend/src/govuk/components/accordion/template.njk index 53ecfbac85..a1245bfdd1 100644 --- a/packages/govuk-frontend/src/govuk/components/accordion/template.njk +++ b/packages/govuk-frontend/src/govuk/components/accordion/template.njk @@ -1,22 +1,24 @@ {% from "../../macros/attributes.njk" import govukAttributes %} {% from "../../macros/i18n.njk" import govukI18nAttributes %} +{%- set componentId = params.id | default("accordion") -%} + {%- macro _accordionItem(params, item, index) %} {%- set headingLevel = params.headingLevel if params.headingLevel else 2 %}
- + {{ item.heading.html | safe | trim | indent(8) if item.heading.html else item.heading.text }} {% if item.summary.html or item.summary.text %} -
+
{{ item.summary.html | safe | trim | indent(8) if item.summary.html else item.summary.text }}
{% endif %}
-
+
{% if item.content.html %} {{ item.content.html | safe | trim | indent(6) }} {% elif item.content.text %} @@ -28,7 +30,7 @@
{% endmacro -%} -
Date: Wed, 24 Jul 2024 15:45:10 +0100 Subject: [PATCH 02/10] Set default ID for character count component If unset, the character count uses the value of the `name` parameter as an ID and prefix for child element IDs. --- .../components/character-count/character-count.yaml | 5 ++--- .../src/govuk/components/character-count/template.njk | 10 ++++++---- 2 files changed, 8 insertions(+), 7 deletions(-) diff --git a/packages/govuk-frontend/src/govuk/components/character-count/character-count.yaml b/packages/govuk-frontend/src/govuk/components/character-count/character-count.yaml index 32f907ba31..7ac97eae5f 100644 --- a/packages/govuk-frontend/src/govuk/components/character-count/character-count.yaml +++ b/packages/govuk-frontend/src/govuk/components/character-count/character-count.yaml @@ -1,8 +1,8 @@ params: - name: id type: string - required: true - description: The ID of the textarea. + required: false + description: The ID of the textarea and also as a prefix for the `id`s of the textarea's hints, so that those `id`s can be the target of `aria-describedby` attributes. Defaults to matching `name`. - name: name type: string required: true @@ -135,7 +135,6 @@ examples: - name: default options: name: more-detail - id: more-detail maxlength: 10 label: text: Can you provide more detail? diff --git a/packages/govuk-frontend/src/govuk/components/character-count/template.njk b/packages/govuk-frontend/src/govuk/components/character-count/template.njk index d2c4ce017b..35b9c1745b 100644 --- a/packages/govuk-frontend/src/govuk/components/character-count/template.njk +++ b/packages/govuk-frontend/src/govuk/components/character-count/template.njk @@ -3,6 +3,8 @@ {% from "../textarea/macro.njk" import govukTextarea %} {% from "../hint/macro.njk" import govukHint %} +{%- set componentId = params.id | default(params.name) -%} + {#- 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 @@ -16,7 +18,7 @@ {%- set countMessageHtml %} {{ govukHint({ text: textareaDescriptionTextNoLimit, - id: params.id + '-info', + id: componentId + '-info', classes: 'govuk-character-count__message' + (' ' + params.countMessage.classes if params.countMessage.classes) }) | trim }} {% if params.formGroup.afterInput %} @@ -91,9 +93,9 @@ {% endfor -%} {{ govukTextarea({ - id: params.id, + id: componentId, name: params.name, - describedBy: params.id + '-info', + describedBy: componentId + '-info', rows: params.rows, spellcheck: params.spellcheck, value: params.value, @@ -112,7 +114,7 @@ classes: params.label.classes, isPageHeading: params.label.isPageHeading, attributes: params.label.attributes, - for: params.id + for: componentId }, hint: params.hint, errorMessage: params.errorMessage, From dbea0257580150778f27e9a9ed0067bb2467c8b5 Mon Sep 17 00:00:00 2001 From: beeps Date: Wed, 24 Jul 2024 15:48:07 +0100 Subject: [PATCH 03/10] Set default ID for date input component MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit If unset, the component will first use the value of the `namePrefix` parameter. If that is also unset, it will use the string “date-input”. --- .../src/govuk/components/date-input/date-input.yaml | 6 ++---- .../src/govuk/components/date-input/template.njk | 10 ++++++---- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/govuk-frontend/src/govuk/components/date-input/date-input.yaml b/packages/govuk-frontend/src/govuk/components/date-input/date-input.yaml index 870d000cae..822b5cafbc 100644 --- a/packages/govuk-frontend/src/govuk/components/date-input/date-input.yaml +++ b/packages/govuk-frontend/src/govuk/components/date-input/date-input.yaml @@ -1,8 +1,8 @@ params: - name: id type: string - required: true - description: This is used for the main component and to compose the ID attribute for each item. + required: false + description: This is used for the main component and to compose the ID attribute for each item. Defaults to `namePrefix` if set, otherwise uses `"date-input"`. - name: namePrefix type: string required: false @@ -109,8 +109,6 @@ params: examples: - name: default - options: - id: dob - name: complete question options: id: dob diff --git a/packages/govuk-frontend/src/govuk/components/date-input/template.njk b/packages/govuk-frontend/src/govuk/components/date-input/template.njk index a7aeca171e..cfba6fc185 100644 --- a/packages/govuk-frontend/src/govuk/components/date-input/template.njk +++ b/packages/govuk-frontend/src/govuk/components/date-input/template.njk @@ -4,6 +4,8 @@ {% from "../hint/macro.njk" import govukHint %} {% from "../input/macro.njk" import govukInput %} +{%- set componentId = (params.id if params.id else params.namePrefix) | default("date-input") %} + {#- a record of other elements that we need to associate with the input using aria-describedby – for example hints or error messages -#} {% set describedBy = params.fieldset.describedBy if params.fieldset.describedBy else "" %} @@ -33,7 +35,7 @@ {#- Capture the HTML so we can optionally nest it in a fieldset -#} {% set innerHtml %} {% if params.hint %} - {% set hintId = params.id + "-hint" %} + {% set hintId = componentId + "-hint" %} {% set describedBy = describedBy + " " + hintId if describedBy else hintId %} {{ govukHint({ id: hintId, @@ -44,7 +46,7 @@ }) | trim | indent(2) }} {% endif %} {% if params.errorMessage %} - {% set errorId = params.id + "-error" %} + {% set errorId = componentId + "-error" %} {% set describedBy = describedBy + " " + errorId if describedBy else errorId %} {{ govukErrorMessage({ id: errorId, @@ -57,7 +59,7 @@ {% endif %}
+ {%- if componentId %} id="{{ componentId }}"{% endif %}> {% if params.formGroup.beforeInputs %} {{ params.formGroup.beforeInputs.html | safe | trim | indent(4) if params.formGroup.beforeInputs.html else params.formGroup.beforeInputs.text }} {% endif %} @@ -68,7 +70,7 @@ text: item.label if item.label else item.name | capitalize, classes: "govuk-date-input__label" }, - id: item.id if item.id else (params.id + "-" + item.name), + id: item.id if item.id else (componentId + "-" + item.name), classes: "govuk-date-input__input " + (item.classes if item.classes), name: (params.namePrefix + "-" + item.name) if params.namePrefix else item.name, value: item.value, From 25dabac529b23f4ba68715c927dca5d5eca30cc1 Mon Sep 17 00:00:00 2001 From: beeps Date: Wed, 24 Jul 2024 15:55:04 +0100 Subject: [PATCH 04/10] Set default ID for file upload component If unset, the component uses the `name` parameter value for the ID --- .../src/govuk/components/file-upload/file-upload.yaml | 5 ++--- .../src/govuk/components/file-upload/template.njk | 11 +++++++---- 2 files changed, 9 insertions(+), 7 deletions(-) diff --git a/packages/govuk-frontend/src/govuk/components/file-upload/file-upload.yaml b/packages/govuk-frontend/src/govuk/components/file-upload/file-upload.yaml index 6506fde6eb..33d436da05 100644 --- a/packages/govuk-frontend/src/govuk/components/file-upload/file-upload.yaml +++ b/packages/govuk-frontend/src/govuk/components/file-upload/file-upload.yaml @@ -5,8 +5,8 @@ params: description: The name of the input, which is submitted with the form data. - name: id type: string - required: true - description: The ID of the input. + required: false + description: The ID of the input. Defaults to matching `name`. - name: value type: string required: false @@ -85,7 +85,6 @@ params: examples: - name: default options: - id: file-upload-1 name: file-upload-1 label: text: Upload a file diff --git a/packages/govuk-frontend/src/govuk/components/file-upload/template.njk b/packages/govuk-frontend/src/govuk/components/file-upload/template.njk index a3b11c7b90..0363a55207 100644 --- a/packages/govuk-frontend/src/govuk/components/file-upload/template.njk +++ b/packages/govuk-frontend/src/govuk/components/file-upload/template.njk @@ -3,9 +3,12 @@ {% from "../hint/macro.njk" import govukHint %} {% from "../label/macro.njk" import govukLabel %} +{%- set componentId = params.id | default(params.name) -%} + {#- a record of other elements that we need to associate with the input using aria-describedby – for example hints or error messages -#} {% set describedBy = params.describedBy if params.describedBy else "" %} +
{{ govukLabel({ @@ -14,10 +17,10 @@ classes: params.label.classes, isPageHeading: params.label.isPageHeading, attributes: params.label.attributes, - for: params.id + for: componentId }) | trim | indent(2) }} {% if params.hint %} - {% set hintId = params.id + '-hint' %} + {% set hintId = componentId + '-hint' %} {% set describedBy = describedBy + ' ' + hintId if describedBy else hintId %} {{ govukHint({ id: hintId, @@ -28,7 +31,7 @@ }) | trim | indent(2) }} {% endif %} {% if params.errorMessage %} - {% set errorId = params.id + '-error' %} + {% set errorId = componentId + '-error' %} {% set describedBy = describedBy + ' ' + errorId if describedBy else errorId %} {{ govukErrorMessage({ id: errorId, @@ -42,7 +45,7 @@ {% if params.formGroup.beforeInput %} {{ params.formGroup.beforeInput.html | safe | trim | indent(2) if params.formGroup.beforeInput.html else params.formGroup.beforeInput.text }} {% endif %} - Date: Wed, 24 Jul 2024 15:57:08 +0100 Subject: [PATCH 05/10] Set default ID for select component If unset, the ID defaults to match the value of the `name` parameter --- .../src/govuk/components/select/select.yaml | 5 ++--- .../src/govuk/components/select/template.njk | 11 +++++++---- 2 files changed, 9 insertions(+), 7 deletions(-) diff --git a/packages/govuk-frontend/src/govuk/components/select/select.yaml b/packages/govuk-frontend/src/govuk/components/select/select.yaml index d7689c2b65..d5cf107f9d 100644 --- a/packages/govuk-frontend/src/govuk/components/select/select.yaml +++ b/packages/govuk-frontend/src/govuk/components/select/select.yaml @@ -1,8 +1,8 @@ params: - name: id type: string - required: true - description: ID for each select box. + required: false + description: ID for each select box. Defaults to matching `name`. - name: name type: string required: true @@ -110,7 +110,6 @@ params: examples: - name: default options: - id: select-1 name: select-1 label: text: Label text goes here diff --git a/packages/govuk-frontend/src/govuk/components/select/template.njk b/packages/govuk-frontend/src/govuk/components/select/template.njk index 716b50cb98..e8ae8705be 100644 --- a/packages/govuk-frontend/src/govuk/components/select/template.njk +++ b/packages/govuk-frontend/src/govuk/components/select/template.njk @@ -3,9 +3,12 @@ {% from "../hint/macro.njk" import govukHint %} {% from "../label/macro.njk" import govukLabel %} +{%- set componentId = params.id | default(params.name) -%} + {#- a record of other elements that we need to associate with the input using aria-describedby – for example hints or error messages -#} {% set describedBy = params.describedBy if params.describedBy else "" %} +
{{ govukLabel({ @@ -14,10 +17,10 @@ classes: params.label.classes, isPageHeading: params.label.isPageHeading, attributes: params.label.attributes, - for: params.id + for: componentId }) | trim | indent(2) }} {% if params.hint %} - {% set hintId = params.id + '-hint' %} + {% set hintId = componentId + '-hint' %} {% set describedBy = describedBy + ' ' + hintId if describedBy else hintId %} {{ govukHint({ id: hintId, @@ -28,7 +31,7 @@ }) | trim | indent(2) }} {% endif %} {% if params.errorMessage %} - {% set errorId = params.id + '-error' %} + {% set errorId = componentId + '-error' %} {% set describedBy = describedBy + ' ' + errorId if describedBy else errorId %} {{ govukErrorMessage({ id: errorId, @@ -43,7 +46,7 @@ {{ params.formGroup.beforeInput.html | safe | trim | indent(2) if params.formGroup.beforeInput.html else params.formGroup.beforeInput.text }} {% endif %} Date: Wed, 24 Jul 2024 16:20:38 +0100 Subject: [PATCH 08/10] Set default ID for textarea component If unset, uses the `name` parameter for the component ID. --- .../src/govuk/components/textarea/template.njk | 11 +++++++---- .../src/govuk/components/textarea/textarea.yaml | 5 ++--- 2 files changed, 9 insertions(+), 7 deletions(-) diff --git a/packages/govuk-frontend/src/govuk/components/textarea/template.njk b/packages/govuk-frontend/src/govuk/components/textarea/template.njk index bfc7e5b5b4..eaf2131743 100644 --- a/packages/govuk-frontend/src/govuk/components/textarea/template.njk +++ b/packages/govuk-frontend/src/govuk/components/textarea/template.njk @@ -3,9 +3,12 @@ {% from "../hint/macro.njk" import govukHint %} {% from "../label/macro.njk" import govukLabel %} +{%- set componentId = params.id | default(params.name)%} + {#- a record of other elements that we need to associate with the input using aria-describedby – for example hints or error messages -#} {% set describedBy = params.describedBy if params.describedBy else "" %} +
{{ govukLabel({ @@ -14,10 +17,10 @@ classes: params.label.classes, isPageHeading: params.label.isPageHeading, attributes: params.label.attributes, - for: params.id + for: componentId }) | trim | indent(2) }} {% if params.hint %} - {% set hintId = params.id + '-hint' %} + {% set hintId = componentId + '-hint' %} {% set describedBy = describedBy + ' ' + hintId if describedBy else hintId %} {{ govukHint({ id: hintId, @@ -28,7 +31,7 @@ }) | trim | indent(2) }} {% endif %} {% if params.errorMessage %} - {% set errorId = params.id + '-error' %} + {% set errorId = componentId + '-error' %} {% set describedBy = describedBy + ' ' + errorId if describedBy else errorId %} {{ govukErrorMessage({ id: errorId, @@ -42,7 +45,7 @@ {% if params.formGroup.beforeInput %} {{ params.formGroup.beforeInput.html | safe | trim | indent(2) if params.formGroup.beforeInput.html else params.formGroup.beforeInput.text }} {% endif %} -