Skip to content

feat(Tabs): add tabListAriaLabel prop #12193

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
nicolethoen merged 3 commits into from
Feb 25, 2026
+328 −1
Merged

feat(Tabs): add tabListAriaLabel prop #12193

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
021a359
feat(Tabs): add tabListAriaLabel prop
fallmo Jan 4, 2026
7c7ed84
Update packages/react-core/src/components/Tabs/Tabs.tsx
fallmo Jan 9, 2026
e323917
feat(Tabs): add tabListAriaLabelledBy prop, update accessibility test…
fallmo Jan 9, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 10 additions & 1 deletion packages/react-core/src/components/Tabs/Tabs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,8 @@ export interface TabsProps
onAdd?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
/** Aria-label for the add button */
addButtonAriaLabel?: string;
/** A readable string to create an accessible name for the tablist element. This can be used to differentiate multiple tablists on a page, and should be used for subtabs. */
tabListAriaLabel?: string;
/** Uniquely identifies the tabs */
id?: string;
/** Flag indicating that the add button is disabled when onAdd is passed in */
Expand Down Expand Up @@ -500,6 +502,7 @@ class Tabs extends Component<TabsProps, TabsState> {
toggleText,
toggleAriaLabel,
addButtonAriaLabel,
tabListAriaLabel,
onToggle,
onClose,
onAdd,
Expand Down Expand Up @@ -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'}
Comment thread
fallmo marked this conversation as resolved.
Outdated
className={css(styles.tabsList)}
ref={this.tabList}
onScroll={this.handleScrollButtons}
role="tablist"
>
Comment thread
coderabbitai[bot] marked this conversation as resolved.
{isOverflowHorizontal ? filteredChildrenWithoutOverflow : filteredChildren}
{hasOverflowTab && <OverflowTab overflowingTabs={overflowingTabProps} {...overflowObjectProps} />}
</ul>
Expand Down
13 changes: 13 additions & 0 deletions packages/react-core/src/components/Tabs/__tests__/__snapshots__/Tabs.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
>
Expand Down Expand Up @@ -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"
>
Expand Down Expand Up @@ -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"
>
Expand Down Expand Up @@ -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"
>
Expand Down Expand Up @@ -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"
>
Expand Down Expand Up @@ -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"
>
Expand Down Expand Up @@ -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"
>
Expand Down Expand Up @@ -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"
>
Expand Down Expand Up @@ -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"
>
Expand Down Expand Up @@ -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"
>
Expand Down Expand Up @@ -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"
>
Expand Down Expand Up @@ -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"
>
Expand Down Expand Up @@ -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"
>
Expand Down
Loading