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(