diff --git a/src/Tabs.tsx b/src/Tabs.tsx index bc2ff363..40ed67a7 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) => (
  • diff --git a/stories/Tabs.stories.tsx b/stories/Tabs.stories.tsx index 03a1e6e7..7f87bb52 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":

    Content of tab1

    , + "ariaLabel": "First tab, add content", + "title": "Add content" + }, + { + "label": "Tab 2", + "iconId": "fr-icon-ball-pen-fill", + "content":

    Content of tab2

    , + "ariaLabel": "Second tab, edit content", + "title": "Edit content" + }, + { "label": "Tab 3", "content":

    Content of tab3

    } + ], + "label": "Tabs with aria-label and title attributes", + ...logCallbacks(["onTabChange"]) +});