fix(SW-2171): Added focus state on rate cards and image-gallery

Approved-by: Arvid Norlin

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 {

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}