From 0e1a1ca154e2e904a46cb9342b96cc2c35594875 Mon Sep 17 00:00:00 2001
From: inscom <286765557+inscomssb@users.noreply.github.com>
Date: Fri, 22 May 2026 11:21:16 +0200
Subject: [PATCH] feat(Tabs): add ariaLabel and title props to tab buttons

---
 src/Tabs.tsx             |  8 +++++++-
 stories/Tabs.stories.tsx | 22 ++++++++++++++++++++++
 2 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/src/Tabs.tsx b/src/Tabs.tsx
index bc2ff3632..40ed67a7d 100644
--- a/src/Tabs.tsx
+++ b/src/Tabs.tsx
@@ -28,6 +28,8 @@ export namespace TabsProps {
             content: ReactNode;
             isDefault?: boolean;
             disabled?: boolean;
+            ariaLabel?: string;
+            title?: string;
         }[];
         selectedTabId?: undefined;
         onTabChange?: (params: { tabIndex: number; tab: Uncontrolled["tabs"][number] }) => void;
@@ -40,6 +42,8 @@ export namespace TabsProps {
             label: ReactNode;
             iconId?: FrIconClassName | RiIconClassName;
             disabled?: boolean;
+            ariaLabel?: string;
+            title?: string;
         }[];
         selectedTabId: string;
         onTabChange: (tabId: string) => void;
@@ -141,7 +145,7 @@ export const Tabs = memo(
                     aria-label={label}
                     onKeyDownCapture={e => onKeyboardNavigation(e)}
                 >
-                    {tabs.map(({ label, iconId, disabled }, tabIndex) => (
+                    {tabs.map(({ label, iconId, disabled, ariaLabel, title }, tabIndex) => (
                         <li key={tabIndex} role="presentation">
                             <button
                                 ref={button => (buttonRefs.current[tabIndex] = button)}
@@ -157,6 +161,8 @@ export const Tabs = memo(
                                 aria-controls={getPanelId(tabIndex)}
                                 onClick={onTabClickFactory(tabIndex)}
                                 disabled={disabled}
+                                aria-label={ariaLabel}
+                                title={title}
                             >
                                 {label}
                             </button>
diff --git a/stories/Tabs.stories.tsx b/stories/Tabs.stories.tsx
index 03a1e6e70..7f87bb52d 100644
--- a/stories/Tabs.stories.tsx
+++ b/stories/Tabs.stories.tsx
@@ -88,3 +88,25 @@ export const WithTab2OpenedByDefault = getStory({
     "label": "Name of the tabs system",
     ...logCallbacks(["onTabChange"])
 });
+
+export const WithAriaLabelAndTitle = getStory({
+    "tabs": [
+        {
+            "label": "Tab 1",
+            "iconId": "fr-icon-add-line",
+            "content": <p>Content of tab1</p>,
+            "ariaLabel": "First tab, add content",
+            "title": "Add content"
+        },
+        {
+            "label": "Tab 2",
+            "iconId": "fr-icon-ball-pen-fill",
+            "content": <p>Content of tab2</p>,
+            "ariaLabel": "Second tab, edit content",
+            "title": "Edit content"
+        },
+        { "label": "Tab 3", "content": <p>Content of tab3</p> }
+    ],
+    "label": "Tabs with aria-label and title attributes",
+    ...logCallbacks(["onTabChange"])
+});