Replace otherProps with section.props to ensure that section props are properly passed in (#4845)

Co-authored-by: Andrew Chough <[email protected]>
Co-authored-by: Reid Barber <[email protected]>

Author: 3 people

packages/react-aria-components/src/ListBox.tsx

@@ -265,7 +265,7 @@ interface ListBoxSectionProps<T> extends StyleProps {
   section: Node<T>
 }
 
-function ListBoxSection<T>({section, className, style, ...otherProps}: ListBoxSectionProps<T>) {
+function ListBoxSection<T>({section, className, style}: ListBoxSectionProps<T>) {
   let {state} = useContext(InternalListBoxContext)!;
   let [headingRef, heading] = useSlot();
   let {headingProps, groupProps} = useListBoxSection({
@@ -298,7 +298,7 @@ function ListBoxSection<T>({section, className, style, ...otherProps}: ListBoxSe
 
   return (
     <section
-      {...filterDOMProps(otherProps)}
+      {...filterDOMProps(section.props)}
       {...groupProps}
       className={className || section.props?.className || 'react-aria-Section'}
       style={style || section.props?.style}

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

@@ -131,13 +131,13 @@ describe('ListBox', () => {
   it('should support sections', () => {
     let {getAllByRole} = render(
       <ListBox aria-label="Sandwich contents" selectionMode="multiple">
-        <Section>
+        <Section data-test-prop="test-section-1">
           <Header>Veggies</Header>
           <Item id="lettuce">Lettuce</Item>
           <Item id="tomato">Tomato</Item>
           <Item id="onion">Onion</Item>
         </Section>
-        <Section>
+        <Section data-test-prop="test-section-2">
           <Header>Protein</Header>
           <Item id="ham">Ham</Item>
           <Item id="tuna">Tuna</Item>
@@ -154,6 +154,9 @@ describe('ListBox', () => {
 
     expect(groups[0]).toHaveAttribute('aria-labelledby');
     expect(document.getElementById(groups[0].getAttribute('aria-labelledby'))).toHaveTextContent('Veggies');
+
+    expect(groups[0]).toHaveAttribute('data-test-prop', 'test-section-1');
+    expect(groups[1]).toHaveAttribute('data-test-prop', 'test-section-2');
   });
 
   it('should support dynamic collections', () => {