feat(SW-337): logic for accesible dialog title text for lightbox

components/ContentType/HotelPage/PreviewImages/index.tsx

@@ -7,10 +7,16 @@ import styles from "./previewImages.module.css"
 
 import type { PreviewImagesProps } from "@/types/components/hotelPage/previewImages"
 
-export default async function PreviewImages({ images }: PreviewImagesProps) {
+export default async function PreviewImages({
+  images,
+  hotelName,
+}: PreviewImagesProps) {
   const intl = await getIntl()
+  const imageGalleryText = intl.formatMessage({ id: "Image gallery" })
+  const dialogTitle = `${hotelName} - ${imageGalleryText}`
+
   return (
-    <Lightbox images={images}>
+    <Lightbox images={images} dialogTitle={dialogTitle}>
       <div className={styles.imageWrapper}>
         {images.slice(0, 3).map((image, index) => (
           <Image

components/ContentType/HotelPage/index.tsx

@@ -33,7 +33,7 @@ export default async function HotelPage() {
   return (
     <div className={styles.pageContainer}>
       <div className={styles.hotelImages}>
-        <PreviewImages images={hotelImages} />
+        <PreviewImages images={hotelImages} hotelName={hotelName} />
       </div>
       <TabNavigation />
       <main className={styles.mainSection}>

components/Lightbox/Gallery.tsx

@@ -16,6 +16,7 @@ import type { GalleryProps } from "@/types/components/lightbox/lightbox"
 
 export default function Gallery({
   images,
+  dialogTitle,
   onClose,
   onSelectImage,
   onImageClick,
@@ -58,7 +59,7 @@ export default function Gallery({
       <div className={styles.desktopGallery}>
         <VisuallyHidden asChild>
           <DialogTitle asChild>
-            <VisuallyHidden>Image Gallery</VisuallyHidden>
+            <VisuallyHidden>{dialogTitle}</VisuallyHidden>
           </DialogTitle>
         </VisuallyHidden>
         <div className={styles.galleryHeader}>

components/Lightbox/index.tsx

@@ -10,7 +10,11 @@ import styles from "./Lightbox.module.css"
 
 import type { LightboxProps } from "@/types/components/lightbox/lightbox"
 
-export default function Lightbox({ images, children }: LightboxProps) {
+export default function Lightbox({
+  images,
+  children,
+  dialogTitle,
+}: LightboxProps) {
   const [isOpen, setIsOpen] = useState(false)
   const [selectedImageIndex, setSelectedImageIndex] = useState(0)
   const [isFullView, setIsFullView] = useState(false)
@@ -93,6 +97,7 @@ export default function Lightbox({ images, children }: LightboxProps) {
                   ) : (
                     <Gallery
                       images={images}
+                      dialogTitle={dialogTitle}
                       onClose={() => setIsOpen(false)}
                       onSelectImage={(image) => {
                         setSelectedImageIndex(

i18n/dictionaries/da.json

@@ -79,6 +79,7 @@
   "Hotel surroundings": "Hotel omgivelser",
   "How do you want to sleep?": "Hvordan vil du sove?",
   "How it works": "Hvordan det virker",
+  "Image gallery": "Billedgalleri",
   "Join Scandic Friends": "Tilmeld dig Scandic Friends",
   "km to city center": "km til byens centrum",
   "Language": "Sprog",
@@ -227,4 +228,4 @@
   "Your level": "Dit niveau",
   "Your points to spend": "Dine brugbare point",
   "Zip code": "Postnummer"
-}
+}

i18n/dictionaries/de.json

@@ -77,6 +77,7 @@
   "Hotel surroundings": "Umgebung des Hotels",
   "How do you want to sleep?": "Wie möchtest du schlafen?",
   "How it works": "Wie es funktioniert",
+  "Image gallery": "Bildergalerie",
   "Join Scandic Friends": "Treten Sie Scandic Friends bei",
   "km to city center": "km bis zum Stadtzentrum",
   "Language": "Sprache",
@@ -220,4 +221,4 @@
   "Your level": "Dein level",
   "Your points to spend": "Meine Punkte",
   "Zip code": "PLZ"
-}
+}

i18n/dictionaries/en.json

@@ -83,6 +83,7 @@
   "hotelPages.rooms.roomCard.seeRoomDetails": "See room details",
   "How do you want to sleep?": "How do you want to sleep?",
   "How it works": "How it works",
+  "Image gallery": "Image gallery",
   "Join Scandic Friends": "Join Scandic Friends",
   "km to city center": "km to city center",
   "Language": "Language",
@@ -232,4 +233,4 @@
   "Your level": "Your level",
   "Your points to spend": "Your points to spend",
   "Zip code": "Zip code"
-}
+}

i18n/dictionaries/fi.json

@@ -78,6 +78,7 @@
   "Hotel surroundings": "Hotellin ympäristö",
   "How do you want to sleep?": "Kuinka haluat nukkua?",
   "How it works": "Kuinka se toimii",
+  "Image gallery": "Kuvagalleria",
   "Join Scandic Friends": "Liity jäseneksi",
   "km to city center": "km keskustaan",
   "Language": "Kieli",
@@ -226,4 +227,4 @@
   "Your level": "Tasosi",
   "Your points to spend": "Käytettävissä olevat pisteesi",
   "Zip code": "Postinumero"
-}
+}

i18n/dictionaries/no.json

@@ -78,6 +78,7 @@
   "Hotel surroundings": "Hotellomgivelser",
   "How do you want to sleep?": "Hvordan vil du sove?",
   "How it works": "Hvordan det fungerer",
+  "Image gallery": "Bildegalleri",
   "Join Scandic Friends": "Bli med i Scandic Friends",
   "km to city center": "km til sentrum",
   "Language": "Språk",
@@ -226,4 +227,4 @@
   "Your level": "Ditt nivå",
   "Your points to spend": "Dine brukbare poeng",
   "Zip code": "Post kode"
-}
+}

i18n/dictionaries/sv.json

@@ -80,6 +80,7 @@
   "hotelPages.rooms.roomCard.persons": "personer",
   "How do you want to sleep?": "Hur vill du sova?",
   "How it works": "Hur det fungerar",
+  "Image gallery": "Bildgalleri",
   "Join Scandic Friends": "Gå med i Scandic Friends",
   "km to city center": "km till stadens centrum",
   "Language": "Språk",
@@ -228,4 +229,4 @@
   "Your level": "Din nivå",
   "Your points to spend": "Dina spenderbara poäng",
   "Zip code": "Postnummer"
-}
+}

types/components/hotelPage/previewImages.ts

@@ -2,4 +2,5 @@ import type { ImageItem } from "@/types/components/lightbox/lightbox"
 
 export type PreviewImagesProps = {
   images: ImageItem[]
+  hotelName: string
 }

types/components/lightbox/lightbox.ts

@@ -6,11 +6,13 @@ export interface ImageItem {
 
 export interface LightboxProps {
   images: ImageItem[]
+  dialogTitle: string /* Accessible title for dialog screen readers */
   children: React.ReactNode
 }
 
 export interface GalleryProps {
   images: ImageItem[]
+  dialogTitle: string
   onClose: () => void
   onSelectImage: (image: ImageItem) => void
   onImageClick: () => void