feat: Allow a specific Tab to be made active

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

@@ -97,7 +97,31 @@ describe('Tabs', () => {
     // This feature has not been implemented yet
   })
 
-  it.skip('should be able to set the active initial tab', () => {
-    // This feature has not been implemented yet
+  it('should be able to set the active initial tab', () => {
+    render(
+      <Tabs activeTab={2}>
+        <Tabs.List>
+          <Tabs.Button tab={0}>Tab 1</Tabs.Button>
+          <Tabs.Button tab={1}>Tab 2</Tabs.Button>
+          <Tabs.Button tab={2}>Tab 3</Tabs.Button>
+          <Tabs.Button tab={3}>Tab 4</Tabs.Button>
+        </Tabs.List>
+        <Tabs.Panel tab={0}>Content 1</Tabs.Panel>
+        <Tabs.Panel tab={1}>Content 2</Tabs.Panel>
+        <Tabs.Panel tab={2}>Content 3</Tabs.Panel>
+        <Tabs.Panel tab={3}>Content 4</Tabs.Panel>
+      </Tabs>,
+    )
+
+    const tabOne = screen.getByRole('tab', { name: 'Tab 1' })
+    const tabThree = screen.getByRole('tab', { name: 'Tab 3' })
+
+    expect(tabOne).toHaveAttribute('aria-selected', 'false')
+    expect(tabOne).toHaveAttribute('tabindex', '-1')
+
+    expect(tabThree).toHaveAttribute('aria-selected', 'true')
+    expect(tabThree).toHaveAttribute('tabindex', '0')
+
+    expect(screen.getByRole('tabpanel')).toHaveTextContent('Content 3')
   })
 })

packages/react/src/Tabs/Tabs.tsx

@@ -12,33 +12,38 @@ import { TabsList } from './TabsList'
 import { TabsPanel } from './TabsPanel'
 import { useKeyboardFocus } from '../common/useKeyboardFocus'
 
-export type TabsProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>>
-
-const TabsRoot = forwardRef(({ children, className, ...restProps }: TabsProps, ref: ForwardedRef<HTMLDivElement>) => {
-  const tabsId = useId()
-  const [activeTab, setActiveTab] = useState(0)
-  const innerRef = useRef<HTMLDivElement>(null)
-
-  const updateTab = (tab: number) => {
-    setActiveTab(tab)
-  }
-
-  // use a passed ref if it's there, otherwise use innerRef
-  useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)
-
-  const { keyDown } = useKeyboardFocus(innerRef, {
-    rotating: true,
-    horizontally: true,
-  })
-
-  return (
-    <TabsContext.Provider value={{ activeTab, updateTab, tabsId }}>
-      <div {...restProps} role="tabs" ref={innerRef} onKeyDown={keyDown} className={clsx('ams-tabs', className)}>
-        {children}
-      </div>
-    </TabsContext.Provider>
-  )
-})
+export type TabsProps = {
+  /** The initially active tab. */
+  activeTab?: number
+} & PropsWithChildren<HTMLAttributes<HTMLDivElement>>
+
+const TabsRoot = forwardRef(
+  ({ activeTab, children, className, ...restProps }: TabsProps, ref: ForwardedRef<HTMLDivElement>) => {
+    const tabsId = useId()
+    const [_activeTab, setActiveTab] = useState(activeTab ?? 0)
+    const innerRef = useRef<HTMLDivElement>(null)
+
+    const updateTab = (tab: number) => {
+      setActiveTab(tab)
+    }
+
+    // use a passed ref if it's there, otherwise use innerRef
+    useImperativeHandle(ref, () => innerRef.current as HTMLDivElement)
+
+    const { keyDown } = useKeyboardFocus(innerRef, {
+      rotating: true,
+      horizontally: true,
+    })
+
+    return (
+      <TabsContext.Provider value={{ activeTab: _activeTab, updateTab, tabsId }}>
+        <div {...restProps} role="tabs" ref={innerRef} onKeyDown={keyDown} className={clsx('ams-tabs', className)}>
+          {children}
+        </div>
+      </TabsContext.Provider>
+    )
+  },
+)
 
 TabsRoot.displayName = 'Tabs'
 

packages/react/src/Tabs/TabsButton.tsx

@@ -15,23 +15,23 @@ export type TabsButtonProps = {
 
 export const TabsButton = forwardRef(
   ({ children, className, tab = 0, ...restProps }: TabsButtonProps, ref: ForwardedRef<HTMLButtonElement>) => {
-    const { activeTab, updateTab, tabsId } = useContext(TabsContext)
+    const { activeTab, tabsId, updateTab } = useContext(TabsContext)
 
     return (
       <button
         {...restProps}
-        role="tab"
-        id={`${tabsId}-tab-${tab}`}
         aria-controls={`${tabsId}-panel-${tab}`}
         aria-selected={activeTab === tab}
-        tabIndex={activeTab === tab ? 0 : -1}
-        ref={ref}
+        className={clsx('ams-tabs__button', className)}
+        id={`${tabsId}-tab-${tab}`}
         onClick={() => {
           startTransition(() => {
             updateTab(tab)
           })
         }}
-        className={clsx('ams-tabs__button', className)}
+        ref={ref}
+        role="tab"
+        tabIndex={activeTab === tab ? 0 : -1}
       >
         {children}
       </button>

storybook/src/components/Tabs/Tabs.docs.mdx

@@ -10,6 +10,13 @@ import README from "../../../../packages/css/src/components/tabs/README.md?raw";
 
 <Primary />
 
-## Tab
+## With an initial tab
 
-<Canvas of={TabsStories.Tab} />
+The first tab is active by default.
+Another tab’s panel can be displayed initially as well.
+
+<Canvas of={TabsStories.WithInitialTab} />
+
+## Tab Button
+
+<Canvas of={TabsStories.TabButton} />

storybook/src/components/Tabs/Tabs.stories.tsx

@@ -8,12 +8,14 @@ import { Meta, StoryObj } from '@storybook/react'
 import { PropsWithChildren } from 'react'
 import { exampleParagraph } from '../shared/exampleContent'
 
+const slowPanelDelay = 1000
+
 const SlowPanel = ({ children }: PropsWithChildren) => {
   console.log('[ARTIFICIALLY SLOW] Adding a 1000ms delay')
 
   let startTime = performance.now()
-  while (performance.now() - startTime < 1000) {
-    // Do nothing for 1000 ms to emulate extremely slow code
+  while (performance.now() - startTime < slowPanelDelay) {
+    /* Emulate slow code. */
   }
 
   return children
@@ -22,6 +24,15 @@ const SlowPanel = ({ children }: PropsWithChildren) => {
 const meta = {
   title: 'Components/Containers/Tabs',
   component: Tabs,
+  argTypes: {
+    activeTab: {
+      control: {
+        type: 'number',
+        min: 0,
+        max: 3,
+      },
+    },
+  },
 } satisfies Meta<typeof Tabs>
 
 export default meta
@@ -40,59 +51,71 @@ const tabMeta = {
 type Story = StoryObj<typeof meta>
 type TabStory = StoryObj<typeof tabMeta>
 
+const defaultTabs = [
+  <Tabs.List key={0}>
+    <Tabs.Button tab={0}>Gegevens</Tabs.Button>
+    <Tabs.Button tab={1}>Aanslagen</Tabs.Button>
+    <Tabs.Button tab={2}>Documenten</Tabs.Button>
+    <Tabs.Button tab={3}>Acties</Tabs.Button>
+  </Tabs.List>,
+  <Tabs.Panel tab={0} key={1}>
+    <div style={{ paddingTop: '2rem' }}>
+      <Heading level={3}>Gegevens</Heading>
+      <Paragraph>{exampleParagraph()}</Paragraph>
+    </div>
+  </Tabs.Panel>,
+  <Tabs.Panel tab={1} key={2}>
+    <div style={{ paddingTop: '2rem' }}>
+      <Heading level={3}>Aanslagen</Heading>
+      <Paragraph>{exampleParagraph()}</Paragraph>
+    </div>
+  </Tabs.Panel>,
+  <Tabs.Panel tab={2} key={3}>
+    <div style={{ paddingTop: '2rem' }}>
+      <Heading level={3}>Documenten</Heading>
+      <Paragraph>(This tab panel simulates a load time of {slowPanelDelay} milliseconds.)</Paragraph>
+      <SlowPanel />
+    </div>
+  </Tabs.Panel>,
+  <Tabs.Panel tab={3} key={4}>
+    <div style={{ paddingTop: '2rem' }}>
+      <Heading level={3}>Acties</Heading>
+      <Paragraph>{exampleParagraph()}</Paragraph>
+    </div>
+  </Tabs.Panel>,
+]
+
 export const Default: Story = {
   args: {
-    children: [
-      <Tabs.List key={0}>
-        <Tabs.Button tab={0}>Gegevens</Tabs.Button>
-        <Tabs.Button tab={1}>Aanslagen</Tabs.Button>
-        <Tabs.Button tab={2}>Documenten</Tabs.Button>
-        <Tabs.Button tab={3}>Acties</Tabs.Button>
-      </Tabs.List>,
-      <Tabs.Panel tab={0} key={1}>
-        <div style={{ paddingTop: '2rem' }}>
-          <Heading level={3}>Gegevens</Heading>
-          <Paragraph>{exampleParagraph()}</Paragraph>
-        </div>
-      </Tabs.Panel>,
-      <Tabs.Panel tab={1} key={2}>
-        <div style={{ paddingTop: '2rem' }}>
-          <Heading level={3}>Aanslagen</Heading>
-          <Paragraph>{exampleParagraph()}</Paragraph>
-        </div>
-      </Tabs.Panel>,
-      <Tabs.Panel tab={2} key={3}>
-        <div style={{ paddingTop: '2rem' }}>
-          <Heading level={3}>Documenten</Heading>
-          <Paragraph>(This tab panel simulates a load time of 500 milliseconds.)</Paragraph>
-          <SlowPanel />
-        </div>
-      </Tabs.Panel>,
-      <Tabs.Panel tab={3} key={4}>
-        <div style={{ paddingTop: '2rem' }}>
-          <Heading level={3}>Acties</Heading>
-          <Paragraph>{exampleParagraph()}</Paragraph>
-        </div>
-      </Tabs.Panel>,
-    ],
+    children: defaultTabs,
+  },
+}
+
+export const WithInitialTab: Story = {
+  args: {
+    activeTab: 3,
+    children: defaultTabs,
   },
 }
 
-export const Tab: TabStory = {
+export const TabButton: TabStory = {
   args: {
     children: 'Gegevens',
-    tab: 0,
     disabled: false,
+    tab: 0,
   },
   argTypes: {
     children: {
       table: { disable: false },
     },
+    disabled: {
+      table: { disable: true },
+    },
     tab: {
       control: {
         type: 'number',
         min: 0,
-        max: 9,
+        max: 3,
       },
     },
   },