feat(Menu): pass aria-label to menu button instead of menu (#4177)

* feat(Menu): pass `aria-label` to menu button instead of menu

When using `<Menu>` with only a icon and no text element, there needs to be a `aria-label` on the button.

* Create flat-bugs-sparkle.md

.changeset/flat-bugs-sparkle.md

@@ -0,0 +1,5 @@
+---
+"@marigold/components": patch
+---
+
+feat(Menu): pass `aria-label` to menu button instead of menu

packages/components/src/Menu/Menu.test.tsx

@@ -1,6 +1,6 @@
 import { cleanup, fireEvent, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import React from 'react';
+import React, { SVGProps } from 'react';
 import { Theme, cva } from '@marigold/system';
 import { Button } from '../Button';
 import { setup } from '../test.utils';
@@ -316,3 +316,25 @@ test('supports Menu with sections', () => {
   expect(screen.getByText('Food')).toBeInTheDocument();
   expect(screen.getByText('Fruits')).toBeInTheDocument();
 });
+
+test('pass "aria-label" to button (when you use a menu with only an icon)', () => {
+  const Icon = (props: SVGProps<SVGSVGElement>) => (
+    <svg {...props}>
+      <circle cx={12} cy={12} r={10} />
+    </svg>
+  );
+
+  render(
+    <Menu
+      data-testid="menu"
+      aria-label="Descriptive label for the button"
+      label={<Icon />}
+    >
+      <Menu.Item key="burger">Burger</Menu.Item>
+      <Menu.Item key="pizza">Pizza</Menu.Item>
+    </Menu>
+  );
+
+  const btn = screen.getByLabelText('Descriptive label for the button');
+  expect(btn).toBeInTheDocument();
+});

packages/components/src/Menu/Menu.tsx

@@ -57,13 +57,14 @@ const _Menu = ({
   disabled,
   open,
   placement,
+  'aria-label': ariaLabel,
   ...props
 }: MenuProps) => {
   const classNames = useClassNames({ component: 'Menu', variant, size });
 
   return (
     <MenuTrigger {...props}>
-      <Button variant="menu" disabled={disabled}>
+      <Button variant="menu" disabled={disabled} aria-label={ariaLabel}>
         {label}
       </Button>
       <Popover open={open} placement={placement}>