From d1c3c30124c10c7d96b25908d0fff7e1667726b0 Mon Sep 17 00:00:00 2001
From: panteliselef <panteliselef@outlook.com>
Date: Mon, 27 May 2024 13:33:10 +0300
Subject: [PATCH] fix(clerk-js): Add `aria-label` and `aria-expanded` in menu
 trigger (#3446)

---
 .changeset/tall-fans-flow.md                        |  5 +++++
 packages/clerk-js/src/ui/elements/Menu.tsx          | 10 +++++++---
 packages/clerk-js/src/ui/elements/ThreeDotsMenu.tsx |  2 +-
 3 files changed, 13 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/tall-fans-flow.md

diff --git a/.changeset/tall-fans-flow.md b/.changeset/tall-fans-flow.md
new file mode 100644
index 00000000000..ffad095933b
--- /dev/null
+++ b/.changeset/tall-fans-flow.md
@@ -0,0 +1,5 @@
+---
+'@clerk/clerk-js': patch
+---
+
+Add `aria-label` and `aria-expanded` in menu trigger to improve accessibility
diff --git a/packages/clerk-js/src/ui/elements/Menu.tsx b/packages/clerk-js/src/ui/elements/Menu.tsx
index 713c761c1df..810b21afb86 100644
--- a/packages/clerk-js/src/ui/elements/Menu.tsx
+++ b/packages/clerk-js/src/ui/elements/Menu.tsx
@@ -44,12 +44,14 @@ 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 } = popoverCtx;
+  const { reference, toggle, isOpen } = popoverCtx;
+
+  const normalizedAriaLabel = typeof arialLabel === 'function' ? arialLabel(isOpen) : arialLabel;
 
   if (!isValidElement(children)) {
     return null;
@@ -60,6 +62,8 @@ export const MenuTrigger = (props: MenuTriggerProps) => {
     ref: reference,
     elementDescriptor: children.props.elementDescriptor || descriptors.menuButton,
     elementId: children.props.elementId || descriptors.menuButton.setId(elementId),
+    'aria-label': normalizedAriaLabel,
+    'aria-expanded': isOpen,
     onClick: (e: React.MouseEvent) => {
       children.props?.onClick?.(e);
       toggle();
diff --git a/packages/clerk-js/src/ui/elements/ThreeDotsMenu.tsx b/packages/clerk-js/src/ui/elements/ThreeDotsMenu.tsx
index 64d30369240..6e55ba7c2dc 100644
--- a/packages/clerk-js/src/ui/elements/ThreeDotsMenu.tsx
+++ b/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,