Pass in ID into generateId function if it exists, add test to validate new prop (#4855)

Co-authored-by: Andrew Chough <[email protected]>
Co-authored-by: Daniel Lu <[email protected]>

Author: 3 people

packages/@react-aria/tabs/src/useTabPanel.ts

@@ -34,7 +34,7 @@ export function useTabPanel<T>(props: AriaTabPanelProps, state: TabListState<T>,
   // within the tabpanel.
   let tabIndex = useHasTabbableChild(ref) ? undefined : 0;
 
-  const id = generateId(state, state?.selectedKey, 'tabpanel');
+  const id = generateId(state, props.id ?? state?.selectedKey, 'tabpanel');
   const tabPanelProps = useLabels({...props, id, 'aria-labelledby': generateId(state, state?.selectedKey, 'tab')});
 
   return {

packages/react-aria-components/test/Tabs.test.js

@@ -181,6 +181,34 @@ describe('Tabs', () => {
     expect(tabs[0]).toHaveClass('selected');
   });
 
+  it('should update TabPanel ID when current tab is changed', () => {
+    let onSelectionChange = jest.fn();
+    let {getByRole, getAllByRole} = render(
+      <Tabs onSelectionChange={onSelectionChange}>
+        <TabList>
+          <Tab id="first-element">First</Tab>
+          <Tab id="second-element">Second</Tab>
+          <Tab id="third-element">Third</Tab>
+        </TabList>
+        <TabPanel id="first-element">First</TabPanel>
+        <TabPanel id="second-element">Second</TabPanel>
+        <TabPanel id="third-element">Third</TabPanel>
+      </Tabs>
+    );
+
+    expect(getByRole('tabpanel').getAttribute('id')).toContain('first-element');
+    let tabs = getAllByRole('tab');
+
+    userEvent.click(tabs[1]);
+    expect(onSelectionChange).toHaveBeenCalled();
+    expect(getByRole('tabpanel').getAttribute('id')).toContain('second-element');
+
+    userEvent.click(tabs[2]);
+    expect(onSelectionChange).toHaveBeenCalled();
+    expect(getByRole('tabpanel').getAttribute('id')).toContain('third-element');
+
+  });
+
   it('should support orientation', () => {
     let className = ({orientation}) => orientation;
     let {getByRole} = renderTabs({orientation: 'vertical', className}, {className});