Merged in fix/SW-2121 (pull request #1747)

SW-2121: Fix issue where closing SidePeeks would trigger other click events

* fix: replace div with Button in BookingWidget to align press events

* fix: replace div with Button in ImageGallery to align press events


Approved-by: Michael Zetterberg

apps/scandic-web/components/ImageGallery/imageGallery.module.css

@@ -12,6 +12,9 @@
   gap: var(--Spacing-x-quarter);
 }
 
+.imageCountNumber {
+  color: var(--Text-Inverted);
+}
 .triggerArea {
   display: flex;
   cursor: pointer;

apps/scandic-web/components/ImageGallery/index.tsx

@@ -1,15 +1,15 @@
 "use client"
 
 import { memo, useState } from "react"
+import { Button } from "react-aria-components"
 import { useIntl } from "react-intl"
 
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import Image from "@/components/Image"
 import Lightbox from "@/components/Lightbox"
 
-import Caption from "../TempDesignSystem/Text/Caption"
-
 import styles from "./imageGallery.module.css"
 
 import type { ImageGalleryProps } from "@/types/components/imageGallery"
@@ -35,10 +35,9 @@ function ImageGallery({
 
   return (
     <>
-      <div
+      <Button
         className={`${styles.triggerArea} ${fill ? styles.fill : ""}`}
-        role="button"
-        onClick={() => setLightboxIsOpen(true)}
+        onPress={() => setLightboxIsOpen(true)}
         aria-label={intl.formatMessage({ id: "Open image gallery" })}
       >
         <Image
@@ -48,13 +47,13 @@ function ImageGallery({
           onError={() => setImageError(true)}
           {...imageProps}
         />
-        <div className={styles.imageCount}>
+        <span className={styles.imageCount}>
           <MaterialIcon icon="filter" color="Icon/Inverted" />
-          <Caption color="white" type="label">
-            {images.length}
-          </Caption>
-        </div>
-      </div>
+          <Typography variant={"Body/Supporting text (caption)/smRegular"}>
+            <span className={styles.imageCountNumber}>{images.length}</span>
+          </Typography>
+        </span>
+      </Button>
       <Lightbox
         images={images}
         dialogTitle={title}