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

…3446)
clerk · May 27, 2024 · d1c3c30 · d1c3c30
1 parent 0deaf07
commit d1c3c30
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 4 deletions.
diff --git a/.changeset/tall-fans-flow.md 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
@@ -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
@@ -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,