Merge pull request #2452 from alphagov/error-messages-paragraphs

Update error messages to use paragraph tags instead of spans
alphagov · Dec 3, 2021 · 0d71656 · 0d71656
2 parents 0421cf5 + 0cccd57
commit 0d71656
Show file tree

Hide file tree

Showing 11 changed files with 35 additions and 26 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -102,6 +102,14 @@ If you're importing JavaScript modules individually, you should check any refere
 
 This change was introduced in [pull request #2426: Rename exported JavaScript modules to include component name](https://github.com/alphagov/govuk-frontend/pull/2426). Thanks to [Alex Jurubita](https://github.com/alex-ju) for reporting this issue.
 
+#### Update the HTML for error messages
+
+We’ve updated the HTML for the error message component to use a paragraph element instead of a span element, as this is more semantically correct.
+
+If you’re not using Nunjucks macros, swap the `<span class="govuk-error-message">` for a `<p class="govuk-error-message">`.
+
+This change was introduced in [pull request #2452: Update error messages to use paragraph tags instead of spans](https://github.com/alphagov/govuk-frontend/pull/2452).
+
 #### Update the HTML for hints
 
 In GOV.UK Frontend v3.8.0, we [updated the HTML for hints to use a `<div>` rather than a `<span>` element, to allow the use of block elements](https://github.com/alphagov/govuk-frontend/issues/1835). We've now removed the styles which made the hint `<span>` display as block.

diff --git a/src/govuk/components/character-count/__snapshots__/template.test.js.snap b/src/govuk/components/character-count/__snapshots__/template.test.js.snap
@@ -15,11 +15,11 @@ exports[`Character count when it includes a hint renders with hint 1`] = `
 `;
 
 exports[`Character count when it includes an error message renders with error message 1`] = `
-<span id="exceeding-characters-error"
-      class="govuk-error-message"
+<p id="exceeding-characters-error"
+   class="govuk-error-message"
 >
   Please do not exceed the maximum allowed limit
-</span>
+</p>
 `;
 
 exports[`Character count with dependant components renders with label 1`] = `

diff --git a/src/govuk/components/checkboxes/__snapshots__/template.test.js.snap b/src/govuk/components/checkboxes/__snapshots__/template.test.js.snap
@@ -55,9 +55,9 @@ exports[`Checkboxes when they include a hint renders the hint 1`] = `
 `;
 
 exports[`Checkboxes when they include an error message renders the error message 1`] = `
-<span id="waste-error"
-      class="govuk-error-message"
+<p id="waste-error"
+   class="govuk-error-message"
 >
   Please select an option
-</span>
+</p>
 `;
diff --git a/src/govuk/components/date-input/__snapshots__/template.test.js.snap b/src/govuk/components/date-input/__snapshots__/template.test.js.snap
@@ -52,9 +52,9 @@ exports[`Date input when it includes a hint renders the hint 1`] = `
 `;
 
 exports[`Date input when it includes an error message renders the error message 1`] = `
-<span id="dob-errors-error"
-      class="govuk-error-message"
+<p id="dob-errors-error"
+   class="govuk-error-message"
 >
   Error message goes here
-</span>
+</p>
 `;
diff --git a/src/govuk/components/error-message/_index.scss b/src/govuk/components/error-message/_index.scss
@@ -3,6 +3,7 @@
     @include govuk-font($size: 19, $weight: bold);
 
     display: block;
+    margin-top: 0; // Reset any default browser margins for paragraphs
     margin-bottom: govuk-spacing(3);
     clear: both;
 

diff --git a/src/govuk/components/error-message/template.njk b/src/govuk/components/error-message/template.njk
@@ -1,6 +1,6 @@
 {% set visuallyHiddenText = params.visuallyHiddenText | default("Error") -%}
 
-<span {%- if params.id %} id="{{ params.id }}"{% endif %} class="govuk-error-message{%- if params.classes %} {{ params.classes }}{% endif %}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
+<p {%- if params.id %} id="{{ params.id }}"{% endif %} class="govuk-error-message{%- if params.classes %} {{ params.classes }}{% endif %}" {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor -%}>
   {% if visuallyHiddenText %}<span class="govuk-visually-hidden">{{ visuallyHiddenText }}:</span> {% endif -%}
   {{ params.html | safe if params.html else params.text }}
-</span>
+</p>
diff --git a/src/govuk/components/file-upload/__snapshots__/template.test.js.snap b/src/govuk/components/file-upload/__snapshots__/template.test.js.snap
@@ -9,11 +9,11 @@ exports[`File upload when it includes a hint renders with hint 1`] = `
 `;
 
 exports[`File upload when it includes an error message renders with error message 1`] = `
-<span id="file-upload-with-error-error"
-      class="govuk-error-message"
+<p id="file-upload-with-error-error"
+   class="govuk-error-message"
 >
   Error message
-</span>
+</p>
 `;
 
 exports[`File upload with dependant components renders with label 1`] = `

diff --git a/src/govuk/components/input/__snapshots__/template.test.js.snap b/src/govuk/components/input/__snapshots__/template.test.js.snap
@@ -9,11 +9,11 @@ exports[`Input when it includes a hint renders the hint 1`] = `
 `;
 
 exports[`Input when it includes an error message renders the error message 1`] = `
-<span id="input-with-error-message-error"
-      class="govuk-error-message"
+<p id="input-with-error-message-error"
+   class="govuk-error-message"
 >
   Error message goes here
-</span>
+</p>
 `;
 
 exports[`Input with dependant components renders with label 1`] = `

diff --git a/src/govuk/components/radios/__snapshots__/template.test.js.snap b/src/govuk/components/radios/__snapshots__/template.test.js.snap
@@ -53,9 +53,9 @@ exports[`Radios when they include a hint renders the hint 1`] = `
 `;
 
 exports[`Radios when they include an error message renders the error message 1`] = `
-<span id="example-error-message-error"
-      class="govuk-error-message"
+<p id="example-error-message-error"
+   class="govuk-error-message"
 >
   Please select an option
-</span>
+</p>
 `;
diff --git a/src/govuk/components/select/__snapshots__/template.test.js.snap b/src/govuk/components/select/__snapshots__/template.test.js.snap
@@ -9,11 +9,11 @@ exports[`Select when it includes a hint renders the hint 1`] = `
 `;
 
 exports[`Select when it includes an error message renders with error message 1`] = `
-<span id="select-with-error-error"
-      class="govuk-error-message"
+<p id="select-with-error-error"
+   class="govuk-error-message"
 >
   Error message
-</span>
+</p>
 `;
 
 exports[`Select with dependant components renders with label 1`] = `

diff --git a/src/govuk/components/textarea/__snapshots__/template.test.js.snap b/src/govuk/components/textarea/__snapshots__/template.test.js.snap
@@ -9,11 +9,11 @@ exports[`Textarea when it includes a hint renders with hint 1`] = `
 `;
 
 exports[`Textarea when it includes an error message renders with error message 1`] = `
-<span id="no-ni-reason-error"
-      class="govuk-error-message"
+<p id="no-ni-reason-error"
+   class="govuk-error-message"
 >
   You must provide an explanation
-</span>
+</p>
 `;
 
 exports[`Textarea with dependant components renders with label 1`] = `