[#2829] Restructured captcha for error-styling and accessibility

maykinmedia · Oct 22, 2024 · a36f7c3 · a36f7c3
1 parent 16de4dc
commit a36f7c3
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 18 deletions.
diff --git a/src/open_inwoner/components/templates/components/Contact/ContactForm.html b/src/open_inwoner/components/templates/components/Contact/ContactForm.html
@@ -26,18 +26,18 @@
                 {% if form_object.captcha %}
                     <div class="form__control ">
                         <div class="captcha">
-                            <label class="label captcha__label">
+                            <p class="utrecht-paragraph">
                                 {{ form_object.captcha.label }}<span class="label__label--required"> * </span>
+                            </p>
+                            <label class="label captcha__label">
+                                <span class="captcha__check">
+                                    {{ form_object.captcha.field.question }}
+                                    <span class="captcha__input">{% field_as_widget form_object.captcha "input" form_id %}</span>
+                                </span>
+                                {% if form_object.captcha.errors %}
+                                    {% errors errors=form_object.captcha.errors %}
+                                {% endif %}
                             </label>
-                            <div class="captcha__check">
-                                <div>
-                                    <span class="captcha__prompt">{{ form_object.captcha.field.question }}</span>
-                                </div>
-                                <span class="captcha__input">{% field_as_widget form_object.captcha "input" form_id %}</span>
-                            </div>
-                            {% if form_object.captcha.errors %}
-                                {% errors errors=form_object.captcha.errors %}
-                            {% endif %}
                         </div>
                     </div>
                 {% endif %}

diff --git a/src/open_inwoner/scss/components/Captcha/Captcha.scss b/src/open_inwoner/scss/components/Captcha/Captcha.scss
@@ -3,19 +3,13 @@
   flex-direction: column;
   gap: var(--spacing-medium);
 
-  .__label {
-    display: flex;
-  }
-
   &__check {
     display: flex;
     align-items: center;
+    font-weight: bold;
     justify-content: start;
     gap: var(--spacing-large);
-  }
-
-  &__prompt {
-    font-weight: bold;
+    margin-bottom: var(--spacing-medium);
   }
 
   &__input .input {