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

Approved-by: Arvid Norlin

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}