feat(Tabs): add tabListAriaLabel prop

[fallmo]

What

Add tabListAriaLabel prop to set a custom aria-label on the tab list (Closes #12128)

Summary by CodeRabbit

• New Features
  • Tabs component now accepts an optional tabListAriaLabel prop to set a custom accessible label for the tab list. If omitted, a default "Tab List" label is applied. Existing scrolling, overflow and interaction behavior are preserved.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Walkthrough

Adds an optional tabListAriaLabel?: string prop to TabsProps and applies it to the rendered <ul role="tablist"> as its aria-label, defaulting to "Tab List" when the prop is not provided.

Changes

Cohort / File(s)	Summary
Tabs component accessibility change packages/react-core/src/components/Tabs/Tabs.tsx	Added tabListAriaLabel?: string to TabsProps and passed it to the <ul role="tablist"> as `aria-label={tabListAriaLabel

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related issues

• Tabs - allow providing aria labeling to tablist element #12128: Directly related — requests adding a prop to set the tablist aria-label, which this change implements.

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'feat(Tabs): add tabListAriaLabel prop' directly and clearly summarizes the main change: adding a new prop to the Tabs component for controlling the tab list's aria-label.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

✨ Finishing touches

• 📝 Generate docstrings

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

packages/react-core/src/components/Tabs/Tabs.tsx (1)

64-65: Consider clarifying the documentation.

The documentation "Aria-label for the list element" could be more specific. Consider updating it to explicitly mention that this labels the <ul role="tablist"> element to help developers understand its purpose better.

📝 Suggested documentation improvement

-  /** Aria-label for the list element */
+  /** Aria-label for the tab list element (the <ul> with role="tablist"). When multiple tab sets exist on a page, provide a unique label to differentiate them for screen readers. */
   tabListAriaLabel?: string;

📜 Review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between bc46a52 and 33ee4be.

📒 Files selected for processing (1)

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

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)

• GitHub Check: Build
• GitHub Check: Build, test & deploy

🔇 Additional comments (2)

packages/react-core/src/components/Tabs/Tabs.tsx (2)

505-505: LGTM!

The prop is correctly extracted from props and properly positioned in the destructuring statement.

---

632-638: LGTM!

The implementation correctly applies the aria-label to the tab list element with an appropriate fallback. The approach is consistent with similar props in the component (e.g., addButtonAriaLabel at line 658).

[patternfly-build]

Preview: https://pf-react-pr-12193.surge.sh

A11y report: https://pf-react-pr-12193-a11y.surge.sh

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (1)

packages/react-core/src/components/Tabs/Tabs.tsx (1)

64-65: Consider clarifying the prop documentation.

The comment "Aria-label for the list element" could be more specific. Consider updating it to indicate this applies specifically to the <ul role="tablist"> element, and provide guidance on when consumers should set this prop.

🔎 Suggested documentation improvement

-  /** Aria-label for the list element */
+  /** Aria-label for the tab list element (<ul role="tablist">). Provide a descriptive label to identify the purpose of the tab set for assistive technologies. */
   tabListAriaLabel?: string;

📜 Review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 33ee4be and 5971301.

📒 Files selected for processing (1)

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

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)

• GitHub Check: Build
• GitHub Check: Build, test & deploy

[fallmo]

Hey @thatblindgeye, I think this Closes #12128 , unless you'd rather have like a whole tabListProps object instead.