forms/a11y: include error message in a <p>, and align icon (#63820)

This commit is contained in:
Frédéric Péters 2022-04-12 08:06:26 +02:00
parent 6e1ba3a2f0
commit f349f11966
2 changed files with 12 additions and 7 deletions

View File

@ -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 {

View File

@ -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 %}