colocate tab tests and files

packages/react/src/components/Tabs/Tab/Tab.tsx → packages/react/src/components/Tabs/Tab.tsx

@@ -2,7 +2,7 @@ import type { HTMLAttributes } from 'react';
 import { forwardRef } from 'react';
 import cl from 'clsx/lite';
 
-import { RovingTabindexItem } from '../../../utilities/RovingTabIndex';
+import { RovingTabindexItem } from '../../utilities/RovingTabIndex';
 
 import { useTabItem } from './useTab';
 

packages/react/src/components/Tabs/TabContent/TabContent.tsx → packages/react/src/components/Tabs/TabContent.tsx

@@ -2,8 +2,9 @@ import type { HTMLAttributes } from 'react';
 import { forwardRef, useContext } from 'react';
 import cl from 'clsx/lite';
 
-import { TabsContext } from '../Tabs';
-import { Paragraph } from '../../Typography';
+import { Paragraph } from '../Typography';
+
+import { TabsContext } from './Tabs';
 
 export type TabContentProps = {
   /** When this value is selected as the current state, render this `TabContent` component*/

packages/react/src/components/Tabs/TabList/TabList.tsx → packages/react/src/components/Tabs/TabList.tsx

@@ -2,7 +2,7 @@ import type { HTMLAttributes } from 'react';
 import { forwardRef } from 'react';
 import cl from 'clsx/lite';
 
-import { RovingTabindexRoot } from '../../../utilities/RovingTabIndex';
+import { RovingTabindexRoot } from '../../utilities/RovingTabIndex';
 
 export const TabList = forwardRef<
   HTMLDivElement,

packages/react/src/components/Tabs/Tabs.test.tsx

@@ -46,4 +46,51 @@ describe('Tabs', () => {
     expect(screen.queryByText('content 2')).toBeVisible();
     expect(screen.queryByText('content 1')).not.toBeInTheDocument();
   });
+
+  test('item renders with correct aria attributes', async () => {
+    render(
+      <Tabs defaultValue='value1'>
+        <Tabs.List>
+          <Tabs.Tab value='value1'>Tab 1</Tabs.Tab>
+          <Tabs.Tab value='value2'>Tab 2</Tabs.Tab>
+        </Tabs.List>
+      </Tabs>,
+    );
+
+    const tab = screen.getByRole('tab', { name: 'Tab 2' });
+    expect(tab).toHaveAttribute('aria-selected', 'false');
+    await user.click(tab);
+    expect(tab).toHaveAttribute('aria-selected', 'true');
+  });
+
+  test('renders ReactNodes as children when TabContents value is selected', () => {
+    render(
+      <Tabs defaultValue='value1'>
+        <Tabs.Content value='value1'>
+          <div>content 1</div>
+        </Tabs.Content>
+      </Tabs>,
+    );
+
+    const content = screen.queryByText('content 1');
+    expect(content).toBeInTheDocument();
+  });
+
+  test('can navigate tabs with keyboard', async () => {
+    render(
+      <Tabs.List>
+        <Tabs.Tab value='value1'>Tab 1</Tabs.Tab>
+        <Tabs.Tab value='value2'>Tab 2</Tabs.Tab>
+      </Tabs.List>,
+    );
+
+    const tab1 = screen.getByRole('tab', { name: 'Tab 1' });
+    const tab2 = screen.getByRole('tab', { name: 'Tab 2' });
+    await user.tab();
+    expect(tab1).toHaveFocus();
+    await user.type(tab1, '{arrowright}');
+    expect(tab2).toHaveFocus();
+    await user.type(tab2, '{arrowleft}');
+    expect(tab1).toHaveFocus();
+  });
 });

packages/react/src/components/Tabs/Tab/useTab.ts → packages/react/src/components/Tabs/useTab.ts

@@ -1,9 +1,9 @@
 import type { HTMLAttributes } from 'react';
 import { useContext, useId } from 'react';
 
-import { TabsContext } from '../Tabs';
+import { TabsContext } from './Tabs';
 
-import type { TabProps } from './Tab';
+import type { TabProps } from '.';
 
 type UseTab = (
   props: TabProps,