govuk_publishing_components 32.1.0 → 33.0.0

data/node_modules/govuk-frontend/govuk/components/error-summary/fixtures.json

@@ -16,8 +16,8 @@
                     }
                 ]
             },
-            "html": "<div class=\"govuk-error-summary\" aria-labelledby=\"error-summary-title\" role=\"alert\" data-module=\"govuk-error-summary\">\n  <h2 class=\"govuk-error-summary__title\" id=\"error-summary-title\">\n    There is a problem\n  </h2>\n  <div class=\"govuk-error-summary__body\">\n    \n    <ul class=\"govuk-list govuk-error-summary__list\">\n    \n      <li>\n      \n        <a href=\"#example-error-1\">The date your passport was issued must be in the past</a>\n      \n      </li>\n    \n      <li>\n      \n        <a href=\"#example-error-2\">Enter a postcode, like AA1 1AA</a>\n      \n      </li>\n    \n    </ul>\n  </div>\n</div>",
-            "hidden": false
+            "hidden": false,
+            "html": "<div class=\"govuk-error-summary\" data-module=\"govuk-error-summary\">\n  \n  <div role=\"alert\">\n    <h2 class=\"govuk-error-summary__title\">\n      There is a problem\n    </h2>\n    <div class=\"govuk-error-summary__body\">\n      \n      <ul class=\"govuk-list govuk-error-summary__list\">\n        \n          <li>\n          \n            <a href=\"#example-error-1\">The date your passport was issued must be in the past</a>\n          \n          </li>\n        \n          <li>\n          \n            <a href=\"#example-error-2\">Enter a postcode, like AA1 1AA</a>\n          \n          </li>\n        \n      </ul>\n    </div>\n  </div>\n</div>"
         },
         {
             "name": "without links",
@@ -29,8 +29,8 @@
                     }
                 ]
             },
-            "html": "<div class=\"govuk-error-summary\" aria-labelledby=\"error-summary-title\" role=\"alert\" data-module=\"govuk-error-summary\">\n  <h2 class=\"govuk-error-summary__title\" id=\"error-summary-title\">\n    There is a problem\n  </h2>\n  <div class=\"govuk-error-summary__body\">\n    \n    <ul class=\"govuk-list govuk-error-summary__list\">\n    \n      <li>\n      \n        Invalid username or password\n      \n      </li>\n    \n    </ul>\n  </div>\n</div>",
-            "hidden": false
+            "hidden": false,
+            "html": "<div class=\"govuk-error-summary\" data-module=\"govuk-error-summary\">\n  \n  <div role=\"alert\">\n    <h2 class=\"govuk-error-summary__title\">\n      There is a problem\n    </h2>\n    <div class=\"govuk-error-summary__body\">\n      \n      <ul class=\"govuk-list govuk-error-summary__list\">\n        \n          <li>\n          \n            Invalid username or password\n          \n          </li>\n        \n      </ul>\n    </div>\n  </div>\n</div>"
         },
         {
             "name": "mixed with and without links",
@@ -46,8 +46,8 @@
                     }
                 ]
             },
-            "html": "<div class=\"govuk-error-summary\" aria-labelledby=\"error-summary-title\" role=\"alert\" data-module=\"govuk-error-summary\">\n  <h2 class=\"govuk-error-summary__title\" id=\"error-summary-title\">\n    There is a problem\n  </h2>\n  <div class=\"govuk-error-summary__body\">\n    \n    <ul class=\"govuk-list govuk-error-summary__list\">\n    \n      <li>\n      \n        Invalid username or password\n      \n      </li>\n    \n      <li>\n      \n        <a href=\"#example-error-1\">Agree to the terms of service to log in</a>\n      \n      </li>\n    \n    </ul>\n  </div>\n</div>",
-            "hidden": false
+            "hidden": false,
+            "html": "<div class=\"govuk-error-summary\" data-module=\"govuk-error-summary\">\n  \n  <div role=\"alert\">\n    <h2 class=\"govuk-error-summary__title\">\n      There is a problem\n    </h2>\n    <div class=\"govuk-error-summary__body\">\n      \n      <ul class=\"govuk-list govuk-error-summary__list\">\n        \n          <li>\n          \n            Invalid username or password\n          \n          </li>\n        \n          <li>\n          \n            <a href=\"#example-error-1\">Agree to the terms of service to log in</a>\n          \n          </li>\n        \n      </ul>\n    </div>\n  </div>\n</div>"
         },
         {
             "name": "with everything",
@@ -64,8 +64,8 @@
                     }
                 ]
             },
-            "html": "<div class=\"govuk-error-summary\" aria-labelledby=\"error-summary-title\" role=\"alert\" data-module=\"govuk-error-summary\">\n  <h2 class=\"govuk-error-summary__title\" id=\"error-summary-title\">\n    There is a problem\n  </h2>\n  <div class=\"govuk-error-summary__body\">\n    \n    <p>\n      Please fix the errors below.\n    </p>\n    \n    <ul class=\"govuk-list govuk-error-summary__list\">\n    \n      <li>\n      \n        Invalid username or password\n      \n      </li>\n    \n      <li>\n      \n        <a href=\"#example-error-1\">Agree to the terms of service to log in</a>\n      \n      </li>\n    \n    </ul>\n  </div>\n</div>",
-            "hidden": false
+            "hidden": false,
+            "html": "<div class=\"govuk-error-summary\" data-module=\"govuk-error-summary\">\n  \n  <div role=\"alert\">\n    <h2 class=\"govuk-error-summary__title\">\n      There is a problem\n    </h2>\n    <div class=\"govuk-error-summary__body\">\n      \n        <p>\n          Please fix the errors below.\n        </p>\n      \n      <ul class=\"govuk-list govuk-error-summary__list\">\n        \n          <li>\n          \n            Invalid username or password\n          \n          </li>\n        \n          <li>\n          \n            <a href=\"#example-error-1\">Agree to the terms of service to log in</a>\n          \n          </li>\n        \n      </ul>\n    </div>\n  </div>\n</div>"
         },
         {
             "name": "html as titleText",
@@ -77,8 +77,8 @@
                     }
                 ]
             },
-            "html": "<div class=\"govuk-error-summary\" aria-labelledby=\"error-summary-title\" role=\"alert\" data-module=\"govuk-error-summary\">\n  <h2 class=\"govuk-error-summary__title\" id=\"error-summary-title\">\n    Alert, &lt;em&gt;alert&lt;/em&gt;\n  </h2>\n  <div class=\"govuk-error-summary__body\">\n    \n    <ul class=\"govuk-list govuk-error-summary__list\">\n    \n      <li>\n      \n        Invalid username or password\n      \n      </li>\n    \n    </ul>\n  </div>\n</div>",
-            "hidden": true
+            "hidden": true,
+            "html": "<div class=\"govuk-error-summary\" data-module=\"govuk-error-summary\">\n  \n  <div role=\"alert\">\n    <h2 class=\"govuk-error-summary__title\">\n      Alert, &lt;em&gt;alert&lt;/em&gt;\n    </h2>\n    <div class=\"govuk-error-summary__body\">\n      \n      <ul class=\"govuk-list govuk-error-summary__list\">\n        \n          <li>\n          \n            Invalid username or password\n          \n          </li>\n        \n      </ul>\n    </div>\n  </div>\n</div>"
         },
         {
             "name": "title html",
@@ -90,8 +90,8 @@
                     }
                 ]
             },
-            "html": "<div class=\"govuk-error-summary\" aria-labelledby=\"error-summary-title\" role=\"alert\" data-module=\"govuk-error-summary\">\n  <h2 class=\"govuk-error-summary__title\" id=\"error-summary-title\">\n    Alert, <em>alert</em>\n  </h2>\n  <div class=\"govuk-error-summary__body\">\n    \n    <ul class=\"govuk-list govuk-error-summary__list\">\n    \n      <li>\n      \n        Invalid username or password\n      \n      </li>\n    \n    </ul>\n  </div>\n</div>",
-            "hidden": true
+            "hidden": true,
+            "html": "<div class=\"govuk-error-summary\" data-module=\"govuk-error-summary\">\n  \n  <div role=\"alert\">\n    <h2 class=\"govuk-error-summary__title\">\n      Alert, <em>alert</em>\n    </h2>\n    <div class=\"govuk-error-summary__body\">\n      \n      <ul class=\"govuk-list govuk-error-summary__list\">\n        \n          <li>\n          \n            Invalid username or password\n          \n          </li>\n        \n      </ul>\n    </div>\n  </div>\n</div>"
         },
         {
             "name": "description",
@@ -104,22 +104,22 @@
                     }
                 ]
             },
-            "html": "<div class=\"govuk-error-summary\" aria-labelledby=\"error-summary-title\" role=\"alert\" data-module=\"govuk-error-summary\">\n  <h2 class=\"govuk-error-summary__title\" id=\"error-summary-title\">\n    There is a problem\n  </h2>\n  <div class=\"govuk-error-summary__body\">\n    \n    <p>\n      Lorem ipsum\n    </p>\n    \n    <ul class=\"govuk-list govuk-error-summary__list\">\n    \n      <li>\n      \n        Invalid username or password\n      \n      </li>\n    \n    </ul>\n  </div>\n</div>",
-            "hidden": true
+            "hidden": true,
+            "html": "<div class=\"govuk-error-summary\" data-module=\"govuk-error-summary\">\n  \n  <div role=\"alert\">\n    <h2 class=\"govuk-error-summary__title\">\n      There is a problem\n    </h2>\n    <div class=\"govuk-error-summary__body\">\n      \n        <p>\n          Lorem ipsum\n        </p>\n      \n      <ul class=\"govuk-list govuk-error-summary__list\">\n        \n          <li>\n          \n            Invalid username or password\n          \n          </li>\n        \n      </ul>\n    </div>\n  </div>\n</div>"
         },
         {
             "name": "html as descriptionText",
             "options": {
                 "titleText": "There is a problem",
-                "descriptionText": "See errors below (▼)",
+                "descriptionText": "See errors below (>)",
                 "errorList": [
                     {
                         "text": "Invalid username or password"
                     }
                 ]
             },
-            "html": "<div class=\"govuk-error-summary\" aria-labelledby=\"error-summary-title\" role=\"alert\" data-module=\"govuk-error-summary\">\n  <h2 class=\"govuk-error-summary__title\" id=\"error-summary-title\">\n    There is a problem\n  </h2>\n  <div class=\"govuk-error-summary__body\">\n    \n    <p>\n      See errors below (▼)\n    </p>\n    \n    <ul class=\"govuk-list govuk-error-summary__list\">\n    \n      <li>\n      \n        Invalid username or password\n      \n      </li>\n    \n    </ul>\n  </div>\n</div>",
-            "hidden": true
+            "hidden": true,
+            "html": "<div class=\"govuk-error-summary\" data-module=\"govuk-error-summary\">\n  \n  <div role=\"alert\">\n    <h2 class=\"govuk-error-summary__title\">\n      There is a problem\n    </h2>\n    <div class=\"govuk-error-summary__body\">\n      \n        <p>\n          See errors below (&gt;)\n        </p>\n      \n      <ul class=\"govuk-list govuk-error-summary__list\">\n        \n          <li>\n          \n            Invalid username or password\n          \n          </li>\n        \n      </ul>\n    </div>\n  </div>\n</div>"
         },
         {
             "name": "description html",
@@ -132,8 +132,8 @@
                     }
                 ]
             },
-            "html": "<div class=\"govuk-error-summary\" aria-labelledby=\"error-summary-title\" role=\"alert\" data-module=\"govuk-error-summary\">\n  <h2 class=\"govuk-error-summary__title\" id=\"error-summary-title\">\n    There is a problem\n  </h2>\n  <div class=\"govuk-error-summary__body\">\n    \n    <p>\n      See <span>errors</span> below\n    </p>\n    \n    <ul class=\"govuk-list govuk-error-summary__list\">\n    \n      <li>\n      \n        Invalid username or password\n      \n      </li>\n    \n    </ul>\n  </div>\n</div>",
-            "hidden": true
+            "hidden": true,
+            "html": "<div class=\"govuk-error-summary\" data-module=\"govuk-error-summary\">\n  \n  <div role=\"alert\">\n    <h2 class=\"govuk-error-summary__title\">\n      There is a problem\n    </h2>\n    <div class=\"govuk-error-summary__body\">\n      \n        <p>\n          See <span>errors</span> below\n        </p>\n      \n      <ul class=\"govuk-list govuk-error-summary__list\">\n        \n          <li>\n          \n            Invalid username or password\n          \n          </li>\n        \n      </ul>\n    </div>\n  </div>\n</div>"
         },
         {
             "name": "classes",
@@ -146,8 +146,8 @@
                     }
                 ]
             },
-            "html": "<div class=\"govuk-error-summary extra-class one-more-class\" aria-labelledby=\"error-summary-title\" role=\"alert\" data-module=\"govuk-error-summary\">\n  <h2 class=\"govuk-error-summary__title\" id=\"error-summary-title\">\n    There is a problem\n  </h2>\n  <div class=\"govuk-error-summary__body\">\n    \n    <ul class=\"govuk-list govuk-error-summary__list\">\n    \n      <li>\n      \n        Invalid username or password\n      \n      </li>\n    \n    </ul>\n  </div>\n</div>",
-            "hidden": true
+            "hidden": true,
+            "html": "<div class=\"govuk-error-summary extra-class one-more-class\" data-module=\"govuk-error-summary\">\n  \n  <div role=\"alert\">\n    <h2 class=\"govuk-error-summary__title\">\n      There is a problem\n    </h2>\n    <div class=\"govuk-error-summary__body\">\n      \n      <ul class=\"govuk-list govuk-error-summary__list\">\n        \n          <li>\n          \n            Invalid username or password\n          \n          </li>\n        \n      </ul>\n    </div>\n  </div>\n</div>"
         },
         {
             "name": "attributes",
@@ -163,8 +163,8 @@
                     }
                 ]
             },
-            "html": "<div class=\"govuk-error-summary\" aria-labelledby=\"error-summary-title\" role=\"alert\" first-attribute=\"foo\" second-attribute=\"bar\" data-module=\"govuk-error-summary\">\n  <h2 class=\"govuk-error-summary__title\" id=\"error-summary-title\">\n    There is a problem\n  </h2>\n  <div class=\"govuk-error-summary__body\">\n    \n    <ul class=\"govuk-list govuk-error-summary__list\">\n    \n      <li>\n      \n        Invalid username or password\n      \n      </li>\n    \n    </ul>\n  </div>\n</div>",
-            "hidden": true
+            "hidden": true,
+            "html": "<div class=\"govuk-error-summary\" first-attribute=\"foo\" second-attribute=\"bar\" data-module=\"govuk-error-summary\">\n  \n  <div role=\"alert\">\n    <h2 class=\"govuk-error-summary__title\">\n      There is a problem\n    </h2>\n    <div class=\"govuk-error-summary__body\">\n      \n      <ul class=\"govuk-list govuk-error-summary__list\">\n        \n          <li>\n          \n            Invalid username or password\n          \n          </li>\n        \n      </ul>\n    </div>\n  </div>\n</div>"
         },
         {
             "name": "error list with attributes",
@@ -181,8 +181,8 @@
                     }
                 ]
             },
-            "html": "<div class=\"govuk-error-summary\" aria-labelledby=\"error-summary-title\" role=\"alert\" data-module=\"govuk-error-summary\">\n  <h2 class=\"govuk-error-summary__title\" id=\"error-summary-title\">\n    There is a problem\n  </h2>\n  <div class=\"govuk-error-summary__body\">\n    \n    <ul class=\"govuk-list govuk-error-summary__list\">\n    \n      <li>\n      \n        <a href=\"#item\" data-attribute=\"my-attribute\" data-attribute-2=\"my-attribute-2\">Error-1</a>\n      \n      </li>\n    \n    </ul>\n  </div>\n</div>",
-            "hidden": true
+            "hidden": true,
+            "html": "<div class=\"govuk-error-summary\" data-module=\"govuk-error-summary\">\n  \n  <div role=\"alert\">\n    <h2 class=\"govuk-error-summary__title\">\n      There is a problem\n    </h2>\n    <div class=\"govuk-error-summary__body\">\n      \n      <ul class=\"govuk-list govuk-error-summary__list\">\n        \n          <li>\n          \n            <a href=\"#item\" data-attribute=\"my-attribute\" data-attribute-2=\"my-attribute-2\">Error-1</a>\n          \n          </li>\n        \n      </ul>\n    </div>\n  </div>\n</div>"
         },
         {
             "name": "error list with html as text",
@@ -194,8 +194,8 @@
                     }
                 ]
             },
-            "html": "<div class=\"govuk-error-summary\" aria-labelledby=\"error-summary-title\" role=\"alert\" data-module=\"govuk-error-summary\">\n  <h2 class=\"govuk-error-summary__title\" id=\"error-summary-title\">\n    There is a problem\n  </h2>\n  <div class=\"govuk-error-summary__body\">\n    \n    <ul class=\"govuk-list govuk-error-summary__list\">\n    \n      <li>\n      \n        Descriptive link to the &lt;b&gt;question&lt;/b&gt; with an error\n      \n      </li>\n    \n    </ul>\n  </div>\n</div>",
-            "hidden": true
+            "hidden": true,
+            "html": "<div class=\"govuk-error-summary\" data-module=\"govuk-error-summary\">\n  \n  <div role=\"alert\">\n    <h2 class=\"govuk-error-summary__title\">\n      There is a problem\n    </h2>\n    <div class=\"govuk-error-summary__body\">\n      \n      <ul class=\"govuk-list govuk-error-summary__list\">\n        \n          <li>\n          \n            Descriptive link to the &lt;b&gt;question&lt;/b&gt; with an error\n          \n          </li>\n        \n      </ul>\n    </div>\n  </div>\n</div>"
         },
         {
             "name": "error list with html",
@@ -207,8 +207,8 @@
                     }
                 ]
             },
-            "html": "<div class=\"govuk-error-summary\" aria-labelledby=\"error-summary-title\" role=\"alert\" data-module=\"govuk-error-summary\">\n  <h2 class=\"govuk-error-summary__title\" id=\"error-summary-title\">\n    There is a problem\n  </h2>\n  <div class=\"govuk-error-summary__body\">\n    \n    <ul class=\"govuk-list govuk-error-summary__list\">\n    \n      <li>\n      \n        The date your passport was issued <b>must</b> be in the past\n      \n      </li>\n    \n    </ul>\n  </div>\n</div>",
-            "hidden": true
+            "hidden": true,
+            "html": "<div class=\"govuk-error-summary\" data-module=\"govuk-error-summary\">\n  \n  <div role=\"alert\">\n    <h2 class=\"govuk-error-summary__title\">\n      There is a problem\n    </h2>\n    <div class=\"govuk-error-summary__body\">\n      \n      <ul class=\"govuk-list govuk-error-summary__list\">\n        \n          <li>\n          \n            The date your passport was issued <b>must</b> be in the past\n          \n          </li>\n        \n      </ul>\n    </div>\n  </div>\n</div>"
         },
         {
             "name": "error list with html link",
@@ -221,8 +221,8 @@
                     }
                 ]
             },
-            "html": "<div class=\"govuk-error-summary\" aria-labelledby=\"error-summary-title\" role=\"alert\" data-module=\"govuk-error-summary\">\n  <h2 class=\"govuk-error-summary__title\" id=\"error-summary-title\">\n    There is a problem\n  </h2>\n  <div class=\"govuk-error-summary__body\">\n    \n    <ul class=\"govuk-list govuk-error-summary__list\">\n    \n      <li>\n      \n        <a href=\"#error-1\">Descriptive link to the <b>question</b> with an error</a>\n      \n      </li>\n    \n    </ul>\n  </div>\n</div>",
-            "hidden": true
+            "hidden": true,
+            "html": "<div class=\"govuk-error-summary\" data-module=\"govuk-error-summary\">\n  \n  <div role=\"alert\">\n    <h2 class=\"govuk-error-summary__title\">\n      There is a problem\n    </h2>\n    <div class=\"govuk-error-summary__body\">\n      \n      <ul class=\"govuk-list govuk-error-summary__list\">\n        \n          <li>\n          \n            <a href=\"#error-1\">Descriptive link to the <b>question</b> with an error</a>\n          \n          </li>\n        \n      </ul>\n    </div>\n  </div>\n</div>"
         },
         {
             "name": "error list with html as text link",
@@ -235,8 +235,8 @@
                     }
                 ]
             },
-            "html": "<div class=\"govuk-error-summary\" aria-labelledby=\"error-summary-title\" role=\"alert\" data-module=\"govuk-error-summary\">\n  <h2 class=\"govuk-error-summary__title\" id=\"error-summary-title\">\n    There is a problem\n  </h2>\n  <div class=\"govuk-error-summary__body\">\n    \n    <ul class=\"govuk-list govuk-error-summary__list\">\n    \n      <li>\n      \n        <a href=\"#error-1\">Descriptive link to the &lt;b&gt;question&lt;/b&gt; with an error</a>\n      \n      </li>\n    \n    </ul>\n  </div>\n</div>",
-            "hidden": true
+            "hidden": true,
+            "html": "<div class=\"govuk-error-summary\" data-module=\"govuk-error-summary\">\n  \n  <div role=\"alert\">\n    <h2 class=\"govuk-error-summary__title\">\n      There is a problem\n    </h2>\n    <div class=\"govuk-error-summary__body\">\n      \n      <ul class=\"govuk-list govuk-error-summary__list\">\n        \n          <li>\n          \n            <a href=\"#error-1\">Descriptive link to the &lt;b&gt;question&lt;/b&gt; with an error</a>\n          \n          </li>\n        \n      </ul>\n    </div>\n  </div>\n</div>"
         },
         {
             "name": "autofocus disabled",
@@ -244,8 +244,17 @@
                 "titleText": "There is a problem",
                 "disableAutoFocus": true
             },
-            "html": "<div class=\"govuk-error-summary\" aria-labelledby=\"error-summary-title\" role=\"alert\" data-disable-auto-focus=\"true\" data-module=\"govuk-error-summary\">\n  <h2 class=\"govuk-error-summary__title\" id=\"error-summary-title\">\n    There is a problem\n  </h2>\n  <div class=\"govuk-error-summary__body\">\n    \n    <ul class=\"govuk-list govuk-error-summary__list\">\n    \n    </ul>\n  </div>\n</div>",
-            "hidden": true
+            "hidden": true,
+            "html": "<div class=\"govuk-error-summary\" data-disable-auto-focus=\"true\" data-module=\"govuk-error-summary\">\n  \n  <div role=\"alert\">\n    <h2 class=\"govuk-error-summary__title\">\n      There is a problem\n    </h2>\n    <div class=\"govuk-error-summary__body\">\n      \n      <ul class=\"govuk-list govuk-error-summary__list\">\n        \n      </ul>\n    </div>\n  </div>\n</div>"
+        },
+        {
+            "name": "autofocus explicitly enabled",
+            "options": {
+                "titleText": "There is a problem",
+                "disableAutoFocus": false
+            },
+            "hidden": true,
+            "html": "<div class=\"govuk-error-summary\" data-disable-auto-focus=\"false\" data-module=\"govuk-error-summary\">\n  \n  <div role=\"alert\">\n    <h2 class=\"govuk-error-summary__title\">\n      There is a problem\n    </h2>\n    <div class=\"govuk-error-summary__body\">\n      \n      <ul class=\"govuk-list govuk-error-summary__list\">\n        \n      </ul>\n    </div>\n  </div>\n</div>"
         }
     ]
 }

data/node_modules/govuk-frontend/govuk/components/error-summary/template.njk

@@ -1,26 +1,30 @@
 <div class="govuk-error-summary
-  {%- if params.classes %} {{ params.classes }}{% endif %}" aria-labelledby="error-summary-title" role="alert"
-  {%- if params.disableAutoFocus %} data-disable-auto-focus="true"{% endif %}
+  {%- if params.classes %} {{ params.classes }}{% endif %}"
+  {%- if params.disableAutoFocus !== undefined %} data-disable-auto-focus="{{ params.disableAutoFocus }}"{% endif %}
   {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %} data-module="govuk-error-summary">
-  <h2 class="govuk-error-summary__title" id="error-summary-title">
-    {{ params.titleHtml | safe if params.titleHtml else params.titleText }}
-  </h2>
-  <div class="govuk-error-summary__body">
-    {% if caller or params.descriptionHtml or params.descriptionText %}
-    <p>
-      {{ caller() if caller else (params.descriptionHtml | safe if params.descriptionHtml else params.descriptionText) }}
-    </p>
-    {% endif %}
-    <ul class="govuk-list govuk-error-summary__list">
-    {% for item in params.errorList %}
-      <li>
-      {% if item.href %}
-        <a href="{{ item.href }}"{% for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}>{{ item.html | safe if item.html else item.text }}</a>
-      {% else %}
-        {{ item.html | safe if item.html else item.text }}
+  {# Keep the role="alert" in a seperate child container to prevent a race condition between
+  the focusing js at the alert, resulting in information getting missed in screen reader announcements #}
+  <div role="alert">
+    <h2 class="govuk-error-summary__title">
+      {{ params.titleHtml | safe if params.titleHtml else params.titleText }}
+    </h2>
+    <div class="govuk-error-summary__body">
+      {% if caller or params.descriptionHtml or params.descriptionText %}
+        <p>
+          {{ caller() if caller else (params.descriptionHtml | safe if params.descriptionHtml else params.descriptionText) }}
+        </p>
       {% endif %}
-      </li>
-    {% endfor %}
-    </ul>
+      <ul class="govuk-list govuk-error-summary__list">
+        {% for item in params.errorList %}
+          <li>
+          {% if item.href %}
+            <a href="{{ item.href }}"{% for attribute, value in item.attributes %} {{attribute}}="{{value}}"{% endfor %}>{{ item.html | safe if item.html else item.text }}</a>
+          {% else %}
+            {{ item.html | safe if item.html else item.text }}
+          {% endif %}
+          </li>
+        {% endfor %}
+      </ul>
+    </div>
   </div>
 </div>

data/node_modules/govuk-frontend/govuk/components/fieldset/fixtures.json

@@ -8,8 +8,8 @@
                     "text": "What is your address?"
                 }
             },
-            "html": "<fieldset class=\"govuk-fieldset\">\n  \n  <legend class=\"govuk-fieldset__legend\">\n  \n    What is your address?\n  \n  </legend>\n  \n\n</fieldset>",
-            "hidden": false
+            "hidden": false,
+            "html": "<fieldset class=\"govuk-fieldset\">\n  \n  <legend class=\"govuk-fieldset__legend\">\n  \n    What is your address?\n  \n  </legend>\n  \n\n</fieldset>"
         },
         {
             "name": "styled as xl text",
@@ -19,8 +19,8 @@
                     "classes": "govuk-fieldset__legend--xl"
                 }
             },
-            "html": "<fieldset class=\"govuk-fieldset\">\n  \n  <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--xl\">\n  \n    What is your address?\n  \n  </legend>\n  \n\n</fieldset>",
-            "hidden": false
+            "hidden": false,
+            "html": "<fieldset class=\"govuk-fieldset\">\n  \n  <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--xl\">\n  \n    What is your address?\n  \n  </legend>\n  \n\n</fieldset>"
         },
         {
             "name": "styled as large text",
@@ -30,8 +30,8 @@
                     "classes": "govuk-fieldset__legend--l"
                 }
             },
-            "html": "<fieldset class=\"govuk-fieldset\">\n  \n  <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--l\">\n  \n    What is your address?\n  \n  </legend>\n  \n\n</fieldset>",
-            "hidden": false
+            "hidden": false,
+            "html": "<fieldset class=\"govuk-fieldset\">\n  \n  <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--l\">\n  \n    What is your address?\n  \n  </legend>\n  \n\n</fieldset>"
         },
         {
             "name": "styled as medium text",
@@ -41,8 +41,8 @@
                     "classes": "govuk-fieldset__legend--m"
                 }
             },
-            "html": "<fieldset class=\"govuk-fieldset\">\n  \n  <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n  \n    What is your address?\n  \n  </legend>\n  \n\n</fieldset>",
-            "hidden": false
+            "hidden": false,
+            "html": "<fieldset class=\"govuk-fieldset\">\n  \n  <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n  \n    What is your address?\n  \n  </legend>\n  \n\n</fieldset>"
         },
         {
             "name": "styled as small text",
@@ -52,8 +52,8 @@
                     "classes": "govuk-fieldset__legend--s"
                 }
             },
-            "html": "<fieldset class=\"govuk-fieldset\">\n  \n  <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--s\">\n  \n    What is your address?\n  \n  </legend>\n  \n\n</fieldset>",
-            "hidden": false
+            "hidden": false,
+            "html": "<fieldset class=\"govuk-fieldset\">\n  \n  <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--s\">\n  \n    What is your address?\n  \n  </legend>\n  \n\n</fieldset>"
         },
         {
             "name": "as page heading xl",
@@ -64,8 +64,8 @@
                     "isPageHeading": true
                 }
             },
-            "html": "<fieldset class=\"govuk-fieldset\">\n  \n  <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--xl\">\n  \n    <h1 class=\"govuk-fieldset__heading\">\n      What is your address?\n    </h1>\n  \n  </legend>\n  \n\n</fieldset>",
-            "hidden": false
+            "hidden": false,
+            "html": "<fieldset class=\"govuk-fieldset\">\n  \n  <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--xl\">\n  \n    <h1 class=\"govuk-fieldset__heading\">\n      What is your address?\n    </h1>\n  \n  </legend>\n  \n\n</fieldset>"
         },
         {
             "name": "as page heading l",
@@ -76,8 +76,8 @@
                     "isPageHeading": true
                 }
             },
-            "html": "<fieldset class=\"govuk-fieldset\">\n  \n  <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--l\">\n  \n    <h1 class=\"govuk-fieldset__heading\">\n      What is your address?\n    </h1>\n  \n  </legend>\n  \n\n</fieldset>",
-            "hidden": false
+            "hidden": false,
+            "html": "<fieldset class=\"govuk-fieldset\">\n  \n  <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--l\">\n  \n    <h1 class=\"govuk-fieldset__heading\">\n      What is your address?\n    </h1>\n  \n  </legend>\n  \n\n</fieldset>"
         },
         {
             "name": "as page heading m",
@@ -88,8 +88,8 @@
                     "isPageHeading": true
                 }
             },
-            "html": "<fieldset class=\"govuk-fieldset\">\n  \n  <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n  \n    <h1 class=\"govuk-fieldset__heading\">\n      What is your address?\n    </h1>\n  \n  </legend>\n  \n\n</fieldset>",
-            "hidden": false
+            "hidden": false,
+            "html": "<fieldset class=\"govuk-fieldset\">\n  \n  <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--m\">\n  \n    <h1 class=\"govuk-fieldset__heading\">\n      What is your address?\n    </h1>\n  \n  </legend>\n  \n\n</fieldset>"
         },
         {
             "name": "as page heading s",
@@ -100,8 +100,8 @@
                     "isPageHeading": true
                 }
             },
-            "html": "<fieldset class=\"govuk-fieldset\">\n  \n  <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--s\">\n  \n    <h1 class=\"govuk-fieldset__heading\">\n      What is your address?\n    </h1>\n  \n  </legend>\n  \n\n</fieldset>",
-            "hidden": false
+            "hidden": false,
+            "html": "<fieldset class=\"govuk-fieldset\">\n  \n  <legend class=\"govuk-fieldset__legend govuk-fieldset__legend--s\">\n  \n    <h1 class=\"govuk-fieldset__heading\">\n      What is your address?\n    </h1>\n  \n  </legend>\n  \n\n</fieldset>"
         },
         {
             "name": "as page heading without class",
@@ -111,8 +111,8 @@
                     "isPageHeading": true
                 }
             },
-            "html": "<fieldset class=\"govuk-fieldset\">\n  \n  <legend class=\"govuk-fieldset__legend\">\n  \n    <h1 class=\"govuk-fieldset__heading\">\n      What is your address?\n    </h1>\n  \n  </legend>\n  \n\n</fieldset>",
-            "hidden": false
+            "hidden": false,
+            "html": "<fieldset class=\"govuk-fieldset\">\n  \n  <legend class=\"govuk-fieldset__legend\">\n  \n    <h1 class=\"govuk-fieldset__heading\">\n      What is your address?\n    </h1>\n  \n  </legend>\n  \n\n</fieldset>"
         },
         {
             "name": "html fieldset content",
@@ -122,16 +122,19 @@
                 },
                 "html": "<div class=\"my-content\">\n  <p>This is some content to put inside the fieldset</p>\n</div>\n"
             },
-            "html": "<fieldset class=\"govuk-fieldset\">\n  \n  <legend class=\"govuk-fieldset__legend\">\n  \n    What is your address?\n  \n  </legend>\n  \n\n  <div class=\"my-content\">\n  <p>This is some content to put inside the fieldset</p>\n</div>\n\n\n</fieldset>",
-            "hidden": true
+            "hidden": true,
+            "html": "<fieldset class=\"govuk-fieldset\">\n  \n  <legend class=\"govuk-fieldset__legend\">\n  \n    What is your address?\n  \n  </legend>\n  \n\n  <div class=\"my-content\">\n  <p>This is some content to put inside the fieldset</p>\n</div>\n\n\n</fieldset>"
         },
         {
             "name": "with describedBy",
             "options": {
-                "describedBy": "some-id"
+                "describedBy": "some-id",
+                "legend": {
+                    "text": "Which option?"
+                }
             },
-            "html": "<fieldset class=\"govuk-fieldset\" aria-describedby=\"some-id\">\n  \n\n</fieldset>",
-            "hidden": true
+            "hidden": true,
+            "html": "<fieldset class=\"govuk-fieldset\" aria-describedby=\"some-id\">\n  \n  <legend class=\"govuk-fieldset__legend\">\n  \n    Which option?\n  \n  </legend>\n  \n\n</fieldset>"
         },
         {
             "name": "html as text",
@@ -140,8 +143,8 @@
                     "text": "What is <b>your</b> address?"
                 }
             },
-            "html": "<fieldset class=\"govuk-fieldset\">\n  \n  <legend class=\"govuk-fieldset__legend\">\n  \n    What is &lt;b&gt;your&lt;/b&gt; address?\n  \n  </legend>\n  \n\n</fieldset>",
-            "hidden": true
+            "hidden": true,
+            "html": "<fieldset class=\"govuk-fieldset\">\n  \n  <legend class=\"govuk-fieldset__legend\">\n  \n    What is &lt;b&gt;your&lt;/b&gt; address?\n  \n  </legend>\n  \n\n</fieldset>"
         },
         {
             "name": "html",
@@ -150,8 +153,8 @@
                     "html": "What is <b>your</b> address?"
                 }
             },
-            "html": "<fieldset class=\"govuk-fieldset\">\n  \n  <legend class=\"govuk-fieldset__legend\">\n  \n    What is <b>your</b> address?\n  \n  </legend>\n  \n\n</fieldset>",
-            "hidden": true
+            "hidden": true,
+            "html": "<fieldset class=\"govuk-fieldset\">\n  \n  <legend class=\"govuk-fieldset__legend\">\n  \n    What is <b>your</b> address?\n  \n  </legend>\n  \n\n</fieldset>"
         },
         {
             "name": "legend classes",
@@ -161,34 +164,43 @@
                     "classes": "my-custom-class"
                 }
             },
-            "html": "<fieldset class=\"govuk-fieldset\">\n  \n  <legend class=\"govuk-fieldset__legend my-custom-class\">\n  \n    What is your address?\n  \n  </legend>\n  \n\n</fieldset>",
-            "hidden": true
+            "hidden": true,
+            "html": "<fieldset class=\"govuk-fieldset\">\n  \n  <legend class=\"govuk-fieldset__legend my-custom-class\">\n  \n    What is your address?\n  \n  </legend>\n  \n\n</fieldset>"
         },
         {
             "name": "classes",
             "options": {
-                "classes": "app-fieldset--custom-modifier"
+                "classes": "app-fieldset--custom-modifier",
+                "legend": {
+                    "text": "Which option?"
+                }
             },
-            "html": "<fieldset class=\"govuk-fieldset app-fieldset--custom-modifier\">\n  \n\n</fieldset>",
-            "hidden": true
+            "hidden": true,
+            "html": "<fieldset class=\"govuk-fieldset app-fieldset--custom-modifier\">\n  \n  <legend class=\"govuk-fieldset__legend\">\n  \n    Which option?\n  \n  </legend>\n  \n\n</fieldset>"
         },
         {
             "name": "role",
             "options": {
-                "role": "group"
+                "role": "group",
+                "legend": {
+                    "text": "Which option?"
+                }
             },
-            "html": "<fieldset class=\"govuk-fieldset\" role=\"group\">\n  \n\n</fieldset>",
-            "hidden": true
+            "hidden": true,
+            "html": "<fieldset class=\"govuk-fieldset\" role=\"group\">\n  \n  <legend class=\"govuk-fieldset__legend\">\n  \n    Which option?\n  \n  </legend>\n  \n\n</fieldset>"
         },
         {
             "name": "attributes",
             "options": {
                 "attributes": {
                     "data-attribute": "value"
+                },
+                "legend": {
+                    "text": "Which option?"
                 }
             },
-            "html": "<fieldset class=\"govuk-fieldset\" data-attribute=\"value\">\n  \n\n</fieldset>",
-            "hidden": true
+            "hidden": true,
+            "html": "<fieldset class=\"govuk-fieldset\" data-attribute=\"value\">\n  \n  <legend class=\"govuk-fieldset__legend\">\n  \n    Which option?\n  \n  </legend>\n  \n\n</fieldset>"
         }
     ]
 }