Merge pull request #716 from maykinmedia/fix/1617-fix-labels-html-syntax

🎨 [#1617] Fixing labels for correct HTML syntax

Author: alextreme

src/open_inwoner/components/templates/components/Form/ChoiceRadio.html

@@ -1,6 +1,6 @@
 {% load l10n form_tags %}
 
-<label class="radio">
+<div class="radio">
     {% spaceless %}
     {% initial_match as checked %}
     <input
@@ -13,4 +13,4 @@
     />
     <label class="radio__label" for="id_{{ name }}_{{ index }}">{{ choice.1 }}</label>
     {% endspaceless %}
-</label>
+</div>

src/open_inwoner/components/templates/components/Form/Input.html

@@ -3,10 +3,10 @@
 <div class="form__control {{ extra_classes|default:"" }}">
     <label class="label {% if no_label %}label--gapless{% endif %}">
         {% if icon %}{% icon icon outlined=True %}{% endif %}
-        <label class="label__label {% if no_label %}label__label--hidden{% endif %}">
+        <span class="label__label {% if no_label %}label__label--hidden{% endif %}">
             {{ field.label }}
             {% if field.field.required %}<span class="label__label--required"> * </span>{% endif %}
-        </label>
+        </span>
         {{ field|addclass:"input" }}
         {% if field.help_text and not no_help %}
             <p class="p">{{ field.help_text }}</p>

src/open_inwoner/components/templates/components/Form/Label.html

@@ -66,6 +66,11 @@
     .form .caption__content {
       color: var(--color-tinted-mute);
     }
+
+    .card__body--direction-horizontal .link .link__text {
+      text-align: right;
+      padding-left: var(--spacing-small);
+    }
   }
 
   &__img {

src/open_inwoner/scss/components/Card/Card.scss

@@ -10,7 +10,8 @@
   margin: 0;
   gap: 18px;
 
-  label {
+  label,
+  .label {
     display: flex;
     flex-direction: row;
     gap: 10px;

src/open_inwoner/scss/components/Form/MultiCheckbox.scss

@@ -24,16 +24,16 @@ <h1 class="h1">{% trans "Start nieuwe samenwerking" %}</h1>
                         <div>{% trans "Doel" %}</div>
                         <div></div>
                     </div>
-                    <label class="plan-template__row radio">
+                    <div class="label plan-template__row radio">
                         <div>
                             <input class="radio__input" type="radio" name="template" value="" id="id_template_0" {% if not form.data.template %}checked{% endif %}>
                             <label class="radio__label" for="id_template_0">Geen template</label>
                         </div>
                         <div></div>
                         <div></div>
-                    </label>
+                    </div>
                     {% for tpl_id, plan_template in form.template.field.choices %}
-                        <label class="plan-template__row radio">
+                        <div class="label plan-template__row radio">
                             <div>
                                 <input class="radio__input" type="radio" name="template" value="{{ plan_template.id }}" id="id_template_{{ plan_template.id }}"
                                        {% if tpl_id == form.data.template %}checked{% endif %}>
@@ -60,7 +60,7 @@ <h2 class="h2 modal__title" id="modal__title">{{ plan_template.name }}
                                     </div>
                                 </div>
                             </div>
-                        </label>
+                        </div>
                     {% endfor %}
                 </div>
 

src/open_inwoner/templates/pages/plans/create.html

@@ -1,5 +1,5 @@
 <input type="{{ widget.type }}" name="{{ widget.name }}" data-init="{{ widget.value|default:'' }}"{% include "django/forms/widgets/attrs.html" %}>
-<label>
+<span>
     <input type="text" name="{{ widget.init_name }}" id="{{ widget.init_id }}" {% if widget.value %} value="{{ widget.value.instance.uuid }}"{% endif %} class="message-file__init">
-</label>
+</span>
 

src/open_inwoner/templates/utils/widgets/message_file_input.html

@@ -1,5 +1,5 @@
 {% if widget.is_initial %}{{ widget.initial_text }}: <a href="{{ url }}">{{ widget.value }}</a>{% if not widget.required %}
 <input type="checkbox" name="{{ widget.checkbox_name }}" id="{{ widget.checkbox_id }}"{% if widget.attrs.disabled %} disabled{% endif %}>
-<label for="{{ widget.checkbox_id }}">{{ widget.clear_checkbox_label }}</label>{% endif %}<br>
+<span for="{{ widget.checkbox_id }}">{{ widget.clear_checkbox_label }}</span>{% endif %}<br>
 {{ widget.input_text }}:{% endif %}
 <input type="{{ widget.type }}" name="{{ widget.name }}"{% include "django/forms/widgets/attrs.html" %}>