fix(Tabs): correct aria-setsize count when Tabs are conditionally ren…

…dered (#862)
palmetto · Jan 16, 2024 · 7fb27f4 · 7fb27f4
1 parent b8710eb
commit 7fb27f4
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 2 deletions.
diff --git a/src/components/Tabs/Tabs.Overview.stories.mdx b/src/components/Tabs/Tabs.Overview.stories.mdx
@@ -12,7 +12,7 @@ import { Button } from '../Button/Button';
 
 The Tabs component allows a user to flip amongst different views within the same page. This helps users navigate related content without having to change context.
 
-<Canvas isExpanded>
+<Canvas withSource="open">
   <Story
     name="Default"
     parameters={{
@@ -33,6 +33,7 @@ The Tabs component allows a user to flip amongst different views within the same
         >
           <Tabs.Item>Tab 1</Tabs.Item>
           <Tabs.Item>Tab 2</Tabs.Item>
+          <Tabs.Item>Tab 3</Tabs.Item>
           <Tabs.Item isDisabled>Disabled</Tabs.Item>
         </Tabs>
       );

diff --git a/src/components/Tabs/Tabs.tsx b/src/components/Tabs/Tabs.tsx
@@ -70,7 +70,7 @@ const TabsBaseComponent: React.FC<TabsProps> = React.forwardRef(
           key: child.key,
           style: { ...child.props.style, ...(isFullWidth && { flex: 1 }) },
           'aria-posinset': index + 1,
-          'aria-setsize': React.Children.count(children),
+          'aria-setsize': React.Children.toArray(children).length,
           'aria-selected': value === index,
           ref: mergeRefs([
             value === index ? activeTabRef : null,