issue-2429: Pass item data attributes to DOM (#2655)

* issue-2429: Pass item data attributes to DOM

* PR review: extract id from domProps

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

Author: khoad

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

@@ -165,11 +165,13 @@ function Tab<T>(props: TabProps<T>) {
     ...props
   });
   let isSelected = state.selectedKey === key;
+  let domProps = filterDOMProps(item.props);
+  delete domProps.id;
 
   return (
     <FocusRing focusRingClass={classNames(styles, 'focus-ring')}>
       <div
-        {...mergeProps(tabProps, hoverProps)}
+        {...mergeProps(tabProps, hoverProps, domProps)}
         ref={ref}
         className={classNames(
           styles,

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

@@ -24,13 +24,13 @@ let items = [
   {name: 'Tab 3', children: 'Tab 3 body'}
 ];
 
-function renderComponent(props) {
+function renderComponent(props, itemProps) {
   return render(
     <Provider theme={theme}>
       <Tabs {...props} items={items}>
         <TabList>
           {item => (
-            <Item key={item.name} title={item.name || item.children} />
+            <Item {...itemProps} key={item.name} title={item.name || item.children} />
           )}
         </TabList>
         <TabPanels>
@@ -638,12 +638,27 @@ describe('Tabs', function () {
     expect(tabPanelInput.value).toBe('');
   });
 
-  it('supports custom props', function () {
+  it('supports custom props for parent tabs element', function () {
     let {getByTestId} = renderComponent({'data-testid': 'tabs1'});
     let tabs = getByTestId('tabs1');
     expect(tabs).toBeInTheDocument();
   });
 
+  it('supports custom props for tab items', function () {
+    let {getAllByTestId} = renderComponent({}, {
+      'data-testid': 'tabItems',
+      'data-instance-id': 'instance-id',
+      'id': 'id-1'
+    });
+    let tabItems = getAllByTestId('tabItems');
+    expect(tabItems).toHaveLength(3);
+    for (let tabItem of tabItems) {
+      expect(tabItem).toHaveAttribute('data-instance-id', 'instance-id');
+      expect(tabItem).not.toHaveAttribute('id', 'id-1');
+      expect(tabItem).toBeInTheDocument();
+    }
+  });
+
   it('fires onSelectionChange when clicking on the current tab', function () {
     let container = renderComponent({defaultSelectedKey: items[0].name, onSelectionChange});
     let tablist = container.getByRole('tablist');