From a00e66be88d27bef951b6444324b13e51b4f694c Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro.celaya@hypothes.is>
Date: Tue, 7 Jan 2025 14:21:41 +0100
Subject: [PATCH] Allow custom toggle title to be passed to MenuItems

---
 .../components/GroupList/GroupListItem.tsx    |  1 +
 src/sidebar/components/MenuItem.tsx           | 15 +++++++++-
 src/sidebar/components/test/MenuItem-test.js  | 29 +++++++++++++++++++
 3 files changed, 44 insertions(+), 1 deletion(-)

diff --git a/src/sidebar/components/GroupList/GroupListItem.tsx b/src/sidebar/components/GroupList/GroupListItem.tsx
index 6bb7ba5c48a..1ce7b802cf5 100644
--- a/src/sidebar/components/GroupList/GroupListItem.tsx
+++ b/src/sidebar/components/GroupList/GroupListItem.tsx
@@ -136,6 +136,7 @@ function GroupListItem({
       leftChannelContent={leftChannelContent}
       onClick={isSelectable ? focusGroup : toggleSubmenu}
       onToggleSubmenu={toggleSubmenu}
+      submenuToggleTitle={`Show actions for ${group.name}`}
       submenu={
         <>
           <ul>
diff --git a/src/sidebar/components/MenuItem.tsx b/src/sidebar/components/MenuItem.tsx
index e3d298b1074..39596a1fe1f 100644
--- a/src/sidebar/components/MenuItem.tsx
+++ b/src/sidebar/components/MenuItem.tsx
@@ -112,6 +112,7 @@ export type MenuItemProps = {
 
   onClick?: (e: Event) => void;
   onToggleSubmenu?: (e: Event) => void;
+
   /**
    * Contents of the submenu for this item.  This is typically a list of
    * `MenuItem` components with the `isSubmenuItem` prop set to `true`, but can
@@ -119,6 +120,12 @@ export type MenuItemProps = {
    * `isSubmenuVisible` is `true`.
    */
   submenu?: ComponentChildren;
+
+  /**
+   * Custom title for the submenu toggle button.
+   * Omit this prop if there is no submenu.
+   */
+  submenuToggleTitle?: string;
 };
 
 /**
@@ -150,6 +157,7 @@ export default function MenuItem({
   onClick,
   onToggleSubmenu,
   submenu,
+  submenuToggleTitle,
 }: MenuItemProps) {
   const menuItemRef = useRef<HTMLAnchorElement | HTMLDivElement | null>(null);
 
@@ -226,7 +234,12 @@ export default function MenuItem({
       )}
       {hasSubmenuVisible && (
         <SubmenuToggle
-          title={`Show actions for ${label}`}
+          title={
+            submenuToggleTitle ??
+            (typeof label === 'string'
+              ? `Show actions for ${label}`
+              : `Toggle submenu`)
+          }
           isExpanded={isSubmenuVisible}
           onToggleSubmenu={onToggleSubmenu}
         />
diff --git a/src/sidebar/components/test/MenuItem-test.js b/src/sidebar/components/test/MenuItem-test.js
index 17479071c14..518ab72c1e0 100644
--- a/src/sidebar/components/test/MenuItem-test.js
+++ b/src/sidebar/components/test/MenuItem-test.js
@@ -267,6 +267,35 @@ describe('MenuItem', () => {
       }
       // no assert needed
     });
+
+    [
+      {
+        label: 'The label',
+        submenuToggleTitle: 'Explicit title',
+        expectedTitle: 'Explicit title',
+      },
+      {
+        label: <span>Rich label</span>,
+        submenuToggleTitle: 'Explicit title',
+        expectedTitle: 'Explicit title',
+      },
+      { label: 'The label', expectedTitle: 'Show actions for The label' },
+      { label: <span>Rich label</span>, expectedTitle: 'Toggle submenu' },
+    ].forEach(({ label, submenuToggleTitle, expectedTitle }) => {
+      it('shows right title in SubmenuToggle', () => {
+        const wrapper = createMenuItem({
+          label,
+          submenuToggleTitle,
+          isSubmenuVisible: true,
+          submenu: <div role="menuitem">Submenu content</div>,
+        });
+
+        assert.equal(
+          wrapper.find('SubmenuToggle').prop('title'),
+          expectedTitle,
+        );
+      });
+    });
   });
 
   it(