From 351a2d8e309a67fffbed6d293989cefae50826f5 Mon Sep 17 00:00:00 2001
From: inscom <286765557+inscomssb@users.noreply.github.com>
Date: Sat, 23 May 2026 11:31:40 +0200
Subject: [PATCH] fix(Footer): allow ReactNode for categoryName to support lang
 attribute (RGAA 8.7)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fixes #476 — widens `FooterProps.LinkList.Column.categoryName` from `string`
to `ReactNode` so consumers can wrap content with a `lang` attribute to signal
language changes in the source code, as required by RGAA criterion 8.7.
Change is fully backwards-compatible since `string` is a valid `ReactNode`.
---
 src/Footer.tsx             |  2 +-
 stories/Footer.stories.tsx | 21 +++++++++++++++++++--
 2 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/src/Footer.tsx b/src/Footer.tsx
index 970587c21..58c3d4680 100644
--- a/src/Footer.tsx
+++ b/src/Footer.tsx
@@ -117,7 +117,7 @@ export namespace FooterProps {
             LinkList.Link?
         ];
         export interface Column {
-            categoryName?: string;
+            categoryName?: ReactNode;
             links: Links;
         }
         export interface Link {
diff --git a/stories/Footer.stories.tsx b/stories/Footer.stories.tsx
index 68585adf7..a38e5324d 100644
--- a/stories/Footer.stories.tsx
+++ b/stories/Footer.stories.tsx
@@ -241,11 +241,28 @@ export const WithLinkList = getStory({
     "contentDescription": `
     Ce message est à remplacer par les informations de votre site.
 
-    Comme exemple de contenu, vous pouvez indiquer les informations 
+    Comme exemple de contenu, vous pouvez indiquer les informations
     suivantes : Le site officiel d’information administrative pour les entreprises.
-    Retrouvez toutes les informations et démarches administratives nécessaires à la création, 
+    Retrouvez toutes les informations et démarches administratives nécessaires à la création,
     à la gestion et au développement de votre entreprise.
     `,
     linkList,
     linkListTitle: <h2>Liens utiles</h2>
 });
+
+export const WithLinkListAndLangOnCategoryName = getStory({
+    "accessibility": "fully compliant",
+    "contentDescription": `
+    Ce message est à remplacer par les informations de votre site.
+
+    Comme exemple de contenu, vous pouvez indiquer les informations
+    suivantes : Le site officiel d’information administrative pour les entreprises.
+    Retrouvez toutes les informations et démarches administratives nécessaires à la création,
+    à la gestion et au développement de votre entreprise.
+    `,
+    linkList: new Array(6).fill({
+        categoryName: <span lang="en">Category name</span>,
+        links
+    }) as FooterProps.LinkList.List,
+    linkListTitle: <h2>Liens utiles</h2>
+});