fix(clerk-js): Add aria-label and aria-expanded in menu trigger

Author: panteliselef

packages/clerk-js/src/ui/elements/Menu.tsx

@@ -44,13 +44,15 @@ export const Menu = withFloatingTree((props: MenuProps) => {
   );
 });
 
-type MenuTriggerProps = React.PropsWithChildren<Record<never, never>>;
+type MenuTriggerProps = React.PropsWithChildren<{ arialLabel?: string | ((open: boolean) => string) }>;
 
 export const MenuTrigger = (props: MenuTriggerProps) => {
-  const { children } = props;
+  const { children, arialLabel } = props;
   const { popoverCtx, elementId } = useMenuState();
   const { reference, toggle, isOpen } = popoverCtx;
 
+  const normalizedAriaLabel = typeof arialLabel === 'function' ? arialLabel(isOpen) : arialLabel;
+
   if (!isValidElement(children)) {
     return null;
   }
@@ -60,7 +62,7 @@ export const MenuTrigger = (props: MenuTriggerProps) => {
     ref: reference,
     elementDescriptor: children.props.elementDescriptor || descriptors.menuButton,
     elementId: children.props.elementId || descriptors.menuButton.setId(elementId),
-    'aria-label': `${isOpen ? 'Close' : 'Open'} menu`,
+    'aria-label': normalizedAriaLabel,
     'aria-expanded': isOpen,
     onClick: (e: React.MouseEvent) => {
       children.props?.onClick?.(e);

packages/clerk-js/src/ui/elements/ThreeDotsMenu.tsx

@@ -21,7 +21,7 @@ export const ThreeDotsMenu = (props: ThreeDotsMenuProps) => {
   const { actions, elementId } = props;
   return (
     <Menu elementId={elementId}>
-      <MenuTrigger>
+      <MenuTrigger arialLabel={isOpen => `${isOpen ? 'Close' : 'Open'} menu`}>
         <Button
           sx={t => ({
             padding: t.space.$0x5,