Use paragraphs for error messages

nhsuk · Sep 24, 2024 · 5f4f6d6 · 5f4f6d6
1 parent 5180b17
commit 5f4f6d6
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 4 deletions.
diff --git a/packages/components/error-message/README.md b/packages/components/error-message/README.md
@@ -11,10 +11,10 @@ Find out more about the error message component and when to use it in the [NHS d
 ### HTML markup
 
 ```html
-<span class="nhsuk-error-message">
+<p class="nhsuk-error-message">
   <span class="nhsuk-u-visually-hidden">Error:</span>
   Error message about full name goes here
-</span>
+</p>
 ```
 
 ### Nunjucks macro

diff --git a/packages/components/error-message/_error-message.scss b/packages/components/error-message/_error-message.scss
@@ -8,5 +8,6 @@
   clear: both;
   color: $nhsuk-error-color;
   display: block;
+  margin-top: 0; // Reset any default browser margins for paragraphs
   margin-bottom: nhsuk-spacing(3);
 }
diff --git a/packages/components/error-message/template.njk b/packages/components/error-message/template.njk
@@ -2,10 +2,10 @@
 
 {% set visuallyHiddenText = params.visuallyHiddenText | default("Error") -%}
 
-<span class="nhsuk-error-message
+<p class="nhsuk-error-message
 {%- if params.classes %} {{ params.classes }}{% endif %}"
 {%- if params.id %} id="{{ params.id }}"{% endif %}
 {{- nhsukAttributes(params.attributes) }}>
   {% if visuallyHiddenText %}<span class="nhsuk-u-visually-hidden">{{ visuallyHiddenText }}:</span> {% endif -%}
   {{ params.html | safe if params.html else params.text }}
-</span>
+</p>