From f349f119665737ff72fab16b36febaf25d93eda7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20P=C3=A9ters?= <fpeters@entrouvert.com>
Date: Tue, 12 Apr 2022 08:06:26 +0200
Subject: [PATCH] forms/a11y: include error message in a <p>, and align icon
 (#63820)

---
 gadjo/static/css/_forms.scss      | 15 ++++++++++-----
 gadjo/templates/gadjo/widget.html |  4 ++--
 2 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/gadjo/static/css/_forms.scss b/gadjo/static/css/_forms.scss
index 54d032f..acf5adc 100644
--- a/gadjo/static/css/_forms.scss
+++ b/gadjo/static/css/_forms.scss
@@ -49,12 +49,17 @@ div.error {
 	background: transparent;
 	padding-left: 0px;
 	margin-left: 2px;
-}
 
-div.error::before {
-	content: "\f071"; /* fa-exclamation-triangle */
-	font-family: FontAwesome;
-	padding-right: 1ex;
+	&::before {
+		content: "\f071"; /* fa-exclamation-triangle */
+		font-family: FontAwesome;
+		padding-right: 1ex;
+	}
+
+	p {
+		display: inline-block;
+		margin: 0;
+	}
 }
 
 span.required {
diff --git a/gadjo/templates/gadjo/widget.html b/gadjo/templates/gadjo/widget.html
index 766b2cf..26eefe1 100644
--- a/gadjo/templates/gadjo/widget.html
+++ b/gadjo/templates/gadjo/widget.html
@@ -19,11 +19,11 @@
   <div class="content" aria-labelledby="{{ field.name }}" {% block widget-attrs %}{% endblock %}>
     {% block widget-error %}
     {% if field.errors %}
-    <div class="error">
+    <div class="error"><p>
       {% for error in field.errors %}
       {{ error }}{% if not forloop.last %}<br>{% endif %}
       {% endfor %}
-    </div>
+    </p></div>
     {% endif %}
     {% endblock %}
     {% block widget-control %}