fix(#1271): tabpanel should be labelled by the Picker button element when Tabs are collapsed

packages/@react-spectrum/tabs/src/Tabs.tsx

@@ -14,7 +14,7 @@ import {classNames, SlotProvider, unwrapDOMRef, useStyleProps, useValueEffect} f
 import {DOMProps, Node, Orientation} from '@react-types/shared';
 import {FocusRing} from '@react-aria/focus';
 import {Item, Picker} from '@react-spectrum/picker';
-import {mergeProps, useLayoutEffect} from '@react-aria/utils';
+import {mergeProps, useId, useLayoutEffect} from '@react-aria/utils';
 import React, {HTMLAttributes, Key, MutableRefObject, useCallback, useEffect, useRef, useState} from 'react';
 import {SingleSelectListState, useSingleSelectListState} from '@react-stately/list';
 import {SpectrumPickerProps} from '@react-types/select';
@@ -105,6 +105,12 @@ export function Tabs<T extends object>(props: SpectrumTabsProps<T>) {
 
   useResizeObserver({ref: wrapperRef, onResize: checkShouldCollapse});
 
+  // When the tabs are collapsed, the tabPanel should be labelled by the Picker button element.
+  let collapsibleTabListId = useId();
+  if (collapse && orientation !== 'vertical') {
+    tabPanelProps['aria-labelledby'] = collapsibleTabListId;
+  }
+
   let tablist = (
     <TabList
       {...tabListProps}
@@ -130,6 +136,7 @@ export function Tabs<T extends object>(props: SpectrumTabsProps<T>) {
       {orientation !== 'vertical' &&
         <CollapsibleTabList
           {...props}
+          id={collapsibleTabListId}
           tabListclassName={classNames(
             styles,
             'spectrum-TabsPanel-tabs'
@@ -349,7 +356,8 @@ function TabPicker<T>(props: TabPickerProps<T>) {
     'aria-labelledby': ariaLabeledBy,
     'aria-label': ariaLabel,
     density,
-    className
+    className,
+    id
   } = props;
 
   let ref = useRef();
@@ -393,6 +401,7 @@ function TabPicker<T>(props: TabPickerProps<T>) {
         }}>
         <Picker
           {...pickerProps}
+          id={id}
           items={items}
           ref={ref}
           isQuiet

packages/@react-spectrum/tabs/test/Tabs.test.js

@@ -318,6 +318,7 @@ describe('Tabs', function () {
 
     tabpanel = getByRole('tabpanel');
     expect(tabpanel).toHaveTextContent(items[2].children);
+    expect(tabpanel).toHaveAttribute('aria-labelledby', `${picker.id}`);
   });
 
   it('doesn\'t collapse when it can render all the tabs horizontally', function () {
@@ -407,6 +408,28 @@ describe('Tabs', function () {
 
     let picker = getByRole('button');
     expect(picker).toBeTruthy();
+    expect(tabpanel).toHaveAttribute('aria-labelledby', `${picker.id}`);
+
+    rerender(
+      <Provider theme={theme}>
+        <Tabs aria-label="Test Tabs" items={newItems} orientation="vertical">
+          {item => (
+            <Item key={item.name} title={item.name}>
+              {item.children}
+            </Item>
+          )}
+        </Tabs>
+      </Provider>
+    );
+
+    tablist = getByRole('tablist');
+    expect(tablist).toBeTruthy();
+    expect(() => getByRole('button')).toThrow();
+
+    tabpanel = getByRole('tabpanel');
+    expect(tabpanel).toBeTruthy();
+    expect(tabpanel).toHaveTextContent(items[0].children);
+    expect(tabpanel).toHaveAttribute('aria-labelledby', items[0].id);
 
     spy.mockImplementationOnce(function () {
       if (this instanceof HTMLDivElement) {
@@ -439,6 +462,7 @@ describe('Tabs', function () {
     tabpanel = getByRole('tabpanel');
     expect(tabpanel).toBeTruthy();
     expect(tabpanel).toHaveTextContent(items[1].children);
+    expect(tabpanel).toHaveAttribute('aria-labelledby', items[1].id);
 
     tablist = getByRole('tablist');
     expect(tablist).toBeTruthy();