From 140ea0b3fbe689449fa4ee56661ee3f2fd968755 Mon Sep 17 00:00:00 2001
From: Yihui Liao <44729383+yihuiliao@users.noreply.github.com>
Date: Fri, 30 Jan 2026 16:15:13 -0800
Subject: [PATCH] fix: pass style and labels to TabPanels (#9562)

* fix: make sure to pass style and labels on TabPanels

* fix space
---
 packages/react-aria-components/src/Tabs.tsx   |  3 +-
 .../react-aria-components/test/Tabs.test.js   | 36 +++++++++++++++++++
 2 files changed, 38 insertions(+), 1 deletion(-)

diff --git a/packages/react-aria-components/src/Tabs.tsx b/packages/react-aria-components/src/Tabs.tsx
index 994934d3609..7e56c2394c1 100644
--- a/packages/react-aria-components/src/Tabs.tsx
+++ b/packages/react-aria-components/src/Tabs.tsx
@@ -394,7 +394,7 @@ export const TabPanels = /*#__PURE__*/ createHideableComponent(function TabPanel
     prevSize.current = ref.current.getBoundingClientRect();
   }
 
-  let DOMProps = filterDOMProps(props, {global: true});
+  let DOMProps = filterDOMProps(props, {labelable: true, global: true});
   delete DOMProps.id;
 
   return (
@@ -402,6 +402,7 @@ export const TabPanels = /*#__PURE__*/ createHideableComponent(function TabPanel
       render={props.render}
       {...DOMProps}
       ref={ref}
+      style={props.style}
       className={props.className || 'react-aria-TabPanels'}>
       <Collection {...props} />
     </dom.div>
diff --git a/packages/react-aria-components/test/Tabs.test.js b/packages/react-aria-components/test/Tabs.test.js
index ce511c7ab62..80c9ebfc2d4 100644
--- a/packages/react-aria-components/test/Tabs.test.js
+++ b/packages/react-aria-components/test/Tabs.test.js
@@ -649,6 +649,42 @@ describe('Tabs', () => {
     expect(tabs[2]).toHaveAttribute('aria-selected', 'true');
   });
 
+  it('should support tabpanels with aria-labels', () => {
+    let {getByTestId} = render(
+      <Tabs>
+        <TabList aria-label="test">
+          <Tab id="a">A</Tab>
+          <Tab id="b">B</Tab>
+        </TabList>
+        <TabPanels aria-label="test" data-testid="tabpanels">
+          <TabPanel id="a">A</TabPanel>
+          <TabPanel id="b">B</TabPanel>
+        </TabPanels>
+      </Tabs>
+    );
+
+    let tabPanels = getByTestId('tabpanels');
+    expect(tabPanels).toHaveAttribute('aria-label', 'test');
+  });
+
+  it('should support tabpanels with custom styles', () => {
+    let {getByTestId} = render(
+      <Tabs>
+        <TabList aria-label="test">
+          <Tab id="a">A</Tab>
+          <Tab id="b">B</Tab>
+        </TabList>
+        <TabPanels style={{width: '100px'}} data-testid="tabpanels">
+          <TabPanel id="a">A</TabPanel>
+          <TabPanel id="b">B</TabPanel>
+        </TabPanels>
+      </Tabs>
+    );
+
+    let tabPanels = getByTestId('tabpanels');
+    expect(tabPanels).toHaveStyle({width: '100px'});
+  });
+
   it('supports tooltips', async function () {
     let {getByRole, getAllByRole} = render(
       <Tabs>