From 8b65f63d600f0e34fec898a061f53522a0635d13 Mon Sep 17 00:00:00 2001
From: Erik Tiekstra <erik.tiekstra@scandichotels.com>
Date: Wed, 16 Apr 2025 10:24:51 +0000
Subject: [PATCH] fix(SW-2171): Added focus state on rate cards and
 image-gallery

Approved-by: Arvid Norlin
---
 .../HotelInfoCard/hotelInfoCard.module.css    |  4 ---
 .../RoomListItem/RoomImage/image.module.css   |  2 +-
 .../ImageGallery/imageGallery.module.css      | 25 ++++++++++------
 .../components/ImageGallery/index.tsx         | 30 ++++++++++---------
 .../components/RateCard/rate-card.module.css  |  4 +++
 5 files changed, 37 insertions(+), 28 deletions(-)

diff --git a/apps/scandic-web/components/HotelReservation/SelectRate/HotelInfoCard/hotelInfoCard.module.css b/apps/scandic-web/components/HotelReservation/SelectRate/HotelInfoCard/hotelInfoCard.module.css
index d2c6808c2..fc82d2807 100644
--- a/apps/scandic-web/components/HotelReservation/SelectRate/HotelInfoCard/hotelInfoCard.module.css
+++ b/apps/scandic-web/components/HotelReservation/SelectRate/HotelInfoCard/hotelInfoCard.module.css
@@ -14,13 +14,9 @@
 
 .imageWrapper {
   position: relative;
-  overflow: hidden;
   height: 200px;
   max-width: 360px;
   width: 100%;
-}
-
-.imageWrapper img {
   border-radius: var(--Corner-radius-Medium);
 }
 
diff --git a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/RoomImage/image.module.css b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/RoomImage/image.module.css
index 39873b6a6..bc4eb64a2 100644
--- a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/RoomImage/image.module.css
+++ b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/RoomImage/image.module.css
@@ -2,6 +2,7 @@
   margin: 0 calc(-1 * var(--Spacing-x2));
   min-height: 190px;
   position: relative;
+  border-radius: var(--Corner-radius-Large) var(--Corner-radius-Large) 0 0;
 }
 
 div[data-multiroom="true"] .imageContainer {
@@ -26,7 +27,6 @@ div[data-multiroom="true"] .imageContainer {
 
 .imageContainer img {
   aspect-ratio: 16/9;
-  border-radius: var(--Corner-radius-Medium) var(--Corner-radius-Medium) 0 0;
   max-width: 100%;
   object-fit: cover;
 }
diff --git a/apps/scandic-web/components/ImageGallery/imageGallery.module.css b/apps/scandic-web/components/ImageGallery/imageGallery.module.css
index c28976493..716fdd415 100644
--- a/apps/scandic-web/components/ImageGallery/imageGallery.module.css
+++ b/apps/scandic-web/components/ImageGallery/imageGallery.module.css
@@ -1,3 +1,10 @@
+.wrapper {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  border-radius: inherit;
+}
+
 .imageCount {
   position: absolute;
   bottom: 16px;
@@ -10,24 +17,24 @@
   display: flex;
   align-items: center;
   gap: var(--Spacing-x-quarter);
-}
-
-.imageCountNumber {
   color: var(--Text-Inverted);
 }
-.triggerArea {
-  display: flex;
-  cursor: pointer;
-}
 
-.triggerArea:not(.fill) {
-  position: relative;
+.triggerArea {
+  background-color: transparent;
+  border-width: 0;
+  padding: 0;
+  position: absolute;
+  inset: 0;
+  cursor: pointer;
+  border-radius: inherit;
 }
 
 .image {
   width: 100%;
   height: 100%;
   object-fit: cover;
+  border-radius: inherit;
 }
 
 .imagePlaceholder {
diff --git a/apps/scandic-web/components/ImageGallery/index.tsx b/apps/scandic-web/components/ImageGallery/index.tsx
index 6c3d9fba1..5e0850743 100644
--- a/apps/scandic-web/components/ImageGallery/index.tsx
+++ b/apps/scandic-web/components/ImageGallery/index.tsx
@@ -13,6 +13,7 @@ import Lightbox from "@/components/Lightbox"
 import styles from "./imageGallery.module.css"
 
 import type { ImageGalleryProps } from "@/types/components/imageGallery"
+import { cx } from "class-variance-authority"
 
 function ImageGallery({
   images,
@@ -35,13 +36,7 @@ function ImageGallery({
 
   return (
     <>
-      <Button
-        className={`${styles.triggerArea} ${fill ? styles.fill : ""}`}
-        onPress={() => setLightboxIsOpen(true)}
-        aria-label={intl.formatMessage({
-          defaultMessage: "Open image gallery",
-        })}
-      >
+      <div className={cx(styles.wrapper, { [styles.fill]: fill })}>
         <Image
           className={styles.image}
           src={firstImage.src}
@@ -49,13 +44,20 @@ function ImageGallery({
           onError={() => setImageError(true)}
           {...imageProps}
         />
-        <span className={styles.imageCount}>
-          <MaterialIcon icon="filter" color="Icon/Inverted" />
-          <Typography variant={"Body/Supporting text (caption)/smRegular"}>
-            <span className={styles.imageCountNumber}>{images.length}</span>
-          </Typography>
-        </span>
-      </Button>
+        <Typography variant={"Body/Supporting text (caption)/smRegular"}>
+          <span className={styles.imageCount}>
+            <MaterialIcon icon="filter" color="Icon/Inverted" />
+            <span>{images.length}</span>
+          </span>
+        </Typography>
+        <Button
+          className={styles.triggerArea}
+          onPress={() => setLightboxIsOpen(true)}
+          aria-label={intl.formatMessage({
+            defaultMessage: "Open image gallery",
+          })}
+        />
+      </div>
       <Lightbox
         images={images}
         dialogTitle={title}
diff --git a/packages/design-system/lib/components/RateCard/rate-card.module.css b/packages/design-system/lib/components/RateCard/rate-card.module.css
index ecdd651be..6b5a78d4a 100644
--- a/packages/design-system/lib/components/RateCard/rate-card.module.css
+++ b/packages/design-system/lib/components/RateCard/rate-card.module.css
@@ -44,6 +44,10 @@
   border: 1px solid var(--Scandic-Peach-80, 'black');
 }
 
+.radio:focus-visible ~ .rateCard {
+  outline: 2px solid var(--Border-Interactive-Focus);
+}
+
 label:not(:has(.radio:checked)) .checkIcon {
   display: none;
 }