Fix Menu Section aria-label (#6423)

* Fix Menu Section aria-label

Author: snowystinger

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

@@ -229,7 +229,7 @@ function MenuSection<T>({section, className, style, parentMenuRef, ...otherProps
   let [headingRef, heading] = useSlot();
   let {headingProps, groupProps} = useMenuSection({
     heading,
-    'aria-label': section['aria-label'] ?? undefined
+    'aria-label': section.props['aria-label'] ?? undefined
   });
 
   let children = useCachedChildren({

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

@@ -25,8 +25,7 @@ export const MenuExample = () => (
     <Button aria-label="Menu">☰</Button>
     <Popover>
       <Menu className={styles.menu} onAction={action('onAction')}>
-        <Section className={styles.group}>
-          <Header style={{fontSize: '1.2em'}}>Section 1</Header>
+        <Section className={styles.group} aria-label={'Section 1'}>
           <MyMenuItem>Foo</MyMenuItem>
           <MyMenuItem>Bar</MyMenuItem>
           <MyMenuItem>Baz</MyMenuItem>

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

@@ -116,14 +116,15 @@ describe('Menu', () => {
     let itemRef = React.createRef();
     render(
       <Menu aria-label="Test" ref={listBoxRef}>
-        <Section ref={sectionRef}>
+        <Section ref={sectionRef} aria-label="Felines">
           <MenuItem ref={itemRef}>Cat</MenuItem>
         </Section>
       </Menu>
     );
     expect(listBoxRef.current).toBeInstanceOf(HTMLElement);
     expect(sectionRef.current).toBeInstanceOf(HTMLElement);
     expect(itemRef.current).toBeInstanceOf(HTMLElement);
+    expect(sectionRef.current).toHaveAttribute('aria-label', 'Felines');
   });
 
   it('should support hover', async () => {