feat (Tabs): Add a few improvements and some minor fixes

[paanSinghCoder]

Issue-581

Summary

• Improvement: Replace hardcoded CSS values with design tokens (Issue-643) - Done
• Fix: Add aria-hidden control for leadingIcon (Issue-643)  - Added a aria-hidden property for the icon
• Feat: Add prefer-reduced-motion media query - It matches when the user has asked the OS/browser for less or no motion (e.g. “Reduce motion” in accessibility settings).
• Update docs and tests.

Items which are already present and does not require any changes.

• Fix: The inactive color is too dark, should be lighter. - Already matches the design.
• Active tab border is not crisp. - Already matches the design.
• Lazy Content Loading - Load heavy content after Tab is focused. - Implemented during Base UI. check - Supported. Inactive tab panels are unmounted by default (keepMounted: false), so heavy content only mounts when that tab is selected. Base UI Docs
• Full Width Option - Tabs are already full width. Confirm - Already supported

Type of Change

• Bug fix (non-breaking change that fixes an issue)
• New feature (non-breaking change that adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Documentation update
• Refactor (no functional changes, no bug fixes just code improvements)
• Chore (changes to the build process or auxiliary tools and libraries such as documentation generation)
• Style (changes that do not affect the meaning of the code (white-space, formatting, etc))
• Test (adding missing tests or correcting existing tests)
• Improvement (Improvements to existing code)
• Other (please specify)

How Has This Been Tested?

Manual and added tests

Checklist:

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation (.mdx files)
• My changes generate no new warnings
• I have added tests that prove my fix is effective or that my feature works

Screenshots (if appropriate):

[Add screenshots here]

Related Issues

[Link any related issues here using #issue-number]

Summary by CodeRabbit

• New Features

  • Added a Tabs UI example showcasing default, active, and disabled tab items.

• Improvements

  • Updated tab trigger sizing and icon sizing to use design tokens.
  • Added reduced-motion support for the tab indicator.

• Accessibility

  • Marked decorative icons as non-interactive for assistive technologies.

• Tests

  • Added test coverage verifying icon accessibility behavior.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
apsara	Ready	Preview, Comment	Mar 2, 2026 6:51am

[coderabbitai]

📝 Walkthrough

Walkthrough

Adds a Tabs example to the website, updates Tabs styles to use design tokens and respects reduced-motion, marks leading icon as decorative with aria-hidden, and adds a test and docs/props notes for the accessibility changes.

Changes

Cohort / File(s)	Summary
Examples Page apps/www/src/app/examples/page.tsx	Adds a Tabs UI example with a default tab and three tab items (one disabled) plus content sections.
Component Styles packages/raystack/components/tabs/tabs.module.css	Replaces hardcoded pixel sizes with design tokens (--rs-space-8, --rs-space-5), adds prefers-reduced-motion rule to disable indicator animation, and minor formatting tweaks.
Component Accessibility packages/raystack/components/tabs/tabs.tsx, packages/raystack/components/tabs/__tests__/tabs.test.tsx	Adds aria-hidden="true" to the leading icon wrapper and adds a test asserting the attribute is present.
Docs & Props apps/www/src/content/docs/components/tabs/index.mdx, apps/www/src/content/docs/components/tabs/props.ts	Documents that the leading icon is decorative (aria-hidden) and that reduced-motion is respected; updates prop comment for leadingIcon.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Possibly related issues

• [Tabs] Add use client directive, forward activation/loop props, and replace hardcoded sizes #643 — Implements aria-hidden for leadingIcon and replaces hardcoded trigger/icon sizes with tokens, matching parts of that issue.

Suggested labels

Do not merge

Suggested reviewers

• rohilsurana
• rsbh

Poem

🐰 I hopped through code with nimble feet,

Tabs now token-sized and tidy, neat.
Icons hushed with aria-hidden cheer,
Motion eased for those who hold it dear,
A tiny rabbit claps — the UI is clear.

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 inconclusive)

Check name	Status	Explanation	Resolution
Title check	❓ Inconclusive	The title is vague and overly broad, using non-descriptive language ('a few improvements and some minor fixes') that doesn't clearly convey the specific changes made (design token replacements, accessibility improvements, reduced-motion support).	Consider a more specific title like 'feat(Tabs): Replace hardcoded values with tokens, add aria-hidden and prefers-reduced-motion support' to clearly communicate the main changes.

✅ Passed checks (2 passed)

Check name	Status	Explanation
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.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

• 📝 Generate docstrings (stacked PR)
• 📝 Generate docstrings (commit on current branch)

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feat/tabs-improvement

---

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]

🧹 Nitpick comments (1)

apps/www/src/app/examples/page.tsx (1)

147-151: Optional: include one leadingIcon tab in the example to exercise the new a11y path.

This would validate and showcase the aria-hidden icon behavior introduced in packages/raystack/components/tabs/tabs.tsx.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@apps/www/src/app/examples/page.tsx` around lines 147 - 151, Add one Tabs.Tab
in the example that uses the new leadingIcon prop so the accessible icon code
path in packages/raystack/components/tabs/tabs.tsx is exercised; update the
existing tab list (where Tabs.Tab values 'tab1'/'tab2'/'tab3' are declared) to
include a tab such as Tabs.Tab value='tab-left' leadingIcon={<SomeIcon />} (keep
one normal tab and one disabled tab as-is) so the example renders an icon with
the aria-hidden behavior from the Tabs component and visually demonstrates the
new accessibility behavior.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@apps/www/src/app/examples/page.tsx`:
- Around line 147-151: Add one Tabs.Tab in the example that uses the new
leadingIcon prop so the accessible icon code path in
packages/raystack/components/tabs/tabs.tsx is exercised; update the existing tab
list (where Tabs.Tab values 'tab1'/'tab2'/'tab3' are declared) to include a tab
such as Tabs.Tab value='tab-left' leadingIcon={<SomeIcon />} (keep one normal
tab and one disabled tab as-is) so the example renders an icon with the
aria-hidden behavior from the Tabs component and visually demonstrates the new
accessibility behavior.

---

ℹ️ Review info

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 1301b55 and 01b8558.

📒 Files selected for processing (3)

• apps/www/src/app/examples/page.tsx
• packages/raystack/components/tabs/tabs.module.css
• packages/raystack/components/tabs/tabs.tsx