From c6ce80572f3ecebd7e23fc9fe16a3402968bb39a Mon Sep 17 00:00:00 2001
From: Jiro Ghianni <jiro@maykinmedia.nl>
Date: Tue, 25 Jul 2023 16:19:56 +0200
Subject: [PATCH] :art: [#1617] Fixed labels for correct HTML syntax

---
 .../components/Form/ChoiceRadio.html          |  4 +--
 .../templates/components/Form/Input.html      |  4 +--
 .../templates/components/Form/Label.html      | 27 -------------------
 .../scss/components/Card/Card.scss            |  5 ++++
 .../scss/components/Form/MultiCheckbox.scss   |  3 ++-
 .../templates/pages/plans/create.html         |  8 +++---
 .../utils/widgets/message_file_input.html     |  4 +--
 .../utils/widgets/private_file_input.html     |  2 +-
 8 files changed, 18 insertions(+), 39 deletions(-)
 delete mode 100644 src/open_inwoner/components/templates/components/Form/Label.html

diff --git a/src/open_inwoner/components/templates/components/Form/ChoiceRadio.html b/src/open_inwoner/components/templates/components/Form/ChoiceRadio.html
index 5bb90adc77..85c72a2357 100644
--- a/src/open_inwoner/components/templates/components/Form/ChoiceRadio.html
+++ b/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>
diff --git a/src/open_inwoner/components/templates/components/Form/Input.html b/src/open_inwoner/components/templates/components/Form/Input.html
index 81b25c573c..845f25f009 100644
--- a/src/open_inwoner/components/templates/components/Form/Input.html
+++ b/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>
diff --git a/src/open_inwoner/components/templates/components/Form/Label.html b/src/open_inwoner/components/templates/components/Form/Label.html
deleted file mode 100644
index 61b673eccd..0000000000
--- a/src/open_inwoner/components/templates/components/Form/Label.html
+++ /dev/null
@@ -1,27 +0,0 @@
-import React, {ReactElement} from 'react';
-import './Label.scss';
-
-interface iLabelProps {
-  htmlFor?: string,
-  children?: any,
-  className?: string,
-}
-
-/**
- * Renders a label.
- * @param {iLabelProps} props
- * @return {ReactElement}
- */
-export function Label(props: iLabelProps): ReactElement {
-  const { children, htmlFor, className, ..._props } = props
-
-  const getClassNames = () => {
-    return `label ${className}`
-  }
-
-  return (
-    <label className={ getClassNames() } htmlFor={htmlFor} {..._props}>
-      {children}
-    </label>
-  );
-}
diff --git a/src/open_inwoner/scss/components/Card/Card.scss b/src/open_inwoner/scss/components/Card/Card.scss
index 4f6a740b56..7b3989ff61 100644
--- a/src/open_inwoner/scss/components/Card/Card.scss
+++ b/src/open_inwoner/scss/components/Card/Card.scss
@@ -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 {
diff --git a/src/open_inwoner/scss/components/Form/MultiCheckbox.scss b/src/open_inwoner/scss/components/Form/MultiCheckbox.scss
index 720cc8830e..1cc1589cb3 100644
--- a/src/open_inwoner/scss/components/Form/MultiCheckbox.scss
+++ b/src/open_inwoner/scss/components/Form/MultiCheckbox.scss
@@ -10,7 +10,8 @@
   margin: 0;
   gap: 18px;
 
-  label {
+  label,
+  .label {
     display: flex;
     flex-direction: row;
     gap: 10px;
diff --git a/src/open_inwoner/templates/pages/plans/create.html b/src/open_inwoner/templates/pages/plans/create.html
index c1a8a877af..ab316e6e37 100644
--- a/src/open_inwoner/templates/pages/plans/create.html
+++ b/src/open_inwoner/templates/pages/plans/create.html
@@ -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>
 
diff --git a/src/open_inwoner/templates/utils/widgets/message_file_input.html b/src/open_inwoner/templates/utils/widgets/message_file_input.html
index e2f37c7559..0eec17b12c 100644
--- a/src/open_inwoner/templates/utils/widgets/message_file_input.html
+++ b/src/open_inwoner/templates/utils/widgets/message_file_input.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>
 
diff --git a/src/open_inwoner/templates/utils/widgets/private_file_input.html b/src/open_inwoner/templates/utils/widgets/private_file_input.html
index 48d1b6111d..539154b584 100644
--- a/src/open_inwoner/templates/utils/widgets/private_file_input.html
+++ b/src/open_inwoner/templates/utils/widgets/private_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" %}>