From d92308b99d3b65875a3b9bc6f1a93fee60f81178 Mon Sep 17 00:00:00 2001 From: Chuma McPhoy Date: Mon, 9 Sep 2024 15:03:37 +0200 Subject: [PATCH] feat(SW-337): logic for accesible dialog title text for lightbox --- .../ContentType/HotelPage/PreviewImages/index.tsx | 10 ++++++++-- components/ContentType/HotelPage/index.tsx | 2 +- components/Lightbox/Gallery.tsx | 3 ++- components/Lightbox/index.tsx | 7 ++++++- i18n/dictionaries/da.json | 3 ++- i18n/dictionaries/de.json | 3 ++- i18n/dictionaries/en.json | 3 ++- i18n/dictionaries/fi.json | 3 ++- i18n/dictionaries/no.json | 3 ++- i18n/dictionaries/sv.json | 3 ++- types/components/hotelPage/previewImages.ts | 1 + types/components/lightbox/lightbox.ts | 2 ++ 12 files changed, 32 insertions(+), 11 deletions(-) diff --git a/components/ContentType/HotelPage/PreviewImages/index.tsx b/components/ContentType/HotelPage/PreviewImages/index.tsx index 3ee992bce..99704a61b 100644 --- a/components/ContentType/HotelPage/PreviewImages/index.tsx +++ b/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 ( - +
{images.slice(0, 3).map((image, index) => (
- +
diff --git a/components/Lightbox/Gallery.tsx b/components/Lightbox/Gallery.tsx index b1be2ab70..fa4c94a5a 100644 --- a/components/Lightbox/Gallery.tsx +++ b/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({
- Image Gallery + {dialogTitle}
diff --git a/components/Lightbox/index.tsx b/components/Lightbox/index.tsx index e71153b1d..b63f10693 100644 --- a/components/Lightbox/index.tsx +++ b/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) { ) : ( setIsOpen(false)} onSelectImage={(image) => { setSelectedImageIndex( diff --git a/i18n/dictionaries/da.json b/i18n/dictionaries/da.json index f85135e9c..9cd58ebbe 100644 --- a/i18n/dictionaries/da.json +++ b/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" -} \ No newline at end of file +} diff --git a/i18n/dictionaries/de.json b/i18n/dictionaries/de.json index d02901eca..79b9d5940 100644 --- a/i18n/dictionaries/de.json +++ b/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" -} \ No newline at end of file +} diff --git a/i18n/dictionaries/en.json b/i18n/dictionaries/en.json index 980cba5bf..cf4620b0b 100644 --- a/i18n/dictionaries/en.json +++ b/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" -} \ No newline at end of file +} diff --git a/i18n/dictionaries/fi.json b/i18n/dictionaries/fi.json index ee8e47e02..eac9da8c2 100644 --- a/i18n/dictionaries/fi.json +++ b/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" -} \ No newline at end of file +} diff --git a/i18n/dictionaries/no.json b/i18n/dictionaries/no.json index ff15feafe..1960369b7 100644 --- a/i18n/dictionaries/no.json +++ b/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" -} \ No newline at end of file +} diff --git a/i18n/dictionaries/sv.json b/i18n/dictionaries/sv.json index 015520dfc..3254a6a2f 100644 --- a/i18n/dictionaries/sv.json +++ b/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" -} \ No newline at end of file +} diff --git a/types/components/hotelPage/previewImages.ts b/types/components/hotelPage/previewImages.ts index a19b0b4cc..204a23fd4 100644 --- a/types/components/hotelPage/previewImages.ts +++ b/types/components/hotelPage/previewImages.ts @@ -2,4 +2,5 @@ import type { ImageItem } from "@/types/components/lightbox/lightbox" export type PreviewImagesProps = { images: ImageItem[] + hotelName: string } diff --git a/types/components/lightbox/lightbox.ts b/types/components/lightbox/lightbox.ts index 4f5eed250..fc8d11066 100644 --- a/types/components/lightbox/lightbox.ts +++ b/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