fix: only phrasing content is allowed inside buttons meaning no div or p elements, these are now replaced by span

2024-10-25 15:44:30 +02:00
parent 0036fa1a68
commit 69ed852fc4
12 changed files with 56 additions and 43 deletions
--- a/components/GuestsRoomsPicker/index.tsx
+++ b/components/GuestsRoomsPicker/index.tsx
@@ -53,23 +53,25 @@ export default function GuestsRoomsPickerForm() {
  return (
    <div className={styles.container} data-isopen={isOpen} ref={ref}>
      <button className={styles.btn} onClick={handleOnClick} type="button">
-        <Body className={styles.body}>
-          {intl.formatMessage(
-            { id: "booking.rooms" },
-            { totalRooms: rooms.length }
-          )}
-          {", "}
-          {intl.formatMessage(
-            { id: "booking.adults" },
-            { totalAdults: adultCount }
-          )}
-          {childCount > 0
-            ? ", " +
-              intl.formatMessage(
-                { id: "booking.children" },
-                { totalChildren: childCount }
-              )
-            : null}
+        <Body className={styles.body} asChild>
+          <span>
+            {intl.formatMessage(
+              { id: "booking.rooms" },
+              { totalRooms: rooms.length }
+            )}
+            {", "}
+            {intl.formatMessage(
+              { id: "booking.adults" },
+              { totalAdults: adultCount }
+            )}
+            {childCount > 0
+              ? ", " +
+                intl.formatMessage(
+                  { id: "booking.children" },
+                  { totalChildren: childCount }
+                )
+              : null}
+          </span>
        </Body>
      </button>
      <div aria-modal className={styles.hideWrapper} role="dialog">