Ensure Section has [data-rac] data attribute (#6452)

Author: amitdahan

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

@@ -266,13 +266,18 @@ function ListBoxSection<T extends object>(props: SectionProps<T>, ref: Forwarded
     heading,
     'aria-label': props['aria-label'] ?? undefined
   });
+  let renderProps = useRenderProps({
+    defaultClassName: 'react-aria-Section',
+    className: props.className,
+    style: props.style,
+    values: {}
+  });
 
   return (
     <section
       {...filterDOMProps(props as any)}
       {...groupProps}
-      className={props?.className || 'react-aria-Section'}
-      style={props?.style}
+      {...renderProps}
       ref={ref}>
       <HeaderContext.Provider value={{...headingProps, ref: headingRef}}>
         <CollectionChildren collection={state.collection} parent={section} />

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

@@ -230,13 +230,18 @@ function MenuSection<T extends object>(props: SectionProps<T>, ref: ForwardedRef
     heading,
     'aria-label': section.props['aria-label'] ?? undefined
   });
+  let renderProps = useRenderProps({
+    defaultClassName: 'react-aria-Section',
+    className: section.props?.className,
+    style: section.props?.style,
+    values: {}
+  });
 
   return (
     <section
       {...filterDOMProps(props as any)}
       {...groupProps}
-      className={section.props?.className || 'react-aria-Section'}
-      style={section.props?.style}
+      {...renderProps}
       ref={ref}>
       <HeaderContext.Provider value={{...headingProps, ref: headingRef}}>
         <CollectionChildren collection={state.collection} parent={section} />

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

@@ -67,6 +67,32 @@ describe('ListBox', () => {
     jest.restoreAllMocks();
   });
 
+  it('should have the base set of aria and data attributes', () => {
+    let {getByRole, getAllByRole} = render(
+      <ListBox aria-label="Animals">
+        <ListBoxItem id="cat">Cat</ListBoxItem>
+        <ListBoxItem id="dog">Dog</ListBoxItem>
+        <ListBoxItem id="kangaroo">Kangaroo</ListBoxItem>
+        <Section>
+          <Header>Fish</Header>
+          <ListBoxItem id="salmon">Salmon</ListBoxItem>
+          <ListBoxItem id="tuna">Tuna</ListBoxItem>
+          <ListBoxItem id="cod">Cod</ListBoxItem>
+        </Section>
+      </ListBox>
+    );
+    let menu = getByRole('listbox');
+    expect(menu).toHaveAttribute('data-rac');
+
+    for (let group of getAllByRole('group')) {
+      expect(group).toHaveAttribute('data-rac');
+    }
+
+    for (let option of getAllByRole('option')) {
+      expect(option).toHaveAttribute('data-rac');
+    }
+  });
+
   it('should render with default classes', () => {
     let {getByRole, getAllByRole} = renderListbox();
     let listbox = getByRole('listbox');

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

@@ -61,10 +61,26 @@ describe('Menu', () => {
   });
 
   it('should have the base set of aria and data attributes', () => {
-    let {getByRole, getAllByRole} = renderMenu();
+    let {getByRole, getAllByRole} = render(
+      <Menu aria-label="Animals">
+        <MenuItem id="cat">Cat</MenuItem>
+        <MenuItem id="dog">Dog</MenuItem>
+        <MenuItem id="kangaroo">Kangaroo</MenuItem>
+        <Section>
+          <Header>Fish</Header>
+          <MenuItem id="salmon">Salmon</MenuItem>
+          <MenuItem id="tuna">Tuna</MenuItem>
+          <MenuItem id="cod">Cod</MenuItem>
+        </Section>
+      </Menu>
+    );
     let menu = getByRole('menu');
     expect(menu).toHaveAttribute('data-rac');
 
+    for (let group of getAllByRole('group')) {
+      expect(group).toHaveAttribute('data-rac');
+    }
+
     for (let menuitem of getAllByRole('menuitem')) {
       expect(menuitem).toHaveAttribute('data-rac');
     }