From 9bded2752f5912a7f554e1a4edbcea53658e8f14 Mon Sep 17 00:00:00 2001
From: Kasper Birch <kasperbirch1@gmail.com>
Date: Thu, 25 Apr 2024 15:37:37 +0200
Subject: [PATCH] Add descriptive alt text for repeated opening hour icon

Because the `OpeningHoursEditorEventContent` component can't be rendered normally, I need the translation in its parent component.
---
 src/apps/opening-hours-editor/OpeningHoursEditor.dev.tsx  | 5 +++++
 .../opening-hours-editor/OpeningHoursEditor.entry.tsx     | 1 +
 src/apps/opening-hours-editor/OpeningHoursEditor.tsx      | 8 +++++++-
 .../OpeningHoursEditorEventContent.tsx                    | 5 +++--
 4 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/apps/opening-hours-editor/OpeningHoursEditor.dev.tsx b/src/apps/opening-hours-editor/OpeningHoursEditor.dev.tsx
index 312254bb62..b8f1e162da 100644
--- a/src/apps/opening-hours-editor/OpeningHoursEditor.dev.tsx
+++ b/src/apps/opening-hours-editor/OpeningHoursEditor.dev.tsx
@@ -90,6 +90,11 @@ export default {
       name: "Opening hours confirm add repeated submit",
       defaultValue: "I'm sure",
       control: { type: "text" }
+    },
+    openingHoursRepeatedIconAltText: {
+      name: "Opening hours repeated icon alt text",
+      defaultValue: "Repeated opening hour",
+      control: { type: "text" }
     }
   }
 } as ComponentMeta<typeof OpeningHoursEditor>;
diff --git a/src/apps/opening-hours-editor/OpeningHoursEditor.entry.tsx b/src/apps/opening-hours-editor/OpeningHoursEditor.entry.tsx
index 0eeac71a52..71da485599 100644
--- a/src/apps/opening-hours-editor/OpeningHoursEditor.entry.tsx
+++ b/src/apps/opening-hours-editor/OpeningHoursEditor.entry.tsx
@@ -20,6 +20,7 @@ interface OpeningHoursEditorEntryTextProps {
   openingHoursConfirmAddRepeatedText: string;
   openingHoursConfirmAddRepeatedCancelText: string;
   openingHoursConfirmAddRepeatedSubmitText: string;
+  openingHoursRepeatedIconAltText: string;
 }
 
 interface OpeningHoursEditorEntryConfigProps {
diff --git a/src/apps/opening-hours-editor/OpeningHoursEditor.tsx b/src/apps/opening-hours-editor/OpeningHoursEditor.tsx
index 5c4c19a05a..9f78c73069 100644
--- a/src/apps/opening-hours-editor/OpeningHoursEditor.tsx
+++ b/src/apps/opening-hours-editor/OpeningHoursEditor.tsx
@@ -12,6 +12,7 @@ import useDialog from "../../components/dialog/useDialog";
 import DialogFormAdd from "./DialogFormAdd";
 import { OpeningHoursCategoriesType } from "./types";
 import { useConfig } from "../../core/utils/config";
+import { useText } from "../../core/utils/text";
 
 export type OpeningHoursEditorType = {
   initialDate?: Date;
@@ -20,6 +21,10 @@ export type OpeningHoursEditorType = {
 const OpeningHoursEditor: React.FC<OpeningHoursEditorType> = ({
   initialDate
 }) => {
+  // OpeningHoursEditorEventContent cannot be rendered as a standard component,
+  // thus preventing the use of useText hook within it.
+  const t = useText();
+  const iconAltText = t("openingHoursRepeatedIconAltText");
   const config = useConfig();
   const openingHoursCategories = config<OpeningHoursCategoriesType[]>(
     "openingHoursEditorCategoriesConfig",
@@ -83,7 +88,8 @@ const OpeningHoursEditor: React.FC<OpeningHoursEditorType> = ({
         }
         eventContent={(eventInput) =>
           OpeningHoursEditorEventContent({
-            eventInput
+            eventInput,
+            iconAltText
           })
         }
         events={events}
diff --git a/src/apps/opening-hours-editor/OpeningHoursEditorEventContent.tsx b/src/apps/opening-hours-editor/OpeningHoursEditorEventContent.tsx
index bc8b18485b..ef67a07685 100644
--- a/src/apps/opening-hours-editor/OpeningHoursEditorEventContent.tsx
+++ b/src/apps/opening-hours-editor/OpeningHoursEditorEventContent.tsx
@@ -5,11 +5,12 @@ import { extractTime } from "./helper";
 
 type OpeningHoursEditorEventContentProps = {
   eventInput: EventInput;
+  iconAltText: string;
 };
 
 const OpeningHoursEditorEventContent: React.FC<
   OpeningHoursEditorEventContentProps
-> = ({ eventInput }) => {
+> = ({ eventInput, iconAltText }) => {
   const { event } = eventInput;
   const { repetition } = event.extendedProps;
   const isSeries = repetition?.type === "weekly";
@@ -27,7 +28,7 @@ const OpeningHoursEditorEventContent: React.FC<
       </div>
       {isSeries && (
         <div className="opening-hours-editor-event-content__series-icon">
-          <img src={logo} alt="" className="" />
+          <img src={logo} alt={iconAltText} />
         </div>
       )}
     </div>