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

apps/www/src/app/examples/page.tsx

@@ -24,6 +24,7 @@ import {
   Select,
   Sidebar,
   Spinner,
+  Tabs,
   Text,
   TextArea,
   Tooltip
@@ -132,6 +133,29 @@ const Page = () => {
           <Text size='large' weight='medium' style={{ marginBottom: '24px' }}>
             Main
           </Text>
+
+          <Text
+            size='large'
+            weight='medium'
+            style={{ marginTop: '0', marginBottom: '16px' }}
+          >
+            Tabs Examples
+          </Text>
+          <Flex direction='column' gap={6} style={{ marginBottom: '32px' }}>
+            <Tabs defaultValue='tab1'>
+              <Tabs.List>
+                <Tabs.Tab value='tab1'>Account</Tabs.Tab>
+                <Tabs.Tab value='tab2' disabled>
+                  Password
+                </Tabs.Tab>
+                <Tabs.Tab value='tab3'>Settings</Tabs.Tab>
+              </Tabs.List>
+              <Tabs.Content value='tab1'>Account settings</Tabs.Content>
+              <Tabs.Content value='tab2'>Password settings</Tabs.Content>
+              <Tabs.Content value='tab3'>Other settings</Tabs.Content>
+            </Tabs>
+          </Flex>
+
           <code
             style={{
               fontFamily: 'var(--rs-font-mono)',

apps/www/src/content/docs/components/tabs/index.mdx

@@ -69,3 +69,5 @@ Renders the content panel for a tab.
 - Supports keyboard navigation with arrow keys between tabs
 - Uses `role="tablist"`, `role="tab"`, and `role="tabpanel"`
 - Active tab is indicated with `aria-selected`
+- Leading icon is wrapped with `aria-hidden` so it is not announced (treated as decorative)
+- Respects `prefers-reduced-motion: reduce`: the tab indicator does not animate when the user has requested reduced motion in OS/browser settings

apps/www/src/content/docs/components/tabs/props.ts

@@ -24,7 +24,7 @@ export interface TabsTabProps {
   /** Unique identifier for the tab. */
   value: any;
 
-  /** Optional icon element to display before the label. */
+  /** Optional icon element to display before the label. Rendered in a wrapper with aria-hidden so it is not announced by screen readers (decorative). */
   leadingIcon?: React.ReactNode;
 
   /** Whether the tab is disabled. */

packages/raystack/components/tabs/__tests__/tabs.test.tsx

@@ -169,6 +169,23 @@ describe('Tabs', () => {
       expect(iconWrapper).toBeInTheDocument();
       expect(iconWrapper).toContainElement(screen.getByTestId('tab-icon'));
     });
+
+    it('sets aria-hidden on leadingIcon wrapper for accessibility', () => {
+      const icon = <span data-testid='tab-icon'>📁</span>;
+      const { container } = render(
+        <Tabs defaultValue='tab1'>
+          <Tabs.List>
+            <Tabs.Tab value='tab1' leadingIcon={icon}>
+              {TAB_1_TEXT}
+            </Tabs.Tab>
+          </Tabs.List>
+          <Tabs.Content value='tab1'>{CONTENT_1_TEXT}</Tabs.Content>
+        </Tabs>
+      );
+
+      const iconWrapper = container.querySelector(`.${styles['trigger-icon']}`);
+      expect(iconWrapper).toHaveAttribute('aria-hidden', 'true');
+    });
   });
 
   describe('Indicator', () => {

packages/raystack/components/tabs/tabs.module.css

@@ -34,14 +34,15 @@
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
-  height: 28px;
+  height: var(--rs-space-8);
   line-height: var(--rs-line-height-small);
   letter-spacing: var(--rs-letter-spacing-small);
   box-sizing: border-box;
   position: relative;
   z-index: 1;
 }
 
+/* Hover state on trigger */
 .trigger:hover:not([data-disabled]) {
   color: var(--rs-color-foreground-base-primary);
 }
@@ -60,8 +61,8 @@
 
 .trigger-icon {
   display: inline-flex;
-  width: 16px;
-  height: 16px;
+  width: var(--rs-space-5);
+  height: var(--rs-space-5);
   color: currentColor;
   justify-content: center;
   align-items: center;
@@ -85,6 +86,15 @@
   z-index: 0;
 }
 
+/* Media query that matches when the user has 
+asked the OS/browser for less or no motion 
+(e.g. “Reduce motion” in accessibility settings). */
+@media (prefers-reduced-motion: reduce) {
+  .indicator {
+    transition: none;
+  }
+}
+
 .content {
   outline: none;
 }

packages/raystack/components/tabs/tabs.tsx

@@ -41,7 +41,9 @@ const TabsTab = forwardRef<HTMLButtonElement, TabsTabProps>(
       {...props}
     >
       {leadingIcon && (
-        <span className={styles['trigger-icon']}>{leadingIcon}</span>
+        <span className={styles['trigger-icon']} aria-hidden>
+          {leadingIcon}
+        </span>
       )}
       {children}
     </TabsPrimitive.Tab>