From 30a00daf02f68767560a3996dd128b6440c21ba6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Lelong?= <clement@numericite.eu>
Date: Thu, 16 Mar 2023 17:21:59 +0100
Subject: [PATCH 1/5] Fix Modal title hardcoded id
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Title: Fix duplicated IDs issue while using multiple modals in a single page

Description: This pull request addresses the issue of duplicated IDs by modifying the code to use the modal ID for creating the H1 ID. This change ensures that the H1 ID remains unique, even when multiple modals are present on the same page.

Signed-off-by: Clément Lelong <clement@numericite.eu>
---
 src/Modal.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/Modal.tsx b/src/Modal.tsx
index 4590b45c3..93dff038b 100644
--- a/src/Modal.tsx
+++ b/src/Modal.tsx
@@ -62,7 +62,7 @@ const Modal = memo(
 
         return (
             <dialog
-                aria-labelledby="fr-modal-title-modal-1"
+                aria-labelledby={`fr-modal-title-${id}`}
                 role="dialog"
                 id={id}
                 className={cx(fr.cx("fr-modal", topAnchor && "fr-modal--top"), className)}
@@ -96,7 +96,7 @@ const Modal = memo(
                                 </div>
                                 <div className={fr.cx("fr-modal__content")}>
                                     <h1
-                                        id="fr-modal-title-modal-1"
+                                        id={`fr-modal-title-${id}`}
                                         className={fr.cx("fr-modal__title")}
                                     >
                                         {iconId !== undefined && (

From dc7b40a484e6d62fae1f8dafaf1ea0f92d3ddfe0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Lelong?= <clement@numericite.eu>
Date: Thu, 16 Mar 2023 18:03:37 +0100
Subject: [PATCH 2/5] Update src/Modal.tsx
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Joseph Garrone <joseph.garrone.gj@gmail.com>
Signed-off-by: Clément Lelong <clement@numericite.eu>
---
 src/Modal.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Modal.tsx b/src/Modal.tsx
index 93dff038b..631a8b90a 100644
--- a/src/Modal.tsx
+++ b/src/Modal.tsx
@@ -59,7 +59,7 @@ const Modal = memo(
                 : [buttons_props];
 
         const { t } = useTranslation();
-
+const titleId= `fr-modal-title-${id}`;
         return (
             <dialog
                 aria-labelledby={`fr-modal-title-${id}`}

From 0ecd93b96e12ccacfdfef2341e8a541d4caef294 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Lelong?= <clement@numericite.eu>
Date: Thu, 16 Mar 2023 18:03:43 +0100
Subject: [PATCH 3/5] Update src/Modal.tsx
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Joseph Garrone <joseph.garrone.gj@gmail.com>
Signed-off-by: Clément Lelong <clement@numericite.eu>
---
 src/Modal.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Modal.tsx b/src/Modal.tsx
index 631a8b90a..cb7a534d7 100644
--- a/src/Modal.tsx
+++ b/src/Modal.tsx
@@ -62,7 +62,7 @@ const Modal = memo(
 const titleId= `fr-modal-title-${id}`;
         return (
             <dialog
-                aria-labelledby={`fr-modal-title-${id}`}
+                aria-labelledby={titleId}
                 role="dialog"
                 id={id}
                 className={cx(fr.cx("fr-modal", topAnchor && "fr-modal--top"), className)}

From f9a0256719a5c3adb0fbdd139b8c323dd5d8f7cc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Lelong?= <clement@numericite.eu>
Date: Thu, 16 Mar 2023 18:03:48 +0100
Subject: [PATCH 4/5] Update src/Modal.tsx
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Joseph Garrone <joseph.garrone.gj@gmail.com>
Signed-off-by: Clément Lelong <clement@numericite.eu>
---
 src/Modal.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Modal.tsx b/src/Modal.tsx
index cb7a534d7..f719d1296 100644
--- a/src/Modal.tsx
+++ b/src/Modal.tsx
@@ -96,7 +96,7 @@ const titleId= `fr-modal-title-${id}`;
                                 </div>
                                 <div className={fr.cx("fr-modal__content")}>
                                     <h1
-                                        id={`fr-modal-title-${id}`}
+                                        id={titleId}
                                         className={fr.cx("fr-modal__title")}
                                     >
                                         {iconId !== undefined && (

From 9dba6da7fe700fd7b32aef4ba545a5c08cc5df97 Mon Sep 17 00:00:00 2001
From: Joseph Garrone <joseph.garrone.gj@gmail.com>
Date: Thu, 16 Mar 2023 18:33:11 +0100
Subject: [PATCH 5/5] Update src/Modal.tsx

Signed-off-by: Joseph Garrone <joseph.garrone.gj@gmail.com>
---
 src/Modal.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Modal.tsx b/src/Modal.tsx
index f719d1296..497b15b1e 100644
--- a/src/Modal.tsx
+++ b/src/Modal.tsx
@@ -59,7 +59,7 @@ const Modal = memo(
                 : [buttons_props];
 
         const { t } = useTranslation();
-const titleId= `fr-modal-title-${id}`;
+        const titleId= `fr-modal-title-${id}`;
         return (
             <dialog
                 aria-labelledby={titleId}