search

alphagov / govuk-frontend

GOV.UK Frontend contains the code you need to start building a user interface for government platforms and services.
https://frontend.design-system.service.gov.uk/
MIT License
1.17k stars 320 forks source link

[WIP] Define default `id` parameter values for various components #5171

Open querkmachine opened 2 months ago

querkmachine commented 2 months ago

Many components in the Design System have a functional requirement for an id to be defined in order to work correctly. Some components provide default id values if one isn't specified, whereas other components don't.

This discrepancy has led to instances of developers forgetting to set ids and for implementations and wrappers of govuk-frontend to implement their own means of setting (or not setting) default ids.

We already do this for the Checkboxes and Radios components ourselves by setting the idPrefix to match the name parameter by default.

Related to #3497.

Changes

Components changed

Previously, all of these components required an id attribute to work as expected and/or to render valid and accessible HTML.

Tabs is a bit of a weird case in that its id and idPrefix parameters were completely detached from one another, both needing setting individually even if they were the same value.

This was incongruent with similar components, where the idPrefix always falls back to the id or name. In this case, I've made it so that idPrefix falls back to match the id, and the id defaults to "tabs".

Todo

Thoughts

github-actions[bot] commented 2 months ago

:clipboard: Stats

File sizes

File Size
dist/govuk-frontend-development.min.css 112.52 KiB
dist/govuk-frontend-development.min.js 41.83 KiB
packages/govuk-frontend/dist/govuk/all.bundle.js 87.33 KiB
packages/govuk-frontend/dist/govuk/all.bundle.mjs 82.03 KiB
packages/govuk-frontend/dist/govuk/all.mjs 981 B
packages/govuk-frontend/dist/govuk/govuk-frontend-component.mjs 359 B
packages/govuk-frontend/dist/govuk/govuk-frontend.min.css 112.51 KiB
packages/govuk-frontend/dist/govuk/govuk-frontend.min.js 41.82 KiB
packages/govuk-frontend/dist/govuk/i18n.mjs 5.55 KiB
packages/govuk-frontend/dist/govuk/init.mjs 4.86 KiB

Modules

File Size (bundled) Size (minified)
all.mjs 79.16 KiB 39.79 KiB
accordion.mjs 23.5 KiB 12.39 KiB
button.mjs 5.98 KiB 2.69 KiB
character-count.mjs 22.4 KiB 9.92 KiB
checkboxes.mjs 5.83 KiB 2.83 KiB
error-summary.mjs 7.89 KiB 3.46 KiB
exit-this-page.mjs 17.1 KiB 9.26 KiB
header.mjs 4.46 KiB 2.6 KiB
notification-banner.mjs 6.26 KiB 2.62 KiB
password-input.mjs 15.15 KiB 7.25 KiB
radios.mjs 4.83 KiB 2.38 KiB
skip-link.mjs 4.39 KiB 2.18 KiB
tabs.mjs 10.05 KiB 6.06 KiB

View stats and visualisations on the review app

Action run for fcb885ef1457fe9e3108e072259c4f4223cc4d24

github-actions[bot] commented 2 months ago

Rendered HTML changes to npm package

diff --git a/packages/govuk-frontend/dist/govuk/components/accordion/template-default.html b/packages/govuk-frontend/dist/govuk/components/accordion/template-default.html
index 36bad56ef..2113da2ac 100644
--- a/packages/govuk-frontend/dist/govuk/components/accordion/template-default.html
+++ b/packages/govuk-frontend/dist/govuk/components/accordion/template-default.html
@@ -1,13 +1,13 @@
-<div class="govuk-accordion" data-module="govuk-accordion" id="default-example">
+<div class="govuk-accordion" data-module="govuk-accordion" id="accordion">
   <div class="govuk-accordion__section">
     <div class="govuk-accordion__section-header">
       <h2 class="govuk-accordion__section-heading">
-        <span class="govuk-accordion__section-button" id="default-example-heading-1">
+        <span class="govuk-accordion__section-button" id="accordion-heading-1">
           Section A
         </span>
       </h2>
     </div>
-    <div id="default-example-content-1" class="govuk-accordion__section-content">
+    <div id="accordion-content-1" class="govuk-accordion__section-content">
       <p class="govuk-body">
         We need to know your nationality so we can work out which elections you’re entitled to vote in. If you cannot provide your nationality, you’ll have to send copies of identity documents through the post.
       </p>
@@ -16,12 +16,12 @@
   <div class="govuk-accordion__section">
     <div class="govuk-accordion__section-header">
       <h2 class="govuk-accordion__section-heading">
-        <span class="govuk-accordion__section-button" id="default-example-heading-2">
+        <span class="govuk-accordion__section-button" id="accordion-heading-2">
           Section B
         </span>
       </h2>
     </div>
-    <div id="default-example-content-2" class="govuk-accordion__section-content">
+    <div id="accordion-content-2" class="govuk-accordion__section-content">
       <ul class="govuk-list govuk-list--bullet">
         <li>Example item 2</li>
       </ul>
diff --git a/packages/govuk-frontend/dist/govuk/components/date-input/template-default.html b/packages/govuk-frontend/dist/govuk/components/date-input/template-default.html
index 2809765ef..50018ee7b 100644
--- a/packages/govuk-frontend/dist/govuk/components/date-input/template-default.html
+++ b/packages/govuk-frontend/dist/govuk/components/date-input/template-default.html
@@ -1,27 +1,27 @@
 <div class="govuk-form-group">
-  <div class="govuk-date-input" id="dob">
+  <div class="govuk-date-input" id="date-input">
     <div class="govuk-date-input__item">
       <div class="govuk-form-group">
-        <label class="govuk-label govuk-date-input__label" for="dob-day">
+        <label class="govuk-label govuk-date-input__label" for="date-input-day">
           Day
         </label>
-        <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="dob-day" name="day" type="text" inputmode="numeric">
+        <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="date-input-day" name="day" type="text" inputmode="numeric">
       </div>
     </div>
     <div class="govuk-date-input__item">
       <div class="govuk-form-group">
-        <label class="govuk-label govuk-date-input__label" for="dob-month">
+        <label class="govuk-label govuk-date-input__label" for="date-input-month">
           Month
         </label>
-        <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="dob-month" name="month" type="text" inputmode="numeric">
+        <input class="govuk-input govuk-date-input__input govuk-input--width-2" id="date-input-month" name="month" type="text" inputmode="numeric">
       </div>
     </div>
     <div class="govuk-date-input__item">
       <div class="govuk-form-group">
-        <label class="govuk-label govuk-date-input__label" for="dob-year">
+        <label class="govuk-label govuk-date-input__label" for="date-input-year">
           Year
         </label>
-        <input class="govuk-input govuk-date-input__input govuk-input--width-4" id="dob-year" name="year" type="text" inputmode="numeric">
+        <input class="govuk-input govuk-date-input__input govuk-input--width-4" id="date-input-year" name="year" type="text" inputmode="numeric">
       </div>
     </div>
   </div>
diff --git a/packages/govuk-frontend/dist/govuk/components/file-upload/template-default.html b/packages/govuk-frontend/dist/govuk/components/file-upload/template-default.html
index 61ba3dedf..8ec3a9ceb 100644
--- a/packages/govuk-frontend/dist/govuk/components/file-upload/template-default.html
+++ b/packages/govuk-frontend/dist/govuk/components/file-upload/template-default.html
@@ -1,3 +1,4 @@
+
 <div class="govuk-form-group">
   <label class="govuk-label" for="file-upload-1">
     Upload a file
diff --git a/packages/govuk-frontend/dist/govuk/components/file-upload/template-with-error-message-and-hint.html b/packages/govuk-frontend/dist/govuk/components/file-upload/template-with-error-message-and-hint.html
index c3a5b6e63..836799c6e 100644
--- a/packages/govuk-frontend/dist/govuk/components/file-upload/template-with-error-message-and-hint.html
+++ b/packages/govuk-frontend/dist/govuk/components/file-upload/template-with-error-message-and-hint.html
@@ -1,3 +1,4 @@
+
 <div class="govuk-form-group govuk-form-group--error">
   <label class="govuk-label" for="file-upload-3">
     Upload a file
diff --git a/packages/govuk-frontend/dist/govuk/components/file-upload/template-with-hint-text.html b/packages/govuk-frontend/dist/govuk/components/file-upload/template-with-hint-text.html
index 952c50d0b..a080f1ffe 100644
--- a/packages/govuk-frontend/dist/govuk/components/file-upload/template-with-hint-text.html
+++ b/packages/govuk-frontend/dist/govuk/components/file-upload/template-with-hint-text.html
@@ -1,3 +1,4 @@
+
 <div class="govuk-form-group">
   <label class="govuk-label" for="file-upload-2">
     Upload your photo
diff --git a/packages/govuk-frontend/dist/govuk/components/file-upload/template-with-label-as-page-heading.html b/packages/govuk-frontend/dist/govuk/components/file-upload/template-with-label-as-page-heading.html
index 85845be54..46d56166b 100644
--- a/packages/govuk-frontend/dist/govuk/components/file-upload/template-with-label-as-page-heading.html
+++ b/packages/govuk-frontend/dist/govuk/components/file-upload/template-with-label-as-page-heading.html
@@ -1,3 +1,4 @@
+
 <div class="govuk-form-group">
   <h1 class="govuk-label-wrapper">
     <label class="govuk-label govuk-label--l" for="file-upload-1">
diff --git a/packages/govuk-frontend/dist/govuk/components/file-upload/template-with-optional-form-group-classes.html b/packages/govuk-frontend/dist/govuk/components/file-upload/template-with-optional-form-group-classes.html
index b5249c7b2..3a0e3c6a1 100644
--- a/packages/govuk-frontend/dist/govuk/components/file-upload/template-with-optional-form-group-classes.html
+++ b/packages/govuk-frontend/dist/govuk/components/file-upload/template-with-optional-form-group-classes.html
@@ -1,3 +1,4 @@
+
 <div class="govuk-form-group extra-class">
   <label class="govuk-label" for="file-upload-1">
     Upload a file
diff --git a/packages/govuk-frontend/dist/govuk/components/file-upload/template-with-value.html b/packages/govuk-frontend/dist/govuk/components/file-upload/template-with-value.html
index 68d350f46..4bac9938e 100644
--- a/packages/govuk-frontend/dist/govuk/components/file-upload/template-with-value.html
+++ b/packages/govuk-frontend/dist/govuk/components/file-upload/template-with-value.html
@@ -1,3 +1,4 @@
+
 <div class="govuk-form-group">
   <label class="govuk-label" for="file-upload-4">
     Upload a photo
diff --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/select/template-default.html b/packages/govuk-frontend/dist/govuk/components/select/template-default.html
index 4d093050b..4acb92d3e 100644
--- a/packages/govuk-frontend/dist/govuk/components/select/template-default.html
+++ b/packages/govuk-frontend/dist/govuk/components/select/template-default.html
@@ -1,3 +1,4 @@
+
 <div class="govuk-form-group">
   <label class="govuk-label" for="select-1">
     Label text goes here
diff --git a/packages/govuk-frontend/dist/govuk/components/select/template-with-full-width-override.html b/packages/govuk-frontend/dist/govuk/components/select/template-with-full-width-override.html
index 99c41b088..b46475d71 100644
--- a/packages/govuk-frontend/dist/govuk/components/select/template-with-full-width-override.html
+++ b/packages/govuk-frontend/dist/govuk/components/select/template-with-full-width-override.html
@@ -1,3 +1,4 @@
+
 <div class="govuk-form-group">
   <label class="govuk-label" for="select-1">
     Label text goes here
diff --git a/packages/govuk-frontend/dist/govuk/components/select/template-with-hint-text-and-error-message.html b/packages/govuk-frontend/dist/govuk/components/select/template-with-hint-text-and-error-message.html
index 41ddf5c54..85fe08094 100644
--- a/packages/govuk-frontend/dist/govuk/components/select/template-with-hint-text-and-error-message.html
+++ b/packages/govuk-frontend/dist/govuk/components/select/template-with-hint-text-and-error-message.html
@@ -1,3 +1,4 @@
+
 <div class="govuk-form-group govuk-form-group--error">
   <label class="govuk-label" for="select-2">
     Label text goes here
diff --git a/packages/govuk-frontend/dist/govuk/components/select/template-with-label-as-page-heading.html b/packages/govuk-frontend/dist/govuk/components/select/template-with-label-as-page-heading.html
index 9f3e543bf..c6698f676 100644
--- a/packages/govuk-frontend/dist/govuk/components/select/template-with-label-as-page-heading.html
+++ b/packages/govuk-frontend/dist/govuk/components/select/template-with-label-as-page-heading.html
@@ -1,3 +1,4 @@
+
 <div class="govuk-form-group">
   <h1 class="govuk-label-wrapper">
     <label class="govuk-label govuk-label--l" for="select-3">
diff --git a/packages/govuk-frontend/dist/govuk/components/select/template-with-no-items.html b/packages/govuk-frontend/dist/govuk/components/select/template-with-no-items.html
index 6fd4a7caa..31d742e50 100644
--- a/packages/govuk-frontend/dist/govuk/components/select/template-with-no-items.html
+++ b/packages/govuk-frontend/dist/govuk/components/select/template-with-no-items.html
@@ -1,3 +1,4 @@
+
 <div class="govuk-form-group">
   <label class="govuk-label" for="select-1">
     Horse with no name
diff --git a/packages/govuk-frontend/dist/govuk/components/select/template-with-optional-form-group-classes.html b/packages/govuk-frontend/dist/govuk/components/select/template-with-optional-form-group-classes.html
index 2ab39b640..5a34fc6a1 100644
--- a/packages/govuk-frontend/dist/govuk/components/select/template-with-optional-form-group-classes.html
+++ b/packages/govuk-frontend/dist/govuk/components/select/template-with-optional-form-group-classes.html
@@ -1,3 +1,4 @@
+
 <div class="govuk-form-group extra-class">
   <label class="govuk-label" for="select-1">
     Label text goes here
diff --git a/packages/govuk-frontend/dist/govuk/components/select/template-with-selected-value.html b/packages/govuk-frontend/dist/govuk/components/select/template-with-selected-value.html
index 4d093050b..4acb92d3e 100644
--- a/packages/govuk-frontend/dist/govuk/components/select/template-with-selected-value.html
+++ b/packages/govuk-frontend/dist/govuk/components/select/template-with-selected-value.html
@@ -1,3 +1,4 @@
+
 <div class="govuk-form-group">
   <label class="govuk-label" for="select-1">
     Label text goes here
diff --git a/packages/govuk-frontend/dist/govuk/components/tabs/template-default.html b/packages/govuk-frontend/dist/govuk/components/tabs/template-default.html
index 31cd5352b..3017988a2 100644
--- a/packages/govuk-frontend/dist/govuk/components/tabs/template-default.html
+++ b/packages/govuk-frontend/dist/govuk/components/tabs/template-default.html
@@ -1,4 +1,4 @@
-<div class="govuk-tabs" data-module="govuk-tabs">
+<div id="tabs" class="govuk-tabs" data-module="govuk-tabs">
   <h2 class="govuk-tabs__title">
     Contents
   </h2>
diff --git a/packages/govuk-frontend/dist/govuk/components/tabs/template-tabs-with-anchor-in-panel.html b/packages/govuk-frontend/dist/govuk/components/tabs/template-tabs-with-anchor-in-panel.html
index 9ea906404..83ec33468 100644
--- a/packages/govuk-frontend/dist/govuk/components/tabs/template-tabs-with-anchor-in-panel.html
+++ b/packages/govuk-frontend/dist/govuk/components/tabs/template-tabs-with-anchor-in-panel.html
@@ -1,4 +1,4 @@
-<div class="govuk-tabs" data-module="govuk-tabs">
+<div id="tabs" class="govuk-tabs" data-module="govuk-tabs">
   <h2 class="govuk-tabs__title">
     Contents
   </h2>
diff --git a/packages/govuk-frontend/dist/govuk/components/textarea/template-default.html b/packages/govuk-frontend/dist/govuk/components/textarea/template-default.html
index 3b27ac027..a25f38190 100644
--- a/packages/govuk-frontend/dist/govuk/components/textarea/template-default.html
+++ b/packages/govuk-frontend/dist/govuk/components/textarea/template-default.html
@@ -1,3 +1,4 @@
+
 <div class="govuk-form-group">
   <label class="govuk-label" for="more-detail">
     Can you provide more detail?
diff --git a/packages/govuk-frontend/dist/govuk/components/textarea/template-with-autocomplete-attribute.html b/packages/govuk-frontend/dist/govuk/components/textarea/template-with-autocomplete-attribute.html
index 4b8839869..c33164099 100644
--- a/packages/govuk-frontend/dist/govuk/components/textarea/template-with-autocomplete-attribute.html
+++ b/packages/govuk-frontend/dist/govuk/components/textarea/template-with-autocomplete-attribute.html
@@ -1,3 +1,4 @@
+
 <div class="govuk-form-group">
   <label class="govuk-label" for="textarea-with-autocomplete-attribute">
     Full address
diff --git a/packages/govuk-frontend/dist/govuk/components/textarea/template-with-custom-rows.html b/packages/govuk-frontend/dist/govuk/components/textarea/template-with-custom-rows.html
index 747b7e241..bf1be61b8 100644
--- a/packages/govuk-frontend/dist/govuk/components/textarea/template-with-custom-rows.html
+++ b/packages/govuk-frontend/dist/govuk/components/textarea/template-with-custom-rows.html
@@ -1,3 +1,4 @@
+
 <div class="govuk-form-group">
   <label class="govuk-label" for="full-address">
     Full address
diff --git a/packages/govuk-frontend/dist/govuk/components/textarea/template-with-default-value.html b/packages/govuk-frontend/dist/govuk/components/textarea/template-with-default-value.html
index 8f84d7945..90372d438 100644
--- a/packages/govuk-frontend/dist/govuk/components/textarea/template-with-default-value.html
+++ b/packages/govuk-frontend/dist/govuk/components/textarea/template-with-default-value.html
@@ -1,3 +1,4 @@
+
 <div class="govuk-form-group">
   <label class="govuk-label" for="full-address">
     Full address
diff --git a/packages/govuk-frontend/dist/govuk/components/textarea/template-with-error-message.html b/packages/govuk-frontend/dist/govuk/components/textarea/template-with-error-message.html
index bf9316908..bf1f7b439 100644
--- a/packages/govuk-frontend/dist/govuk/components/textarea/template-with-error-message.html
+++ b/packages/govuk-frontend/dist/govuk/components/textarea/template-with-error-message.html
@@ -1,3 +1,4 @@
+
 <div class="govuk-form-group govuk-form-group--error">
   <label class="govuk-label" for="no-ni-reason">
     Why can’t you provide a National Insurance number?
diff --git a/packages/govuk-frontend/dist/govuk/components/textarea/template-with-hint.html b/packages/govuk-frontend/dist/govuk/components/textarea/template-with-hint.html
index 764f12181..2e6381e82 100644
--- a/packages/govuk-frontend/dist/govuk/components/textarea/template-with-hint.html
+++ b/packages/govuk-frontend/dist/govuk/components/textarea/template-with-hint.html
@@ -1,3 +1,4 @@
+
 <div class="govuk-form-group">
   <label class="govuk-label" for="more-detail">
     Can you provide more detail?
diff --git a/packages/govuk-frontend/dist/govuk/components/textarea/template-with-label-as-page-heading.html b/packages/govuk-frontend/dist/govuk/components/textarea/template-with-label-as-page-heading.html
index 5624b6d9d..13b8a05eb 100644
--- a/packages/govuk-frontend/dist/govuk/components/textarea/template-with-label-as-page-heading.html
+++ b/packages/govuk-frontend/dist/govuk/components/textarea/template-with-label-as-page-heading.html
@@ -1,3 +1,4 @@
+
 <div class="govuk-form-group">
   <h1 class="govuk-label-wrapper">
     <label class="govuk-label govuk-label--l" for="textarea-with-page-heading">
diff --git a/packages/govuk-frontend/dist/govuk/components/textarea/template-with-optional-form-group-classes.html b/packages/govuk-frontend/dist/govuk/components/textarea/template-with-optional-form-group-classes.html
index 9d2b81d0a..e9934040b 100644
--- a/packages/govuk-frontend/dist/govuk/components/textarea/template-with-optional-form-group-classes.html
+++ b/packages/govuk-frontend/dist/govuk/components/textarea/template-with-optional-form-group-classes.html
@@ -1,3 +1,4 @@
+
 <div class="govuk-form-group extra-class">
   <label class="govuk-label" for="textarea-with-page-heading">
     Full address
diff --git a/packages/govuk-frontend/dist/govuk/components/textarea/template-with-spellcheck-disabled.html b/packages/govuk-frontend/dist/govuk/components/textarea/template-with-spellcheck-disabled.html
index 874294dae..a5f6e64ab 100644
--- a/packages/govuk-frontend/dist/govuk/components/textarea/template-with-spellcheck-disabled.html
+++ b/packages/govuk-frontend/dist/govuk/components/textarea/template-with-spellcheck-disabled.html
@@ -1,3 +1,4 @@
+
 <div class="govuk-form-group">
   <label class="govuk-label" for="textarea-with-spellcheck-disabled">
     Spellcheck is disabled
diff --git a/packages/govuk-frontend/dist/govuk/components/textarea/template-with-spellcheck-enabled.html b/packages/govuk-frontend/dist/govuk/components/textarea/template-with-spellcheck-enabled.html
index 0afbe53c5..b75907580 100644
--- a/packages/govuk-frontend/dist/govuk/components/textarea/template-with-spellcheck-enabled.html
+++ b/packages/govuk-frontend/dist/govuk/components/textarea/template-with-spellcheck-enabled.html
@@ -1,3 +1,4 @@
+
 <div class="govuk-form-group">
   <label class="govuk-label" for="textarea-with-spellcheck-enabled">
     Spellcheck is enabled

Action run for fcb885ef1457fe9e3108e072259c4f4223cc4d24

github-actions[bot] commented 2 months ago

Other changes to npm package

diff --git a/packages/govuk-frontend/dist/govuk/components/accordion/fixtures.json b/packages/govuk-frontend/dist/govuk/components/accordion/fixtures.json
index bbb340a24..0a17c240c 100644
--- a/packages/govuk-frontend/dist/govuk/components/accordion/fixtures.json
+++ b/packages/govuk-frontend/dist/govuk/components/accordion/fixtures.json
@@ -4,7 +4,6 @@
         {
             "name": "default",
             "options": {
-                "id": "default-example",
                 "items": [
                     {
                         "heading": {
@@ -28,7 +27,7 @@
             "description": "",
             "previewLayoutModifiers": [],
             "screenshot": false,
-            "html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"default-example\">\n  <div class=\"govuk-accordion__section\">\n    <div class=\"govuk-accordion__section-header\">\n      <h2 class=\"govuk-accordion__section-heading\">\n        <span class=\"govuk-accordion__section-button\" id=\"default-example-heading-1\">\n          Section A\n        </span>\n      </h2>\n    </div>\n    <div id=\"default-example-content-1\" class=\"govuk-accordion__section-content\">\n      <p class=\"govuk-body\">\n        We need to know your nationality so we can work out which elections you’re entitled to vote in. If you cannot provide your nationality, you’ll have to send copies of identity documents through the post.\n      </p>\n    </div>\n  </div>\n  <div class=\"govuk-accordion__section\">\n    <div class=\"govuk-accordion__section-header\">\n      <h2 class=\"govuk-accordion__section-heading\">\n        <span class=\"govuk-accordion__section-button\" id=\"default-example-heading-2\">\n          Section B\n        </span>\n      </h2>\n    </div>\n    <div id=\"default-example-content-2\" class=\"govuk-accordion__section-content\">\n      <ul class=\"govuk-list govuk-list--bullet\">\n        <li>Example item 2</li>\n      </ul>\n    </div>\n  </div>\n</div>"
+            "html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"accordion\">\n  <div class=\"govuk-accordion__section\">\n    <div class=\"govuk-accordion__section-header\">\n      <h2 class=\"govuk-accordion__section-heading\">\n        <span class=\"govuk-accordion__section-button\" id=\"accordion-heading-1\">\n          Section A\n        </span>\n      </h2>\n    </div>\n    <div id=\"accordion-content-1\" class=\"govuk-accordion__section-content\">\n      <p class=\"govuk-body\">\n        We need to know your nationality so we can work out which elections you’re entitled to vote in. If you cannot provide your nationality, you’ll have to send copies of identity documents through the post.\n      </p>\n    </div>\n  </div>\n  <div class=\"govuk-accordion__section\">\n    <div class=\"govuk-accordion__section-header\">\n      <h2 class=\"govuk-accordion__section-heading\">\n        <span class=\"govuk-accordion__section-button\" id=\"accordion-heading-2\">\n          Section B\n        </span>\n      </h2>\n    </div>\n    <div id=\"accordion-content-2\" class=\"govuk-accordion__section-content\">\n      <ul class=\"govuk-list govuk-list--bullet\">\n        <li>Example item 2</li>\n      </ul>\n    </div>\n  </div>\n</div>"
         },
         {
             "name": "with additional descriptions",
@@ -225,6 +224,27 @@
             "screenshot": false,
             "html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"with-translations\" data-i18n.hide-all-sections=\"Collapse all sections\" data-i18n.hide-section=\"Collapse\" data-i18n.hide-section-aria-label=\"Collapse this section\" data-i18n.show-all-sections=\"Expand all sections\" data-i18n.show-section=\"Expand\" data-i18n.show-section-aria-label=\"Expand this section\">\n  <div class=\"govuk-accordion__section\">\n    <div class=\"govuk-accordion__section-header\">\n      <h2 class=\"govuk-accordion__section-heading\">\n        <span class=\"govuk-accordion__section-button\" id=\"with-translations-heading-1\">\n          Section A\n        </span>\n      </h2>\n    </div>\n    <div id=\"with-translations-content-1\" class=\"govuk-accordion__section-content\">\n      <p class=\"govuk-body\">\n        We need to know your nationality so we can work out which elections you’re entitled to vote in. If you cannot provide your nationality, you’ll have to send copies of identity documents through the post.\n      </p>\n    </div>\n  </div>\n  <div class=\"govuk-accordion__section\">\n    <div class=\"govuk-accordion__section-header\">\n      <h2 class=\"govuk-accordion__section-heading\">\n        <span class=\"govuk-accordion__section-button\" id=\"with-translations-heading-2\">\n          Section B\n        </span>\n      </h2>\n    </div>\n    <div id=\"with-translations-content-2\" class=\"govuk-accordion__section-content\">\n      <ul class=\"govuk-list govuk-list--bullet\">\n        <li>Example item 2</li>\n      </ul>\n    </div>\n  </div>\n</div>"
         },
+        {
+            "name": "id",
+            "options": {
+                "id": "custom-id",
+                "items": [
+                    {
+                        "heading": {
+                            "text": "Section A"
+                        },
+                        "content": {
+                            "text": "Some content"
+                        }
+                    }
+                ]
+            },
+            "hidden": true,
+            "description": "",
+            "previewLayoutModifiers": [],
+            "screenshot": false,
+            "html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"custom-id\">\n  <div class=\"govuk-accordion__section\">\n    <div class=\"govuk-accordion__section-header\">\n      <h2 class=\"govuk-accordion__section-heading\">\n        <span class=\"govuk-accordion__section-button\" id=\"custom-id-heading-1\">\n          Section A\n        </span>\n      </h2>\n    </div>\n    <div id=\"custom-id-content-1\" class=\"govuk-accordion__section-content\">\n      <p class=\"govuk-body\">\n        Some content\n      </p>\n    </div>\n  </div>\n</div>"
+        },
         {
             "name": "classes",
             "options": {
diff --git a/packages/govuk-frontend/dist/govuk/components/accordion/macro-options.json b/packages/govuk-frontend/dist/govuk/components/accordion/macro-options.json
index 9a0ef5939..5c51c179e 100644
--- a/packages/govuk-frontend/dist/govuk/components/accordion/macro-options.json
+++ b/packages/govuk-frontend/dist/govuk/components/accordion/macro-options.json
@@ -2,7 +2,7 @@
     {
         "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."
     },
     {
diff --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..138d9851a 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?"
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 6a1fec053..5c2fb8768 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 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",
diff --git a/packages/govuk-frontend/dist/govuk/components/date-input/fixtures.json b/packages/govuk-frontend/dist/govuk/components/date-input/fixtures.json
index b1fd49ec5..2f154104f 100644
--- a/packages/govuk-frontend/dist/govuk/components/date-input/fixtures.json
+++ b/packages/govuk-frontend/dist/govuk/components/date-input/fixtures.json
@@ -3,14 +3,11 @@
     "fixtures": [
         {
             "name": "default",
-            "options": {
-                "id": "dob"
-            },
             "hidden": false,
             "description": "",
             "previewLayoutModifiers": [],
             "screenshot": false,
-            "html": "<div class=\"govuk-form-group\">\n  <div class=\"govuk-date-input\" id=\"dob\">\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"dob-day\">\n          Day\n        </label>\n        <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-day\" name=\"day\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"dob-month\">\n          Month\n        </label>\n        <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"dob-month\" name=\"month\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"dob-year\">\n          Year\n        </label>\n        <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"dob-year\" name=\"year\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n  </div>\n</div>"
+            "html": "<div class=\"govuk-form-group\">\n  <div class=\"govuk-date-input\" id=\"date-input\">\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"date-input-day\">\n          Day\n        </label>\n        <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"date-input-day\" name=\"day\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"date-input-month\">\n          Month\n        </label>\n        <input class=\"govuk-input govuk-date-input__input govuk-input--width-2\" id=\"date-input-month\" name=\"month\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n    <div class=\"govuk-date-input__item\">\n      <div class=\"govuk-form-group\">\n        <label class=\"govuk-label govuk-date-input__label\" for=\"date-input-year\">\n          Year\n        </label>\n        <input class=\"govuk-input govuk-date-input__input govuk-input--width-4\" id=\"date-input-year\" name=\"year\" type=\"text\" inputmode=\"numeric\">\n      </div>\n    </div>\n  </div>\n</div>"
         },
         {
             "name": "complete question",
diff --git a/packages/govuk-frontend/dist/govuk/components/date-input/macro-options.json b/packages/govuk-frontend/dist/govuk/components/date-input/macro-options.json
index afa2fc013..2b437a106 100644
--- a/packages/govuk-frontend/dist/govuk/components/date-input/macro-options.json
+++ b/packages/govuk-frontend/dist/govuk/components/date-input/macro-options.json
@@ -2,8 +2,8 @@
     {
         "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",
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..4dbf10cc9 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"
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 5db62cb10..ebb7ac63a 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 matching `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..45aa1a313 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",
@@ -480,6 +479,21 @@
             "screenshot": false,
             "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"input-with-extra-letter-spacing\">\n    National insurance number\n  </label>\n  <input class=\"govuk-input govuk-input--width-30 govuk-input--extra-letter-spacing\" id=\"input-with-extra-letter-spacing\" name=\"\" type=\"text\" value=\"QQ 12 34 56 C\">\n</div>"
         },
+        {
+            "name": "id",
+            "options": {
+                "id": "test-id",
+                "name": "different-name",
+                "label": {
+                    "text": "With custom ID"
+                }
+            },
+            "hidden": true,
+            "description": "",
+            "previewLayoutModifiers": [],
+            "screenshot": false,
+            "html": "<div class=\"govuk-form-group\">\n  <label class=\"govuk-label\" for=\"test-id\">\n    With custom ID\n  </label>\n  <input class=\"govuk-input\" id=\"test-id\" name=\"different-name\" type=\"text\">\n</div>"
+        },
         {
             "name": "classes",
             "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 c76a2c90f..4aa3ca050 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 matching `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..b039c1de1 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"
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..e49a0ce9c 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 each select box. Defaults to matching `name`."
     },
     {
         "name": "name",
diff --git a/packages/govuk-frontend/dist/govuk/components/tabs/fixtures.json b/packages/govuk-frontend/dist/govuk/components/tabs/fixtures.json
index c8ee18c19..e79ebe9ba 100644
--- a/packages/govuk-frontend/dist/govuk/components/tabs/fixtures.json
+++ b/packages/govuk-frontend/dist/govuk/components/tabs/fixtures.json
@@ -39,7 +39,7 @@
             "description": "",
             "previewLayoutModifiers": [],
             "screenshot": false,
-            "html": "<div class=\"govuk-tabs\" data-module=\"govuk-tabs\">\n  <h2 class=\"govuk-tabs__title\">\n    Contents\n  </h2>\n  <ul class=\"govuk-tabs__list\">\n    <li class=\"govuk-tabs__list-item govuk-tabs__list-item--selected\">\n      <a class=\"govuk-tabs__tab\" href=\"#past-day\">\n        Past day\n      </a>\n    </li>\n    <li class=\"govuk-tabs__list-item\">\n      <a class=\"govuk-tabs__tab\" href=\"#past-week\">\n        Past week\n      </a>\n    </li>\n    <li class=\"govuk-tabs__list-item\">\n      <a class=\"govuk-tabs__tab\" href=\"#past-month\">\n        Past month\n      </a>\n    </li>\n    <li class=\"govuk-tabs__list-item\">\n      <a class=\"govuk-tabs__tab\" href=\"#past-year\">\n        Past year\n      </a>\n    </li>\n  </ul>\n  <div class=\"govuk-tabs__panel\" id=\"past-day\">\n    <h2 class=\"govuk-heading-l\">Past day</h2>\n    <table class=\"govuk-table\">\n      <thead class=\"govuk-table__head\">\n        <tr class=\"govuk-table__row\">\n          <th class=\"govuk-table__header\" scope=\"col\">Case manager</th>\n          <th class=\"govuk-table__header\" scope=\"col\">Cases opened</th>\n          <th class=\"govuk-table__header\" scope=\"col\">Cases closed</th>\n        </tr>\n      </thead>\n      <tbody class=\"govuk-table__body\">\n        <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__cell\">David Francis</td>\n          <td class=\"govuk-table__cell\">3</td>\n          <td class=\"govuk-table__cell\">0</td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__cell\">Paul Farmer</td>\n          <td class=\"govuk-table__cell\">1</td>\n          <td class=\"govuk-table__cell\">0</td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__cell\">Rita Patel</td>\n          <td class=\"govuk-table__cell\">2</td>\n          <td class=\"govuk-table__cell\">0</td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n  <div class=\"govuk-tabs__panel govuk-tabs__panel--hidden\" id=\"past-week\">\n    <h2 class=\"govuk-heading-l\">Past week</h2>\n    <table class=\"govuk-table\">\n      <thead class=\"govuk-table__head\">\n        <tr class=\"govuk-table__row\">\n          <th class=\"govuk-table__header\" scope=\"col\">Case manager</th>\n          <th class=\"govuk-table__header\" scope=\"col\">Cases opened</th>\n          <th class=\"govuk-table__header\" scope=\"col\">Cases closed</th>\n        </tr>\n      </thead>\n      <tbody class=\"govuk-table__body\">\n        <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__cell\">David Francis</td>\n          <td class=\"govuk-table__cell\">24</td>\n          <td class=\"govuk-table__cell\">18</td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__cell\">Paul Farmer</td>\n          <td class=\"govuk-table__cell\">16</td>\n          <td class=\"govuk-table__cell\">20</td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__cell\">Rita Patel</td>\n          <td class=\"govuk-table__cell\">24</td>\n          <td class=\"govuk-table__cell\">27</td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n  <div class=\"govuk-tabs__panel govuk-tabs__panel--hidden\" id=\"past-month\">\n    <h2 class=\"govuk-heading-l\">Past month</h2>\n    <table class=\"govuk-table\">\n      <thead class=\"govuk-table__head\">\n        <tr class=\"govuk-table__row\">\n          <th class=\"govuk-table__header\" scope=\"col\">Case manager</th>\n          <th class=\"govuk-table__header\" scope=\"col\">Cases opened</th>\n          <th class=\"govuk-table__header\" scope=\"col\">Cases closed</th>\n        </tr>\n      </thead>\n      <tbody class=\"govuk-table__body\">\n        <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__cell\">David Francis</td>\n          <td class=\"govuk-table__cell\">98</td>\n          <td class=\"govuk-table__cell\">95</td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__cell\">Paul Farmer</td>\n          <td class=\"govuk-table__cell\">122</td>\n          <td class=\"govuk-table__cell\">131</td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__cell\">Rita Patel</td>\n          <td class=\"govuk-table__cell\">126</td>\n          <td class=\"govuk-table__cell\">142</td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n  <div class=\"govuk-tabs__panel govuk-tabs__panel--hidden\" id=\"past-year\">\n    <p class=\"govuk-body\">There is no data for this year yet, check back later</p>\n  </div>\n</div>"
+            "html": "<div id=\"tabs\" class=\"govuk-tabs\" data-module=\"govuk-tabs\">\n  <h2 class=\"govuk-tabs__title\">\n    Contents\n  </h2>\n  <ul class=\"govuk-tabs__list\">\n    <li class=\"govuk-tabs__list-item govuk-tabs__list-item--selected\">\n      <a class=\"govuk-tabs__tab\" href=\"#past-day\">\n        Past day\n      </a>\n    </li>\n    <li class=\"govuk-tabs__list-item\">\n      <a class=\"govuk-tabs__tab\" href=\"#past-week\">\n        Past week\n      </a>\n    </li>\n    <li class=\"govuk-tabs__list-item\">\n      <a class=\"govuk-tabs__tab\" href=\"#past-month\">\n        Past month\n      </a>\n    </li>\n    <li class=\"govuk-tabs__list-item\">\n      <a class=\"govuk-tabs__tab\" href=\"#past-year\">\n        Past year\n      </a>\n    </li>\n  </ul>\n  <div class=\"govuk-tabs__panel\" id=\"past-day\">\n    <h2 class=\"govuk-heading-l\">Past day</h2>\n    <table class=\"govuk-table\">\n      <thead class=\"govuk-table__head\">\n        <tr class=\"govuk-table__row\">\n          <th class=\"govuk-table__header\" scope=\"col\">Case manager</th>\n          <th class=\"govuk-table__header\" scope=\"col\">Cases opened</th>\n          <th class=\"govuk-table__header\" scope=\"col\">Cases closed</th>\n        </tr>\n      </thead>\n      <tbody class=\"govuk-table__body\">\n        <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__cell\">David Francis</td>\n          <td class=\"govuk-table__cell\">3</td>\n          <td class=\"govuk-table__cell\">0</td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__cell\">Paul Farmer</td>\n          <td class=\"govuk-table__cell\">1</td>\n          <td class=\"govuk-table__cell\">0</td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__cell\">Rita Patel</td>\n          <td class=\"govuk-table__cell\">2</td>\n          <td class=\"govuk-table__cell\">0</td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n  <div class=\"govuk-tabs__panel govuk-tabs__panel--hidden\" id=\"past-week\">\n    <h2 class=\"govuk-heading-l\">Past week</h2>\n    <table class=\"govuk-table\">\n      <thead class=\"govuk-table__head\">\n        <tr class=\"govuk-table__row\">\n          <th class=\"govuk-table__header\" scope=\"col\">Case manager</th>\n          <th class=\"govuk-table__header\" scope=\"col\">Cases opened</th>\n          <th class=\"govuk-table__header\" scope=\"col\">Cases closed</th>\n        </tr>\n      </thead>\n      <tbody class=\"govuk-table__body\">\n        <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__cell\">David Francis</td>\n          <td class=\"govuk-table__cell\">24</td>\n          <td class=\"govuk-table__cell\">18</td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__cell\">Paul Farmer</td>\n          <td class=\"govuk-table__cell\">16</td>\n          <td class=\"govuk-table__cell\">20</td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__cell\">Rita Patel</td>\n          <td class=\"govuk-table__cell\">24</td>\n          <td class=\"govuk-table__cell\">27</td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n  <div class=\"govuk-tabs__panel govuk-tabs__panel--hidden\" id=\"past-month\">\n    <h2 class=\"govuk-heading-l\">Past month</h2>\n    <table class=\"govuk-table\">\n      <thead class=\"govuk-table__head\">\n        <tr class=\"govuk-table__row\">\n          <th class=\"govuk-table__header\" scope=\"col\">Case manager</th>\n          <th class=\"govuk-table__header\" scope=\"col\">Cases opened</th>\n          <th class=\"govuk-table__header\" scope=\"col\">Cases closed</th>\n        </tr>\n      </thead>\n      <tbody class=\"govuk-table__body\">\n        <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__cell\">David Francis</td>\n          <td class=\"govuk-table__cell\">98</td>\n          <td class=\"govuk-table__cell\">95</td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__cell\">Paul Farmer</td>\n          <td class=\"govuk-table__cell\">122</td>\n          <td class=\"govuk-table__cell\">131</td>\n        </tr>\n        <tr class=\"govuk-table__row\">\n          <td class=\"govuk-table__cell\">Rita Patel</td>\n          <td class=\"govuk-table__cell\">126</td>\n          <td class=\"govuk-table__cell\">142</td>\n        </tr>\n      </tbody>\n    </table>\n  </div>\n  <div class=\"govuk-tabs__panel govuk-tabs__panel--hidden\" id=\"past-year\">\n    <p class=\"govuk-body\">There is no data for this year yet, check back later</p>\n  </div>\n</div>"
         },
         {
             "name": "tabs-with-anchor-in-panel",
@@ -65,7 +65,7 @@
             "description": "Ensure that anchors that are in tab panels work correctly",
             "previewLayoutModifiers": [],
             "screenshot": false,
-            "html": "<div class=\"govuk-tabs\" data-module=\"govuk-tabs\">\n  <h2 class=\"govuk-tabs__title\">\n    Contents\n  </h2>\n  <ul class=\"govuk-tabs__list\">\n    <li class=\"govuk-tabs__list-item govuk-tabs__list-item--selected\">\n      <a class=\"govuk-tabs__tab\" href=\"#tab-1\">\n        Tab 1\n      </a>\n    </li>\n    <li class=\"govuk-tabs__list-item\">\n      <a class=\"govuk-tabs__tab\" href=\"#tab-2\">\n        Tab 2\n      </a>\n    </li>\n  </ul>\n  <div class=\"govuk-tabs__panel\" id=\"tab-1\">\n    <h2 class=\"govuk-heading-l\">Tab 1</h2>\n    <p class=\"govuk-body\">Testing that when you click the anchor it moves to the anchor point successfully</p>\n    <p class=\"govuk-body\"><a class=\"govuk-link\" href=\"#anchor\">Anchor</a></p>\n    <p class=\"govuk-body\"><a id=\"anchor\" tabindex=\"0\">Anchor Point</a></p>\n  </div>\n  <div class=\"govuk-tabs__panel govuk-tabs__panel--hidden\" id=\"tab-2\">\n    <h2 class=\"govuk-heading-l\">Tab 2</h2>\n  </div>\n</div>"
+            "html": "<div id=\"tabs\" class=\"govuk-tabs\" data-module=\"govuk-tabs\">\n  <h2 class=\"govuk-tabs__title\">\n    Contents\n  </h2>\n  <ul class=\"govuk-tabs__list\">\n    <li class=\"govuk-tabs__list-item govuk-tabs__list-item--selected\">\n      <a class=\"govuk-tabs__tab\" href=\"#tab-1\">\n        Tab 1\n      </a>\n    </li>\n    <li class=\"govuk-tabs__list-item\">\n      <a class=\"govuk-tabs__tab\" href=\"#tab-2\">\n        Tab 2\n      </a>\n    </li>\n  </ul>\n  <div class=\"govuk-tabs__panel\" id=\"tab-1\">\n    <h2 class=\"govuk-heading-l\">Tab 1</h2>\n    <p class=\"govuk-body\">Testing that when you click the anchor it moves to the anchor point successfully</p>\n    <p class=\"govuk-body\"><a class=\"govuk-link\" href=\"#anchor\">Anchor</a></p>\n    <p class=\"govuk-body\"><a id=\"anchor\" tabindex=\"0\">Anchor Point</a></p>\n  </div>\n  <div class=\"govuk-tabs__panel govuk-tabs__panel--hidden\" id=\"tab-2\">\n    <h2 class=\"govuk-heading-l\">Tab 2</h2>\n  </div>\n</div>"
         },
         {
             "name": "classes",
@@ -85,7 +85,7 @@
             "description": "",
             "previewLayoutModifiers": [],
             "screenshot": false,
-            "html": "<div class=\"govuk-tabs app-tabs--custom-modifier\" data-module=\"govuk-tabs\">\n  <h2 class=\"govuk-tabs__title\">\n    Contents\n  </h2>\n  <ul class=\"govuk-tabs__list\">\n    <li class=\"govuk-tabs__list-item govuk-tabs__list-item--selected\">\n      <a class=\"govuk-tabs__tab\" href=\"#tab-1\">\n        Tab 1\n      </a>\n    </li>\n  </ul>\n  <div class=\"govuk-tabs__panel\" id=\"tab-1\">\n    <p class=\"govuk-body\">Information about tabs</p>\n  </div>\n</div>"
+            "html": "<div id=\"tabs\" class=\"govuk-tabs app-tabs--custom-modifier\" data-module=\"govuk-tabs\">\n  <h2 class=\"govuk-tabs__title\">\n    Contents\n  </h2>\n  <ul class=\"govuk-tabs__list\">\n    <li class=\"govuk-tabs__list-item govuk-tabs__list-item--selected\">\n      <a class=\"govuk-tabs__tab\" href=\"#tab-1\">\n        Tab 1\n      </a>\n    </li>\n  </ul>\n  <div class=\"govuk-tabs__panel\" id=\"tab-1\">\n    <p class=\"govuk-body\">Information about tabs</p>\n  </div>\n</div>"
         },
         {
             "name": "id",
@@ -125,7 +125,7 @@
             "description": "",
             "previewLayoutModifiers": [],
             "screenshot": false,
-            "html": "<div class=\"govuk-tabs\" data-module=\"govuk-tabs\">\n  <h2 class=\"govuk-tabs__title\">\n    Custom title for Contents\n  </h2>\n  <ul class=\"govuk-tabs__list\">\n    <li class=\"govuk-tabs__list-item govuk-tabs__list-item--selected\">\n      <a class=\"govuk-tabs__tab\" href=\"#tab-1\">\n        Tab 1\n      </a>\n    </li>\n  </ul>\n  <div class=\"govuk-tabs__panel\" id=\"tab-1\">\n    <p class=\"govuk-body\">Information about tabs</p>\n  </div>\n</div>"
+            "html": "<div id=\"tabs\" class=\"govuk-tabs\" data-module=\"govuk-tabs\">\n  <h2 class=\"govuk-tabs__title\">\n    Custom title for Contents\n  </h2>\n  <ul class=\"govuk-tabs__list\">\n    <li class=\"govuk-tabs__list-item govuk-tabs__list-item--selected\">\n      <a class=\"govuk-tabs__tab\" href=\"#tab-1\">\n        Tab 1\n      </a>\n    </li>\n  </ul>\n  <div class=\"govuk-tabs__panel\" id=\"tab-1\">\n    <p class=\"govuk-body\">Information about tabs</p>\n  </div>\n</div>"
         },
         {
             "name": "attributes",
@@ -147,7 +147,7 @@
             "description": "",
             "previewLayoutModifiers": [],
             "screenshot": false,
-            "html": "<div class=\"govuk-tabs\" data-attribute=\"my data value\" data-module=\"govuk-tabs\">\n  <h2 class=\"govuk-tabs__title\">\n    Contents\n  </h2>\n  <ul class=\"govuk-tabs__list\">\n    <li class=\"govuk-tabs__list-item govuk-tabs__list-item--selected\">\n      <a class=\"govuk-tabs__tab\" href=\"#tab-1\">\n        Tab 1\n      </a>\n    </li>\n  </ul>\n  <div class=\"govuk-tabs__panel\" id=\"tab-1\">\n    <p class=\"govuk-body\">Information about tabs</p>\n  </div>\n</div>"
+            "html": "<div id=\"tabs\" class=\"govuk-tabs\" data-attribute=\"my data value\" data-module=\"govuk-tabs\">\n  <h2 class=\"govuk-tabs__title\">\n    Contents\n  </h2>\n  <ul class=\"govuk-tabs__list\">\n    <li class=\"govuk-tabs__list-item govuk-tabs__list-item--selected\">\n      <a class=\"govuk-tabs__tab\" href=\"#tab-1\">\n        Tab 1\n      </a>\n    </li>\n  </ul>\n  <div class=\"govuk-tabs__panel\" id=\"tab-1\">\n    <p class=\"govuk-body\">Information about tabs</p>\n  </div>\n</div>"
         },
         {
             "name": "item with attributes",
@@ -170,7 +170,7 @@
             "description": "",
             "previewLayoutModifiers": [],
             "screenshot": false,
-            "html": "<div class=\"govuk-tabs\" data-module=\"govuk-tabs\">\n  <h2 class=\"govuk-tabs__title\">\n    Contents\n  </h2>\n  <ul class=\"govuk-tabs__list\">\n    <li class=\"govuk-tabs__list-item govuk-tabs__list-item--selected\">\n      <a class=\"govuk-tabs__tab\" href=\"#tab-1\" data-attribute=\"my-attribute\" data-attribute-2=\"my-attribute-2\">\n        Tab 1\n      </a>\n    </li>\n  </ul>\n  <div class=\"govuk-tabs__panel\" id=\"tab-1\">\n    <p class=\"govuk-body\">Information about tabs</p>\n  </div>\n</div>"
+            "html": "<div id=\"tabs\" class=\"govuk-tabs\" data-module=\"govuk-tabs\">\n  <h2 class=\"govuk-tabs__title\">\n    Contents\n  </h2>\n  <ul class=\"govuk-tabs__list\">\n    <li class=\"govuk-tabs__list-item govuk-tabs__list-item--selected\">\n      <a class=\"govuk-tabs__tab\" href=\"#tab-1\" data-attribute=\"my-attribute\" data-attribute-2=\"my-attribute-2\">\n        Tab 1\n      </a>\n    </li>\n  </ul>\n  <div class=\"govuk-tabs__panel\" id=\"tab-1\">\n    <p class=\"govuk-body\">Information about tabs</p>\n  </div>\n</div>"
         },
         {
             "name": "panel with attributes",
@@ -193,7 +193,7 @@
             "description": "",
             "previewLayoutModifiers": [],
             "screenshot": false,
-            "html": "<div class=\"govuk-tabs\" data-module=\"govuk-tabs\">\n  <h2 class=\"govuk-tabs__title\">\n    Contents\n  </h2>\n  <ul class=\"govuk-tabs__list\">\n    <li class=\"govuk-tabs__list-item govuk-tabs__list-item--selected\">\n      <a class=\"govuk-tabs__tab\" href=\"#tab-1\">\n        Tab 1\n      </a>\n    </li>\n  </ul>\n  <div class=\"govuk-tabs__panel\" id=\"tab-1\" data-attribute=\"my-attribute\" data-attribute-2=\"my-attribute-2\">\n    <p class=\"govuk-body\">Panel text</p>\n  </div>\n</div>"
+            "html": "<div id=\"tabs\" class=\"govuk-tabs\" data-module=\"govuk-tabs\">\n  <h2 class=\"govuk-tabs__title\">\n    Contents\n  </h2>\n  <ul class=\"govuk-tabs__list\">\n    <li class=\"govuk-tabs__list-item govuk-tabs__list-item--selected\">\n      <a class=\"govuk-tabs__tab\" href=\"#tab-1\">\n        Tab 1\n      </a>\n    </li>\n  </ul>\n  <div class=\"govuk-tabs__panel\" id=\"tab-1\" data-attribute=\"my-attribute\" data-attribute-2=\"my-attribute-2\">\n    <p class=\"govuk-body\">Panel text</p>\n  </div>\n</div>"
         },
         {
             "name": "no item list",
@@ -216,7 +216,7 @@
             "description": "",
             "previewLayoutModifiers": [],
             "screenshot": false,
-            "html": "<div class=\"govuk-tabs\" data-module=\"govuk-tabs\">\n  <h2 class=\"govuk-tabs__title\">\n    Contents\n  </h2>\n</div>"
+            "html": "<div id=\"tabs\" class=\"govuk-tabs\" data-module=\"govuk-tabs\">\n  <h2 class=\"govuk-tabs__title\">\n    Contents\n  </h2>\n</div>"
         },
         {
             "name": "with falsy values",
@@ -245,7 +245,7 @@
             "description": "",
             "previewLayoutModifiers": [],
             "screenshot": false,
-            "html": "<div class=\"govuk-tabs\" data-module=\"govuk-tabs\">\n  <h2 class=\"govuk-tabs__title\">\n    Contents\n  </h2>\n  <ul class=\"govuk-tabs__list\">\n    <li class=\"govuk-tabs__list-item govuk-tabs__list-item--selected\">\n      <a class=\"govuk-tabs__tab\" href=\"#tab-1\">\n        Tab 1\n      </a>\n    </li>\n    <li class=\"govuk-tabs__list-item\">\n      <a class=\"govuk-tabs__tab\" href=\"#tab-2\">\n        Tab 2\n      </a>\n    </li>\n  </ul>\n  <div class=\"govuk-tabs__panel\" id=\"tab-1\">\n    <p class=\"govuk-body\">Panel 1 content</p>\n  </div>\n  <div class=\"govuk-tabs__panel govuk-tabs__panel--hidden\" id=\"tab-2\">\n    <p class=\"govuk-body\">Panel 2 content</p>\n  </div>\n</div>"
+            "html": "<div id=\"tabs\" class=\"govuk-tabs\" data-module=\"govuk-tabs\">\n  <h2 class=\"govuk-tabs__title\">\n    Contents\n  </h2>\n  <ul class=\"govuk-tabs__list\">\n    <li class=\"govuk-tabs__list-item govuk-tabs__list-item--selected\">\n      <a class=\"govuk-tabs__tab\" href=\"#tab-1\">\n        Tab 1\n      </a>\n    </li>\n    <li class=\"govuk-tabs__list-item\">\n      <a class=\"govuk-tabs__tab\" href=\"#tab-2\">\n        Tab 2\n      </a>\n    </li>\n  </ul>\n  <div class=\"govuk-tabs__panel\" id=\"tab-1\">\n    <p class=\"govuk-body\">Panel 1 content</p>\n  </div>\n  <div class=\"govuk-tabs__panel govuk-tabs__panel--hidden\" id=\"tab-2\">\n    <p class=\"govuk-body\">Panel 2 content</p>\n  </div>\n</div>"
         },
         {
             "name": "idPrefix",
@@ -270,7 +270,7 @@
             "description": "",
             "previewLayoutModifiers": [],
             "screenshot": false,
-            "html": "<div class=\"govuk-tabs\" data-module=\"govuk-tabs\">\n  <h2 class=\"govuk-tabs__title\">\n    Contents\n  </h2>\n  <ul class=\"govuk-tabs__list\">\n    <li class=\"govuk-tabs__list-item govuk-tabs__list-item--selected\">\n      <a class=\"govuk-tabs__tab\" href=\"#custom-1\">\n        Tab 1\n      </a>\n    </li>\n    <li class=\"govuk-tabs__list-item\">\n      <a class=\"govuk-tabs__tab\" href=\"#custom-2\">\n        Tab 2\n      </a>\n    </li>\n  </ul>\n  <div class=\"govuk-tabs__panel\" id=\"custom-1\">\n    <p class=\"govuk-body\">Panel 1 content</p>\n  </div>\n  <div class=\"govuk-tabs__panel govuk-tabs__panel--hidden\" id=\"custom-2\">\n    <p class=\"govuk-body\">Panel 2 content</p>\n  </div>\n</div>"
+            "html": "<div id=\"tabs\" class=\"govuk-tabs\" data-module=\"govuk-tabs\">\n  <h2 class=\"govuk-tabs__title\">\n    Contents\n  </h2>\n  <ul class=\"govuk-tabs__list\">\n    <li class=\"govuk-tabs__list-item govuk-tabs__list-item--selected\">\n      <a class=\"govuk-tabs__tab\" href=\"#custom-1\">\n        Tab 1\n      </a>\n    </li>\n    <li class=\"govuk-tabs__list-item\">\n      <a class=\"govuk-tabs__tab\" href=\"#custom-2\">\n        Tab 2\n      </a>\n    </li>\n  </ul>\n  <div class=\"govuk-tabs__panel\" id=\"custom-1\">\n    <p class=\"govuk-body\">Panel 1 content</p>\n  </div>\n  <div class=\"govuk-tabs__panel govuk-tabs__panel--hidden\" id=\"custom-2\">\n    <p class=\"govuk-body\">Panel 2 content</p>\n  </div>\n</div>"
         },
         {
             "name": "html as text",
@@ -296,7 +296,7 @@
             "description": "",
             "previewLayoutModifiers": [],
             "screenshot": false,
-            "html": "<div class=\"govuk-tabs\" data-module=\"govuk-tabs\">\n  <h2 class=\"govuk-tabs__title\">\n    Contents\n  </h2>\n  <ul class=\"govuk-tabs__list\">\n    <li class=\"govuk-tabs__list-item govuk-tabs__list-item--selected\">\n      <a class=\"govuk-tabs__tab\" href=\"#tab-1\">\n        Tab 1\n      </a>\n    </li>\n    <li class=\"govuk-tabs__list-item\">\n      <a class=\"govuk-tabs__tab\" href=\"#tab-2\">\n        Tab 2\n      </a>\n    </li>\n  </ul>\n  <div class=\"govuk-tabs__panel\" id=\"tab-1\">\n    <p class=\"govuk-body\">&lt;p&gt;Panel 1 content&lt;/p&gt;</p>\n  </div>\n  <div class=\"govuk-tabs__panel govuk-tabs__panel--hidden\" id=\"tab-2\">\n    <p class=\"govuk-body\">&lt;p&gt;Panel 2 content&lt;/p&gt;</p>\n  </div>\n</div>"
+            "html": "<div id=\"tabs\" class=\"govuk-tabs\" data-module=\"govuk-tabs\">\n  <h2 class=\"govuk-tabs__title\">\n    Contents\n  </h2>\n  <ul class=\"govuk-tabs__list\">\n    <li class=\"govuk-tabs__list-item govuk-tabs__list-item--selected\">\n      <a class=\"govuk-tabs__tab\" href=\"#tab-1\">\n        Tab 1\n      </a>\n    </li>\n    <li class=\"govuk-tabs__list-item\">\n      <a class=\"govuk-tabs__tab\" href=\"#tab-2\">\n        Tab 2\n      </a>\n    </li>\n  </ul>\n  <div class=\"govuk-tabs__panel\" id=\"tab-1\">\n    <p class=\"govuk-body\">&lt;p&gt;Panel 1 content&lt;/p&gt;</p>\n  </div>\n  <div class=\"govuk-tabs__panel govuk-tabs__panel--hidden\" id=\"tab-2\">\n    <p class=\"govuk-body\">&lt;p&gt;Panel 2 content&lt;/p&gt;</p>\n  </div>\n</div>"
         },
         {
             "name": "html",
@@ -322,7 +322,7 @@
             "description": "",
             "previewLayoutModifiers": [],
             "screenshot": false,
-            "html": "<div class=\"govuk-tabs\" data-module=\"govuk-tabs\">\n  <h2 class=\"govuk-tabs__title\">\n    Contents\n  </h2>\n  <ul class=\"govuk-tabs__list\">\n    <li class=\"govuk-tabs__list-item govuk-tabs__list-item--selected\">\n      <a class=\"govuk-tabs__tab\" href=\"#tab-1\">\n        Tab 1\n      </a>\n    </li>\n    <li class=\"govuk-tabs__list-item\">\n      <a class=\"govuk-tabs__tab\" href=\"#tab-2\">\n        Tab 2\n      </a>\n    </li>\n  </ul>\n  <div class=\"govuk-tabs__panel\" id=\"tab-1\">\n    <p>Panel 1 content</p>\n  </div>\n  <div class=\"govuk-tabs__panel govuk-tabs__panel--hidden\" id=\"tab-2\">\n    <p>Panel 2 content</p>\n  </div>\n</div>"
+            "html": "<div id=\"tabs\" class=\"govuk-tabs\" data-module=\"govuk-tabs\">\n  <h2 class=\"govuk-tabs__title\">\n    Contents\n  </h2>\n  <ul class=\"govuk-tabs__list\">\n    <li class=\"govuk-tabs__list-item govuk-tabs__list-item--selected\">\n      <a class=\"govuk-tabs__tab\" href=\"#tab-1\">\n        Tab 1\n      </a>\n    </li>\n    <li class=\"govuk-tabs__list-item\">\n      <a class=\"govuk-tabs__tab\" href=\"#tab-2\">\n        Tab 2\n      </a>\n    </li>\n  </ul>\n  <div class=\"govuk-tabs__panel\" id=\"tab-1\">\n    <p>Panel 1 content</p>\n  </div>\n  <div class=\"govuk-tabs__panel govuk-tabs__panel--hidden\" id=\"tab-2\">\n    <p>Panel 2 content</p>\n  </div>\n</div>"
         }
     ]
 }
diff --git a/packages/govuk-frontend/dist/govuk/components/tabs/macro-options.json b/packages/govuk-frontend/dist/govuk/components/tabs/macro-options.json
index 122e19c85..6107b60dc 100644
--- a/packages/govuk-frontend/dist/govuk/components/tabs/macro-options.json
+++ b/packages/govuk-frontend/dist/govuk/components/tabs/macro-options.json
@@ -3,13 +3,13 @@
         "name": "id",
         "type": "string",
         "required": false,
-        "description": "This is used for the main component and to compose the ID attribute for each item."
+        "description": "This is used for the main component and to compose the ID attribute for each item. Default is `\"tabs\"`."
     },
     {
         "name": "idPrefix",
         "type": "string",
         "required": false,
-        "description": "Optional prefix. This is used to prefix the `id` attribute for each tab item and panel, separated by `-`."
+        "description": "Optional prefix. This is used to prefix the `id` attribute for each tab item and panel, separated by `-`. Defaults to matching `id`."
     },
     {
         "name": "title",
diff --git a/packages/govuk-frontend/dist/govuk/components/textarea/fixtures.json b/packages/govuk-frontend/dist/govuk/components/textarea/fixtures.json
index 0a59278f5..98ed339fc 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?"
                 }
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 cfe637803..6e558bc15 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 matching `name`."
     },
     {
         "name": "name",

Action run for fcb885ef1457fe9e3108e072259c4f4223cc4d24