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) => (
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"]) +});