From 8ee0a3217e966be4955bebe67a0f7905546547d5 Mon Sep 17 00:00:00 2001
From: Jean-Marc Millet <jean-marc.millet@scality.com>
Date: Wed, 27 Nov 2024 16:14:18 +0100
Subject: [PATCH] add possibility to give title to icon helper, help with
 accessibility by giving an accessible label to icon

---
 src/lib/components/iconhelper/IconHelper.test.tsx | 14 ++++++++++++++
 src/lib/components/iconhelper/IconHelper.tsx      |  4 +++-
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/lib/components/iconhelper/IconHelper.test.tsx b/src/lib/components/iconhelper/IconHelper.test.tsx
index b29c570232..6674ad3c12 100644
--- a/src/lib/components/iconhelper/IconHelper.test.tsx
+++ b/src/lib/components/iconhelper/IconHelper.test.tsx
@@ -35,4 +35,18 @@ describe('Icon', () => {
       expect(screen.getByText(tooltipMessage)).toBeVisible();
     });
   });
+  it('should be able to change accessible label with title', async () => {
+    const { Wrapper } = getWrapper();
+    render(
+      <Wrapper>
+        <IconHelp
+          tooltipMessage={'This is a tooltip'}
+          title="Info Helper testing"
+        />
+      </Wrapper>,
+    );
+    await waitFor(() => {
+      expect(screen.getByLabelText('Info Helper testing')).toBeInTheDocument();
+    });
+  });
 });
diff --git a/src/lib/components/iconhelper/IconHelper.tsx b/src/lib/components/iconhelper/IconHelper.tsx
index 8ec998bf35..3d54e4139a 100644
--- a/src/lib/components/iconhelper/IconHelper.tsx
+++ b/src/lib/components/iconhelper/IconHelper.tsx
@@ -6,18 +6,20 @@ type IconHelpProps = {
   tooltipMessage: ReactNode;
   placement?: Position;
   overlayStyle?: CSSProperties;
+  title?: string;
 };
 
 export const IconHelp = ({
   tooltipMessage,
   overlayStyle,
   placement = 'right',
+  title,
 }: IconHelpProps) => (
   <Tooltip
     overlay={tooltipMessage}
     placement={placement}
     overlayStyle={overlayStyle}
   >
-    <Icon name="Info" color="buttonSecondary" />
+    <Icon name="Info" color="buttonSecondary" title={title} />
   </Tooltip>
 );