From a37cd3ff446d8b52b3f11a59159fe64c388c8d8b Mon Sep 17 00:00:00 2001
From: Christian Andolf <christian.andolf@scandichotels.com>
Date: Tue, 29 Oct 2024 13:35:13 +0100
Subject: [PATCH] fix: only phrasing content is allowed inside label element

---
 .../FormContent/Search/index.tsx              | 10 +++--
 .../FormContent/Voucher/index.tsx             | 37 ++++++++++++-------
 .../Forms/BookingWidget/FormContent/index.tsx |  4 +-
 .../TempDesignSystem/Form/Checkbox/index.tsx  |  8 ++--
 4 files changed, 35 insertions(+), 24 deletions(-)

diff --git a/components/Forms/BookingWidget/FormContent/Search/index.tsx b/components/Forms/BookingWidget/FormContent/Search/index.tsx
index 12d5e740c..5461426a7 100644
--- a/components/Forms/BookingWidget/FormContent/Search/index.tsx
+++ b/components/Forms/BookingWidget/FormContent/Search/index.tsx
@@ -128,10 +128,12 @@ export default function Search({ locations }: SearchProps) {
       }) => (
         <div className={styles.container}>
           <label {...getLabelProps({ htmlFor: name })} className={styles.label}>
-            <Caption color={isOpen ? "uiTextActive" : "red"}>
-              {state.searchData?.type === "hotels"
-                ? state.searchData?.relationships?.city?.name
-                : intl.formatMessage({ id: "Where to" })}
+            <Caption color={isOpen ? "uiTextActive" : "red"} asChild>
+              <span>
+                {state.searchData?.type === "hotels"
+                  ? state.searchData?.relationships?.city?.name
+                  : intl.formatMessage({ id: "Where to" })}
+              </span>
             </Caption>
           </label>
           <div {...getRootProps({}, { suppressRefError: true })}>
diff --git a/components/Forms/BookingWidget/FormContent/Voucher/index.tsx b/components/Forms/BookingWidget/FormContent/Voucher/index.tsx
index 067f94c0c..dce678dda 100644
--- a/components/Forms/BookingWidget/FormContent/Voucher/index.tsx
+++ b/components/Forms/BookingWidget/FormContent/Voucher/index.tsx
@@ -34,8 +34,8 @@ export default function Voucher() {
       >
         <div className={styles.vouchers}>
           <label>
-            <Caption color="disabled" type="bold">
-              {vouchers}
+            <Caption color="disabled" type="bold" asChild>
+              <span>{vouchers}</span>
             </Caption>
             {/* <InfoCircleIcon color="white" className={styles.infoIcon} /> Out of scope for this release */}
           </label>
@@ -49,21 +49,30 @@ export default function Voucher() {
         arrow="left"
       >
         <div className={styles.options}>
-          <label className={`${styles.option} ${styles.checkboxVoucher}`}>
-            <Checkbox name="useVouchers" registerOptions={{ disabled: true }} />
-            <Caption color="disabled">{useVouchers}</Caption>
+          <div className={`${styles.option} ${styles.checkboxVoucher}`}>
+            <Checkbox name="useVouchers" registerOptions={{ disabled: true }}>
+              <Caption color="disabled" asChild>
+                <span>{useVouchers}</span>
+              </Caption>
+            </Checkbox>
             {/* <InfoCircleIcon color="white" className={styles.infoIcon} /> Out of scope for this release */}
-          </label>
-          <label className={styles.option}>
-            <Checkbox name="useBonus" registerOptions={{ disabled: true }} />
-            <Caption color="disabled">{bonus}</Caption>
+          </div>
+          <div className={styles.option}>
+            <Checkbox name="useBonus" registerOptions={{ disabled: true }}>
+              <Caption color="disabled" asChild>
+                <span>{bonus}</span>
+              </Caption>
+            </Checkbox>
             {/* <InfoCircleIcon color="white" className={styles.infoIcon} /> Out of scope for this release */}
-          </label>
-          <label className={styles.option}>
-            <Checkbox name="useReward" registerOptions={{ disabled: true }} />
-            <Caption color="disabled">{reward}</Caption>
+          </div>
+          <div className={styles.option}>
+            <Checkbox name="useReward" registerOptions={{ disabled: true }}>
+              <Caption color="disabled" asChild>
+                <span>{reward}</span>
+              </Caption>
+            </Checkbox>
             {/* <InfoCircleIcon color="white" className={styles.infoIcon} /> Out of scope for this release */}
-          </label>
+          </div>
         </div>
       </Tooltip>
     </div>
diff --git a/components/Forms/BookingWidget/FormContent/index.tsx b/components/Forms/BookingWidget/FormContent/index.tsx
index 002edb44a..d5dba4d47 100644
--- a/components/Forms/BookingWidget/FormContent/index.tsx
+++ b/components/Forms/BookingWidget/FormContent/index.tsx
@@ -50,8 +50,8 @@ export default function FormContent({
           </div>
           <div className={styles.rooms}>
             <label>
-              <Caption color="red" type="bold">
-                {rooms}
+              <Caption color="red" type="bold" asChild>
+                <span>{rooms}</span>
               </Caption>
             </label>
             <GuestsRoomsProvider selectedGuests={selectedGuests}>
diff --git a/components/TempDesignSystem/Form/Checkbox/index.tsx b/components/TempDesignSystem/Form/Checkbox/index.tsx
index ee3967d8d..60bd81935 100644
--- a/components/TempDesignSystem/Form/Checkbox/index.tsx
+++ b/components/TempDesignSystem/Form/Checkbox/index.tsx
@@ -33,12 +33,12 @@ export default function Checkbox({
     >
       {({ isSelected }) => (
         <>
-          <div className={styles.checkboxContainer}>
-            <div className={styles.checkbox}>
+          <span className={styles.checkboxContainer}>
+            <span className={styles.checkbox}>
               {isSelected && <CheckIcon color="white" />}
-            </div>
+            </span>
             {children}
-          </div>
+          </span>
           {fieldState.error ? (
             <Caption className={styles.error} fontOnly>
               <InfoCircleIcon color="red" />