From 5f4f6d69d6083bc8950c4897a9b430adda8b250d Mon Sep 17 00:00:00 2001
From: Ed Horsford <mail@edwardhorsford.com>
Date: Tue, 24 Sep 2024 14:36:31 +0100
Subject: [PATCH] Use paragraphs for error messages

---
 packages/components/error-message/README.md           | 4 ++--
 packages/components/error-message/_error-message.scss | 1 +
 packages/components/error-message/template.njk        | 4 ++--
 3 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/components/error-message/README.md b/packages/components/error-message/README.md
index 7def2ea14..9ea33ce95 100644
--- 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
index 9a33a5c3f..eb82f16e1 100644
--- 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
index 0b273e6d8..782ee63e6 100644
--- 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>