fix labels

Author: juliawegmayr

demo/site/src/common/components/form/CheckboxField.tsx

@@ -7,10 +7,8 @@ interface CheckboxFieldProps {
 export function CheckboxField({ label, helperText }: CheckboxFieldProps): React.ReactElement {
     return (
         <div>
-            <div>
-                <input type="checkbox" />
-                {label}
-            </div>
+            <input type="checkbox" />
+            <label>{label}</label>
             {helperText && <div>{helperText}</div>}
         </div>
     );

demo/site/src/common/components/form/InputField.tsx

@@ -1,3 +1,5 @@
+import { FormattedMessage } from "react-intl";
+
 interface InputProps {
     label: React.ReactNode;
     required?: boolean;
@@ -9,10 +11,14 @@ interface InputProps {
 export function InputField({ label, required = false, placeholder, helperText, textArea = false }: InputProps): React.ReactElement {
     return (
         <div>
-            <div>
+            <label>
                 {label}
-                {!required && <span>(optional)</span>}
-            </div>
+                {!required && (
+                    <span>
+                        <FormattedMessage id="inputField.optional" defaultMessage="(optional)" />
+                    </span>
+                )}
+            </label>
             {textArea ? <textarea required={required} placeholder={placeholder} /> : <input required={required} placeholder={placeholder} />}
             {helperText && <div>{helperText}</div>}
         </div>

demo/site/src/common/components/form/SelectField.tsx

@@ -1,5 +1,6 @@
 import { SvgUse } from "@src/common/helpers/SvgUse";
 import { useState } from "react";
+import { FormattedMessage } from "react-intl";
 
 interface SelectFieldProps {
     label: React.ReactNode;
@@ -35,10 +36,14 @@ export function SelectField({
 
     return (
         <div>
-            <div>
+            <label>
                 {label}
-                {!required && <span>(optional)</span>}
-            </div>
+                {!required && (
+                    <span>
+                        <FormattedMessage id="inputField.optional" defaultMessage="(optional)" />
+                    </span>
+                )}
+            </label>
             <div>
                 <button type="button" onClick={handleToggle}>
                     <span>{selectedOption?.label || placeholder}</span>