Add aria-label to tabs

patternfly · Nov 21, 2023 · 744f480 · 744f480
1 parent 4225e81
commit 744f480
Showing 1 changed file with 5 additions and 0 deletions.
diff --git a/packages/module/src/HorizontalNav/HorizontalNav.tsx b/packages/module/src/HorizontalNav/HorizontalNav.tsx
@@ -4,13 +4,16 @@ import { Tabs, Tab, TabProps, TabTitleText, TabsProps as TabsPropsPF } from '@pa
 type TabsProps = Omit<TabsPropsPF, 'children' | 'ref' | 'onSelect'>;
 
 export interface HorizontalNavProps extends TabsProps {
+  /** aria-label for all tabs */
+  ariaLabel?: string;
   /** Navigation tabs */
   tabs: Omit<TabProps, 'ref'>[];
   /** Callback to handle tab selection */
   onTabSelect?: (event: React.MouseEvent<HTMLElement, MouseEvent>, eventKey: number | string) => void;
 };
 
 const HorizontalNav: React.FunctionComponent<HorizontalNavProps> = ({
+  ariaLabel,
   tabs,
   defaultActiveKey,
   onTabSelect,
@@ -28,13 +31,15 @@ const HorizontalNav: React.FunctionComponent<HorizontalNavProps> = ({
         onTabSelect?.(e, eventKey);
       }}
       role="nav"
+      aria-label={ariaLabel}
       {...props}
     >
       {tabs.map((tab) => (
         <Tab
           {...tab}
           title={[ 'string', 'number', 'boolean' ].includes(typeof tab.title) ? <TabTitleText>{tab.title}</TabTitleText> : tab.title}
           key={tab.eventKey}
+          aria-label={`Tab ${tab.eventKey}`}
         >
           {tab.children}
         </Tab>