fix(a11y): add aria-selected attribute to tab buttons

[Nischit-Ekbote]

Fixes screen reader announcing incorrect selected state on non-selected tabs. Added aria-selected attribute to TabButton components to properly communicate tab state to assistive technologies like Windows Narrator.

Closes storybookjs#32654

What I did

Added aria-selected attribute to TabButton components in the Tabs component to fix accessibility issues where screen readers (Windows Narrator) were announcing incorrect "selected" state on non-selected tabs.

The fix includes:

• aria-selected={active} - Properly communicates selected state to screen readers

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

• stories
• unit tests
• integration tests
• end-to-end tests

Manual testing

Manual testing is required for this accessibility fix.

Testing steps:

1. Run a sandbox: yarn start
2. Open Storybook in browser (http://localhost:6006)
3. Enable Windows Narrator (Ctrl + Win + Enter)
4. Navigate to any story with tabs (e.g., Controls tab)
5. Press Tab key to navigate to tab buttons
6. Verify Narrator announces:
   • Active tab: "Controls, tab, selected, 1 of X"
   • Inactive tab: "Interactions, tab, 2 of X" (WITHOUT "selected")

Tested on:

• OS: Windows 11 (24H2, Build 26407.5000)
• Browser: Edge 136.0.3240.92
• Screen Reader: Narrator

Result: ✅ Screen reader now correctly announces selected/not selected state on tabs.

Documentation

• Add or update documentation reflecting your changes
• If you are deprecating/removing a feature, make sure to update
  MIGRATION.MD

Note: No documentation update needed as this is an internal accessibility fix with no API changes.

Checklist for Maintainers

• When this PR is ready for testing, make sure to add ci:normal, ci:merged or ci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in code/lib/cli-storybook/src/sandbox-templates.ts
• Make sure this PR contains one of the labels below:
  • bug ✓ (This fixes incorrect screen reader behavior)

Summary by CodeRabbit

• Bug Fixes
  • Improved tab accessibility by setting aria-selected on the active tab. Screen readers now correctly announce selected state, enhancing keyboard navigation and compliance with ARIA tab patterns without changing visual behavior. This ensures clearer focus feedback for assistive technology users and aligns the component with expected accessibility standards, with no impact to mouse or touch interactions.

[coderabbitai]

Caution

Review failed

The pull request is closed.

Walkthrough

Added aria-selected to tab buttons in tabs.tsx, setting it based on the active state. No changes to control flow, events, or exports.

Changes

Cohort / File(s)	Summary
Accessibility attribute update code/core/src/components/components/tabs/tabs.tsx	Set aria-selected on each tab button to reflect the active state; no logic or API changes.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

In a row of tabs where choices dwell,
I twitch my ears—can screen readers tell?
A tiny flag, aria-selected true,
Now whispers, “this tab’s active for you.”
I thump with joy, concise and bright,
Small change made the focus right. 🐇✨

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/tabs-aria-selected

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 2e08667 and f741536.

📒 Files selected for processing (1)

• code/core/src/components/components/tabs/tabs.tsx (1 hunks)

---

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.}