feat(Tabs): add tabListAriaLabel prop

Signed-off-by: Mohamed Fall <[email protected]>

Author: fallmo

packages/react-core/src/components/Tabs/Tabs.tsx

@@ -61,6 +61,8 @@ export interface TabsProps
   onAdd?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
   /** Aria-label for the add button */
   addButtonAriaLabel?: string;
+  /** Aria-label for the list element */
+  tabListAriaLabel?: string;
   /** Uniquely identifies the tabs */
   id?: string;
   /** Flag indicating that the add button is disabled when onAdd is passed in */
@@ -500,6 +502,7 @@ class Tabs extends Component<TabsProps, TabsState> {
       toggleText,
       toggleAriaLabel,
       addButtonAriaLabel,
+      tabListAriaLabel,
       onToggle,
       onClose,
       onAdd,
@@ -626,7 +629,13 @@ class Tabs extends Component<TabsProps, TabsState> {
               />
             </div>
           )}
-          <ul className={css(styles.tabsList)} ref={this.tabList} onScroll={this.handleScrollButtons} role="tablist">
+          <ul
+            aria-label={tabListAriaLabel || 'Tab List'}
+            className={css(styles.tabsList)}
+            ref={this.tabList}
+            onScroll={this.handleScrollButtons}
+            role="tablist"
+          >
             {isOverflowHorizontal ? filteredChildrenWithoutOverflow : filteredChildren}
             {hasOverflowTab && <OverflowTab overflowingTabs={overflowingTabProps} {...overflowObjectProps} />}
           </ul>

packages/react-core/src/components/Tabs/__tests__/__snapshots__/Tabs.test.tsx.snap

@@ -12,6 +12,7 @@ exports[`should render accessible tabs 1`] = `
     style="--pf-v6-c-tabs--link-accent--length: 0px; --pf-v6-c-tabs--link-accent--start: 0px;"
   >
     <ul
+      aria-label="Tab List"
       class="pf-v6-c-tabs__list"
       role="tablist"
     >
@@ -129,6 +130,7 @@ exports[`should render box tabs 1`] = `
     style="--pf-v6-c-tabs--link-accent--length: 0px; --pf-v6-c-tabs--link-accent--start: 0px;"
   >
     <ul
+      aria-label="Tab List"
       class="pf-v6-c-tabs__list"
       role="tablist"
     >
@@ -288,6 +290,7 @@ exports[`should render box tabs of secondary variant 1`] = `
     style="--pf-v6-c-tabs--link-accent--length: 0px; --pf-v6-c-tabs--link-accent--start: 0px;"
   >
     <ul
+      aria-label="Tab List"
       class="pf-v6-c-tabs__list"
       role="tablist"
     >
@@ -453,6 +456,7 @@ exports[`should render expandable vertical tabs 1`] = `
       </div>
     </div>
     <ul
+      aria-label="Tab List"
       class="pf-v6-c-tabs__list"
       role="tablist"
     >
@@ -612,6 +616,7 @@ exports[`should render filled tabs 1`] = `
     style="--pf-v6-c-tabs--link-accent--length: 0px; --pf-v6-c-tabs--link-accent--start: 0px;"
   >
     <ul
+      aria-label="Tab List"
       class="pf-v6-c-tabs__list"
       role="tablist"
     >
@@ -729,6 +734,7 @@ exports[`should render simple tabs 1`] = `
     style="--pf-v6-c-tabs--link-accent--length: 0px; --pf-v6-c-tabs--link-accent--start: 0px;"
   >
     <ul
+      aria-label="Tab List"
       class="pf-v6-c-tabs__list"
       role="tablist"
     >
@@ -888,6 +894,7 @@ exports[`should render subtabs 1`] = `
     style="--pf-v6-c-tabs--link-accent--length: 0px; --pf-v6-c-tabs--link-accent--start: 0px;"
   >
     <ul
+      aria-label="Tab List"
       class="pf-v6-c-tabs__list"
       role="tablist"
     >
@@ -974,6 +981,7 @@ exports[`should render subtabs 1`] = `
       style="--pf-v6-c-tabs--link-accent--length: 0; --pf-v6-c-tabs--link-accent--start: 0;"
     >
       <ul
+        aria-label="Tab List"
         class="pf-v6-c-tabs__list"
         role="tablist"
       >
@@ -1117,6 +1125,7 @@ exports[`should render tabs with eventKey Strings 1`] = `
     style="--pf-v6-c-tabs--link-accent--length: 0; --pf-v6-c-tabs--link-accent--start: 0;"
   >
     <ul
+      aria-label="Tab List"
       class="pf-v6-c-tabs__list"
       role="tablist"
     >
@@ -1235,6 +1244,7 @@ exports[`should render tabs with no bottom border 1`] = `
     style="--pf-v6-c-tabs--link-accent--length: 0px; --pf-v6-c-tabs--link-accent--start: 0px;"
   >
     <ul
+      aria-label="Tab List"
       class="pf-v6-c-tabs__list"
       role="tablist"
     >
@@ -1352,6 +1362,7 @@ exports[`should render tabs with separate content 1`] = `
     style="--pf-v6-c-tabs--link-accent--length: 0px; --pf-v6-c-tabs--link-accent--start: 0px;"
   >
     <ul
+      aria-label="Tab List"
       class="pf-v6-c-tabs__list"
       role="tablist"
     >
@@ -1478,6 +1489,7 @@ exports[`should render uncontrolled tabs 1`] = `
     style="--pf-v6-c-tabs--link-accent--length: 0px; --pf-v6-c-tabs--link-accent--start: 0px;"
   >
     <ul
+      aria-label="Tab List"
       class="pf-v6-c-tabs__list"
       role="tablist"
     >
@@ -1637,6 +1649,7 @@ exports[`should render vertical tabs 1`] = `
     style="--pf-v6-c-tabs--link-accent--length: 0px; --pf-v6-c-tabs--link-accent--start: 0px;"
   >
     <ul
+      aria-label="Tab List"
       class="pf-v6-c-tabs__list"
       role="tablist"
     >