fix: labelable option to Tab props for aria-label support (#5408)

* fix: labelable option to Tab props for aria-label support

* Add test for RSP component as well

---------

Co-authored-by: Robert Snow <rsnow@adobe.com>
Co-authored-by: Yihui Liao <44729383+yihuiliao@users.noreply.github.com>

Author: 3 people

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

@@ -58,7 +58,7 @@ export function useTab<T>(
   let {tabIndex} = itemProps;
 
   let item = state.collection.getItem(key);
-  let domProps = filterDOMProps(item?.props, {isLink: !!item?.props?.href});
+  let domProps = filterDOMProps(item?.props, {isLink: !!item?.props?.href, labelable: true});
   delete domProps.id;
 
   return {

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

@@ -782,6 +782,30 @@ describe('Tabs', function () {
     expect(tabPanelInput.value).toBe('');
   });
 
+  it('Tabs can be aria-labelled', () => {
+    let {getAllByRole, getByLabelText} = render(
+      <Provider theme={theme}>
+        <Tabs aria-label="Tab Example" maxWidth={500}>
+          <TabList>
+            <Item aria-label="Foo">Tab 1</Item>
+            <Item>Tab 2</Item>
+          </TabList>
+          <TabPanels>
+            <Item>
+              <input data-testid="panel1_input" />
+            </Item>
+            <Item>
+              <input disabled data-testid="panel2_input" />
+            </Item>
+          </TabPanels>
+        </Tabs>
+      </Provider>
+    );
+
+    let tab = getByLabelText('Foo');
+    expect(tab).toBe(getAllByRole('tab')[0]);
+  });
+
   it('supports custom props for parent tabs element', function () {
     let {getByTestId} = renderComponent({'data-testid': 'tabs1'});
     let tabs = getByTestId('tabs1');

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

@@ -313,4 +313,24 @@ describe('Tabs', () => {
     fireEvent.keyDown(tabs[1], {key: 'ArrowRight'});
     expect(tabs[2]).toHaveAttribute('aria-selected', 'true');
   });
+
+  it('should render tab with aria-label', () => {
+    let {getAllByRole} = render(
+      <Tabs>
+        <TabList>
+          <Tab id="a" aria-label="Tab A">A</Tab>
+          <Tab id="b" aria-label="Tab B">B</Tab>
+          <Tab id="c" aria-label="Tab C">C</Tab>
+        </TabList>
+        <TabPanel id="a">A</TabPanel>
+        <TabPanel id="b">B</TabPanel>
+        <TabPanel id="c">C</TabPanel>
+      </Tabs>
+    );
+
+    let tabs = getAllByRole('tab');
+    expect(tabs[0]).toHaveAttribute('aria-label', 'Tab A');
+    expect(tabs[1]).toHaveAttribute('aria-label', 'Tab B');
+    expect(tabs[2]).toHaveAttribute('aria-label', 'Tab C');
+  });
 });