Update form control components to set a default id based on name
#5658
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Update the following components to use their `name` attribute as the default value for the `id` attribute. Mark the `id` parameter as optional in documentation. - Character count - File upload - (Text) input - Password input - Select - Textarea
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-pr-5658
📋 StatsFile sizes
Modules
View stats and visualisations on the review app Action run for 155f264 |
Other changes to npm packagediff --git a/packages/govuk-frontend/dist/govuk/components/character-count/fixtures.json b/packages/govuk-frontend/dist/govuk/components/character-count/fixtures.json
index 775ea7e5b..62c238a62 100644
--- a/packages/govuk-frontend/dist/govuk/components/character-count/fixtures.json
+++ b/packages/govuk-frontend/dist/govuk/components/character-count/fixtures.json
@@ -5,7 +5,6 @@
"name": "default",
"options": {
"name": "more-detail",
- "id": "more-detail",
"maxlength": 10,
"label": {
"text": "Can you provide more detail?"
@@ -209,6 +208,22 @@
"screenshot": false,
"html": "<div class=\"govuk-form-group govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n <label class=\"govuk-label\" for=\"with-classes\">\n With classes\n </label>\n <textarea class=\"govuk-textarea govuk-js-character-count app-character-count--custom-modifier\" id=\"with-classes\" name=\"with-classes\" rows=\"5\" aria-describedby=\"with-classes-info\"></textarea>\n <div id=\"with-classes-info\" class=\"govuk-hint govuk-character-count__message\">\n You can enter up to 10 characters\n </div>\n</div>"
},
+ {
+ "name": "id",
+ "options": {
+ "id": "character-count-id",
+ "name": "test-name",
+ "maxlength": 10,
+ "label": {
+ "text": "With custom id"
+ }
+ },
+ "hidden": true,
+ "description": "",
+ "previewLayoutModifiers": [],
+ "screenshot": false,
+ "html": "<div class=\"govuk-form-group govuk-character-count\" data-module=\"govuk-character-count\" data-maxlength=\"10\">\n <label class=\"govuk-label\" for=\"character-count-id\">\n With custom id\n </label>\n <textarea class=\"govuk-textarea govuk-js-character-count\" id=\"character-count-id\" name=\"test-name\" rows=\"5\" aria-describedby=\"character-count-id-info\"></textarea>\n <div id=\"character-count-id-info\" class=\"govuk-hint govuk-character-count__message\">\n You can enter up to 10 characters\n </div>\n</div>"
+ },
{
"name": "attributes",
"options": {
diff --git a/packages/govuk-frontend/dist/govuk/components/character-count/macro-options.json b/packages/govuk-frontend/dist/govuk/components/character-count/macro-options.json
index 01e8ebfb2..f671607a9 100644
--- a/packages/govuk-frontend/dist/govuk/components/character-count/macro-options.json
+++ b/packages/govuk-frontend/dist/govuk/components/character-count/macro-options.json
@@ -2,8 +2,8 @@
{
"name": "id",
"type": "string",
- "required": true,
- "description": "The ID of the textarea."
+ "required": false,
+ "description": "The ID of the textarea. Defaults to the value of `name`."
},
{
"name": "name",
diff --git a/packages/govuk-frontend/dist/govuk/components/file-upload/fixtures.json b/packages/govuk-frontend/dist/govuk/components/file-upload/fixtures.json
index 4a36de2a3..0da13f2e0 100644
--- a/packages/govuk-frontend/dist/govuk/components/file-upload/fixtures.json
+++ b/packages/govuk-frontend/dist/govuk/components/file-upload/fixtures.json
@@ -4,7 +4,6 @@
{
"name": "default",
"options": {
- "id": "file-upload-1",
"name": "file-upload-1",
"label": {
"text": "Upload a file"
@@ -140,6 +139,21 @@
"screenshot": false,
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"file-upload-classes\">\n Upload a file\n </label>\n <input class=\"govuk-file-upload app-file-upload--custom-modifier\" id=\"file-upload-classes\" name=\"file-upload-classes\" type=\"file\">\n</div>"
},
+ {
+ "name": "id",
+ "options": {
+ "id": "file-upload-id",
+ "name": "test-name",
+ "label": {
+ "text": "Upload a file"
+ }
+ },
+ "hidden": true,
+ "description": "",
+ "previewLayoutModifiers": [],
+ "screenshot": false,
+ "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"file-upload-id\">\n Upload a file\n </label>\n <input class=\"govuk-file-upload\" id=\"file-upload-id\" name=\"test-name\" type=\"file\">\n</div>"
+ },
{
"name": "with describedBy",
"options": {
diff --git a/packages/govuk-frontend/dist/govuk/components/file-upload/macro-options.json b/packages/govuk-frontend/dist/govuk/components/file-upload/macro-options.json
index c7608479a..a9eff4d8c 100644
--- a/packages/govuk-frontend/dist/govuk/components/file-upload/macro-options.json
+++ b/packages/govuk-frontend/dist/govuk/components/file-upload/macro-options.json
@@ -8,8 +8,8 @@
{
"name": "id",
"type": "string",
- "required": true,
- "description": "The ID of the input."
+ "required": false,
+ "description": "The ID of the input. Defaults to the value of `name`."
},
{
"name": "value",
diff --git a/packages/govuk-frontend/dist/govuk/components/input/fixtures.json b/packages/govuk-frontend/dist/govuk/components/input/fixtures.json
index deaf8111d..7e33ab26b 100644
--- a/packages/govuk-frontend/dist/govuk/components/input/fixtures.json
+++ b/packages/govuk-frontend/dist/govuk/components/input/fixtures.json
@@ -7,14 +7,13 @@
"label": {
"text": "National Insurance number"
},
- "id": "input-example",
"name": "test-name"
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"screenshot": false,
- "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-example\">\n National Insurance number\n </label>\n <input class=\"govuk-input\" id=\"input-example\" name=\"test-name\" type=\"text\">\n</div>"
+ "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"test-name\">\n National Insurance number\n </label>\n <input class=\"govuk-input\" id=\"test-name\" name=\"test-name\" type=\"text\">\n</div>"
},
{
"name": "with hint text",
@@ -496,6 +495,21 @@
"screenshot": false,
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"with-classes\">\n With classes\n </label>\n <input class=\"govuk-input app-input--custom-modifier\" id=\"with-classes\" name=\"with-classes\" type=\"text\">\n</div>"
},
+ {
+ "name": "id",
+ "options": {
+ "id": "input-id",
+ "name": "testing-name",
+ "label": {
+ "text": "With custom id"
+ }
+ },
+ "hidden": true,
+ "description": "",
+ "previewLayoutModifiers": [],
+ "screenshot": false,
+ "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"input-id\">\n With custom id\n </label>\n <input class=\"govuk-input\" id=\"input-id\" name=\"testing-name\" type=\"text\">\n</div>"
+ },
{
"name": "custom type",
"options": {
diff --git a/packages/govuk-frontend/dist/govuk/components/input/macro-options.json b/packages/govuk-frontend/dist/govuk/components/input/macro-options.json
index 2bce2545d..bfb385aa4 100644
--- a/packages/govuk-frontend/dist/govuk/components/input/macro-options.json
+++ b/packages/govuk-frontend/dist/govuk/components/input/macro-options.json
@@ -2,8 +2,8 @@
{
"name": "id",
"type": "string",
- "required": true,
- "description": "The ID of the input."
+ "required": false,
+ "description": "The ID of the input. Defaults to the value of `name`."
},
{
"name": "name",
diff --git a/packages/govuk-frontend/dist/govuk/components/password-input/fixtures.json b/packages/govuk-frontend/dist/govuk/components/password-input/fixtures.json
index 6d468aef0..d1050ca4f 100644
--- a/packages/govuk-frontend/dist/govuk/components/password-input/fixtures.json
+++ b/packages/govuk-frontend/dist/govuk/components/password-input/fixtures.json
@@ -7,14 +7,13 @@
"label": {
"text": "Password"
},
- "id": "password-input",
"name": "password"
},
"hidden": false,
"description": "",
"previewLayoutModifiers": [],
"screenshot": false,
- "html": "<div class=\"govuk-form-group govuk-password-input\" data-module=\"govuk-password-input\">\n <label class=\"govuk-label\" for=\"password-input\">\n Password\n </label>\n <div class=\"govuk-input__wrapper govuk-password-input__wrapper\">\n <input class=\"govuk-input govuk-password-input__input govuk-js-password-input-input\" id=\"password-input\" name=\"password\" type=\"password\" spellcheck=\"false\" autocomplete=\"current-password\" autocapitalize=\"none\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary govuk-password-input__toggle govuk-js-password-input-toggle\" data-module=\"govuk-button\" aria-controls=\"password-input\" aria-label=\"Show password\" hidden>\n Show\n </button>\n </div>\n</div>"
+ "html": "<div class=\"govuk-form-group govuk-password-input\" data-module=\"govuk-password-input\">\n <label class=\"govuk-label\" for=\"password\">\n Password\n </label>\n <div class=\"govuk-input__wrapper govuk-password-input__wrapper\">\n <input class=\"govuk-input govuk-password-input__input govuk-js-password-input-input\" id=\"password\" name=\"password\" type=\"password\" spellcheck=\"false\" autocomplete=\"current-password\" autocapitalize=\"none\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary govuk-password-input__toggle govuk-js-password-input-toggle\" data-module=\"govuk-button\" aria-controls=\"password\" aria-label=\"Show password\" hidden>\n Show\n </button>\n </div>\n</div>"
},
{
"name": "with hint text",
@@ -141,6 +140,21 @@
"screenshot": false,
"html": "<div class=\"govuk-form-group govuk-password-input\" data-module=\"govuk-password-input\">\n <label class=\"govuk-label\" for=\"with-classes\">\n With classes\n </label>\n <div class=\"govuk-input__wrapper govuk-password-input__wrapper\">\n <input class=\"govuk-input govuk-password-input__input govuk-js-password-input-input app-input--custom-modifier\" id=\"with-classes\" name=\"with-classes\" type=\"password\" spellcheck=\"false\" autocomplete=\"current-password\" autocapitalize=\"none\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary govuk-password-input__toggle govuk-js-password-input-toggle\" data-module=\"govuk-button\" aria-controls=\"with-classes\" aria-label=\"Show password\" hidden>\n Show\n </button>\n </div>\n</div>"
},
+ {
+ "name": "id",
+ "options": {
+ "id": "password-id",
+ "name": "testing-name",
+ "label": {
+ "text": "With custom id"
+ }
+ },
+ "hidden": true,
+ "description": "",
+ "previewLayoutModifiers": [],
+ "screenshot": false,
+ "html": "<div class=\"govuk-form-group govuk-password-input\" data-module=\"govuk-password-input\">\n <label class=\"govuk-label\" for=\"password-id\">\n With custom id\n </label>\n <div class=\"govuk-input__wrapper govuk-password-input__wrapper\">\n <input class=\"govuk-input govuk-password-input__input govuk-js-password-input-input\" id=\"password-id\" name=\"testing-name\" type=\"password\" spellcheck=\"false\" autocomplete=\"current-password\" autocapitalize=\"none\">\n <button type=\"button\" class=\"govuk-button govuk-button--secondary govuk-password-input__toggle govuk-js-password-input-toggle\" data-module=\"govuk-button\" aria-controls=\"password-id\" aria-label=\"Show password\" hidden>\n Show\n </button>\n </div>\n</div>"
+ },
{
"name": "value",
"options": {
diff --git a/packages/govuk-frontend/dist/govuk/components/password-input/macro-options.json b/packages/govuk-frontend/dist/govuk/components/password-input/macro-options.json
index 6f6eab54a..453d1b219 100644
--- a/packages/govuk-frontend/dist/govuk/components/password-input/macro-options.json
+++ b/packages/govuk-frontend/dist/govuk/components/password-input/macro-options.json
@@ -2,8 +2,8 @@
{
"name": "id",
"type": "string",
- "required": true,
- "description": "The ID of the input."
+ "required": false,
+ "description": "The ID of the input. Defaults to the value of `name`."
},
{
"name": "name",
diff --git a/packages/govuk-frontend/dist/govuk/components/select/fixtures.json b/packages/govuk-frontend/dist/govuk/components/select/fixtures.json
index 086a44a17..418584363 100644
--- a/packages/govuk-frontend/dist/govuk/components/select/fixtures.json
+++ b/packages/govuk-frontend/dist/govuk/components/select/fixtures.json
@@ -4,7 +4,6 @@
{
"name": "default",
"options": {
- "id": "select-1",
"name": "select-1",
"label": {
"text": "Label text goes here"
@@ -32,6 +31,22 @@
"screenshot": false,
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"select-1\">\n Label text goes here\n </label>\n <select class=\"govuk-select\" id=\"select-1\" name=\"select-1\">\n <option value=\"1\">GOV.UK frontend option 1</option>\n <option value=\"2\" selected>GOV.UK frontend option 2</option>\n <option value=\"3\" disabled>GOV.UK frontend option 3</option>\n </select>\n</div>"
},
+ {
+ "name": "id",
+ "options": {
+ "id": "select-id",
+ "name": "test-name",
+ "label": {
+ "text": "Horse with no name"
+ },
+ "items": []
+ },
+ "hidden": false,
+ "description": "",
+ "previewLayoutModifiers": [],
+ "screenshot": false,
+ "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"select-id\">\n Horse with no name\n </label>\n <select class=\"govuk-select\" id=\"select-id\" name=\"test-name\">\n </select>\n</div>"
+ },
{
"name": "with no items",
"options": {
diff --git a/packages/govuk-frontend/dist/govuk/components/select/macro-options.json b/packages/govuk-frontend/dist/govuk/components/select/macro-options.json
index 0665b9479..959102800 100644
--- a/packages/govuk-frontend/dist/govuk/components/select/macro-options.json
+++ b/packages/govuk-frontend/dist/govuk/components/select/macro-options.json
@@ -2,8 +2,8 @@
{
"name": "id",
"type": "string",
- "required": true,
- "description": "ID for each select box."
+ "required": false,
+ "description": "ID for the select box. Defaults to the value of `name`."
},
{
"name": "name",
diff --git a/packages/govuk-frontend/dist/govuk/components/textarea/fixtures.json b/packages/govuk-frontend/dist/govuk/components/textarea/fixtures.json
index 0a59278f5..7c6b52e7f 100644
--- a/packages/govuk-frontend/dist/govuk/components/textarea/fixtures.json
+++ b/packages/govuk-frontend/dist/govuk/components/textarea/fixtures.json
@@ -5,7 +5,6 @@
"name": "default",
"options": {
"name": "more-detail",
- "id": "more-detail",
"label": {
"text": "Can you provide more detail?"
}
@@ -167,6 +166,21 @@
"screenshot": false,
"html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"textarea-with-spellcheck-disabled\">\n Spellcheck is disabled\n </label>\n <textarea class=\"govuk-textarea\" id=\"textarea-with-spellcheck-disabled\" name=\"spellcheck\" rows=\"5\" spellcheck=\"false\"></textarea>\n</div>"
},
+ {
+ "name": "id",
+ "options": {
+ "id": "textarea-id",
+ "name": "test-name",
+ "label": {
+ "text": "With custom id"
+ }
+ },
+ "hidden": true,
+ "description": "",
+ "previewLayoutModifiers": [],
+ "screenshot": false,
+ "html": "<div class=\"govuk-form-group\">\n <label class=\"govuk-label\" for=\"textarea-id\">\n With custom id\n </label>\n <textarea class=\"govuk-textarea\" id=\"textarea-id\" name=\"test-name\" rows=\"5\"></textarea>\n</div>"
+ },
{
"name": "classes",
"options": {
diff --git a/packages/govuk-frontend/dist/govuk/components/textarea/macro-options.json b/packages/govuk-frontend/dist/govuk/components/textarea/macro-options.json
index 76d868acd..c324781cf 100644
--- a/packages/govuk-frontend/dist/govuk/components/textarea/macro-options.json
+++ b/packages/govuk-frontend/dist/govuk/components/textarea/macro-options.json
@@ -2,8 +2,8 @@
{
"name": "id",
"type": "string",
- "required": true,
- "description": "The ID of the textarea."
+ "required": false,
+ "description": "The ID of the textarea. Defaults to the value of `name`."
},
{
"name": "name",
Action run for 155f264 |
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-pr-5658
Rendered HTML changes to npm packagediff --git a/packages/govuk-frontend/dist/govuk/components/input/template-default.html b/packages/govuk-frontend/dist/govuk/components/input/template-default.html
index 6114d0567..a6aced5b0 100644
--- a/packages/govuk-frontend/dist/govuk/components/input/template-default.html
+++ b/packages/govuk-frontend/dist/govuk/components/input/template-default.html
@@ -1,6 +1,6 @@
<div class="govuk-form-group">
- <label class="govuk-label" for="input-example">
+ <label class="govuk-label" for="test-name">
National Insurance number
</label>
- <input class="govuk-input" id="input-example" name="test-name" type="text">
+ <input class="govuk-input" id="test-name" name="test-name" type="text">
</div>
diff --git a/packages/govuk-frontend/dist/govuk/components/password-input/template-default.html b/packages/govuk-frontend/dist/govuk/components/password-input/template-default.html
index 41ca416d5..71b96218c 100644
--- a/packages/govuk-frontend/dist/govuk/components/password-input/template-default.html
+++ b/packages/govuk-frontend/dist/govuk/components/password-input/template-default.html
@@ -1,10 +1,10 @@
<div class="govuk-form-group govuk-password-input" data-module="govuk-password-input">
- <label class="govuk-label" for="password-input">
+ <label class="govuk-label" for="password">
Password
</label>
<div class="govuk-input__wrapper govuk-password-input__wrapper">
- <input class="govuk-input govuk-password-input__input govuk-js-password-input-input" id="password-input" name="password" type="password" spellcheck="false" autocomplete="current-password" autocapitalize="none">
- <button type="button" class="govuk-button govuk-button--secondary govuk-password-input__toggle govuk-js-password-input-toggle" data-module="govuk-button" aria-controls="password-input" aria-label="Show password" hidden>
+ <input class="govuk-input govuk-password-input__input govuk-js-password-input-input" id="password" name="password" type="password" spellcheck="false" autocomplete="current-password" autocapitalize="none">
+ <button type="button" class="govuk-button govuk-button--secondary govuk-password-input__toggle govuk-js-password-input-toggle" data-module="govuk-button" aria-controls="password" aria-label="Show password" hidden>
Show
</button>
</div>
diff --git a/packages/govuk-frontend/dist/govuk/components/select/template-id.html b/packages/govuk-frontend/dist/govuk/components/select/template-id.html
new file mode 100644
index 000000000..6cdf68b9d
--- /dev/null
+++ b/packages/govuk-frontend/dist/govuk/components/select/template-id.html
@@ -0,0 +1,7 @@
+<div class="govuk-form-group">
+ <label class="govuk-label" for="select-id">
+ Horse with no name
+ </label>
+ <select class="govuk-select" id="select-id" name="test-name">
+ </select>
+</div>
Action run for 155f264 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Updates form control components to use the value of the
nameparameter for the HTMLidattribute, if theidparameter isn't set.A reduced version of PR #5171. Related to #3497.
Background
Many of the form-related components in the Design System have a functional requirement for an
idto be defined in order to associate labels, hints and error messages to them.The values are often the same, creating annoying duplication. It has led to instances of developers forgetting to set
ids and for some ports of Frontend to implement their own methods of setting defaultids: the ASP.NET Core and Jinja ports both fall back to usingnameifidisn't specified, and the Vue port automatically generates a unique ID if one isn't provided.Changes
nameattribute as the default value for theidattribute.idparameter as optional and note that it copies thenameparameter by default.Thoughts
nameparameter, instead having separate names for each of the inputs. For this component, setting anidparameter is still required.idattribute values could only contain a subset of ASCII characters and were required to start with a letter, which meant that not allnamevalues could be valididvalues. Since HTML5, this has not been the case, andids may be made up of any UTF-8 characters, with the only requirement that there be at least one character (i.e. the attribute isn't empty).ids may be invalid in particularly old browsers, however none of these browsers are within our current support list.