From 2c2435af09b9e949a75384d31aca5ddbfbada623 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matilda=20Landstr=C3=B6m?=
 <matilda.landstrom@scandichotels.com>
Date: Wed, 30 Jul 2025 12:02:04 +0000
Subject: [PATCH] Merged in feat/SW-1953-change-images-keyboard (pull request
 #2578)

feat(SW-1953): change images with keyboard in image gallery

* feat(SW-1953): change images with keyboard in image gallery


Approved-by: Anton Gunnarsson
Approved-by: Hrishikesh Vaipurkar
---
 .../components/Lightbox/FullView/index.tsx     | 18 +++++++++++++++++-
 .../components/Lightbox/Gallery/index.tsx      | 18 +++++++++++++++++-
 2 files changed, 34 insertions(+), 2 deletions(-)

diff --git a/apps/scandic-web/components/Lightbox/FullView/index.tsx b/apps/scandic-web/components/Lightbox/FullView/index.tsx
index ab18fce32..1e99df925 100644
--- a/apps/scandic-web/components/Lightbox/FullView/index.tsx
+++ b/apps/scandic-web/components/Lightbox/FullView/index.tsx
@@ -1,7 +1,7 @@
 "use client"
 
 import { AnimatePresence, motion } from "motion/react"
-import { useState } from "react"
+import { useEffect, useState } from "react"
 import { useIntl } from "react-intl"
 
 import { IconButton } from "@scandic-hotels/design-system/IconButton"
@@ -41,6 +41,22 @@ export default function FullView({
     onPrev()
   }
 
+  const handleKeyDown = (e: KeyboardEvent) => {
+    if (e.key === "ArrowLeft") {
+      handlePrev()
+    } else if (e.key === "ArrowRight") {
+      handleNext()
+    }
+  }
+
+  useEffect(() => {
+    window.addEventListener("keydown", handleKeyDown)
+
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown)
+    }
+  })
+
   const variants = {
     initial: (animateLeft: boolean) => ({
       opacity: 0,
diff --git a/apps/scandic-web/components/Lightbox/Gallery/index.tsx b/apps/scandic-web/components/Lightbox/Gallery/index.tsx
index 4fa0a18e8..496c10499 100644
--- a/apps/scandic-web/components/Lightbox/Gallery/index.tsx
+++ b/apps/scandic-web/components/Lightbox/Gallery/index.tsx
@@ -1,6 +1,6 @@
 "use client"
 import { AnimatePresence, motion } from "motion/react"
-import { useState } from "react"
+import { useEffect, useState } from "react"
 import { Button as ButtonRAC } from "react-aria-components"
 import { useIntl } from "react-intl"
 
@@ -48,6 +48,22 @@ export default function Gallery({
     onSelectImage(images[prevIndex])
   }
 
+  const handleKeyDown = (e: KeyboardEvent) => {
+    if (e.key === "ArrowLeft") {
+      handlePrev()
+    } else if (e.key === "ArrowRight") {
+      handleNext()
+    }
+  }
+
+  useEffect(() => {
+    window.addEventListener("keydown", handleKeyDown)
+
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown)
+    }
+  })
+
   const variants = {
     initial: (animateLeft: boolean) => ({
       opacity: 0,