From bec8fdb3d325e1d3d4b527838ec0dac2cea0be99 Mon Sep 17 00:00:00 2001
From: Florian Duros <florianduros@element.io>
Date: Wed, 15 May 2024 16:25:30 +0200
Subject: [PATCH] Tooltip: Improve accessibility for  context menus (#12462)

* Update `ContextMenuTooltipButton.tsx`

* Fix placement

* Update tests

* Update space panel snapshot

* Remove default placement

* Update snapshots

* Fix tooltip child rerender

* Remove useless props title
---
 .../context_menu/ContextMenuTooltipButton.tsx          | 10 +++++-----
 src/components/views/elements/AccessibleButton.tsx     |  7 +++++++
 .../spaces/__snapshots__/SpacePanel-test.tsx.snap      |  4 ++--
 3 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/src/accessibility/context_menu/ContextMenuTooltipButton.tsx b/src/accessibility/context_menu/ContextMenuTooltipButton.tsx
index 2ae8a5de9d..3a3048d41f 100644
--- a/src/accessibility/context_menu/ContextMenuTooltipButton.tsx
+++ b/src/accessibility/context_menu/ContextMenuTooltipButton.tsx
@@ -18,9 +18,9 @@ limitations under the License.
 
 import React, { ComponentProps, forwardRef, Ref } from "react";
 
-import AccessibleTooltipButton from "../../components/views/elements/AccessibleTooltipButton";
+import AccessibleButton from "../../components/views/elements/AccessibleButton";
 
-type Props<T extends keyof JSX.IntrinsicElements> = ComponentProps<typeof AccessibleTooltipButton<T>> & {
+type Props<T extends keyof JSX.IntrinsicElements> = ComponentProps<typeof AccessibleButton<T>> & {
     // whether the context menu is currently open
     isExpanded: boolean;
 };
@@ -31,17 +31,17 @@ export const ContextMenuTooltipButton = forwardRef(function <T extends keyof JSX
     ref: Ref<HTMLElement>,
 ) {
     return (
-        <AccessibleTooltipButton
+        <AccessibleButton
             {...props}
             element={element as keyof JSX.IntrinsicElements}
             onClick={onClick}
             onContextMenu={onContextMenu ?? onClick ?? undefined}
             aria-haspopup={true}
             aria-expanded={isExpanded}
-            forceHide={isExpanded}
+            disableTooltip={isExpanded}
             ref={ref}
         >
             {children}
-        </AccessibleTooltipButton>
+        </AccessibleButton>
     );
 });
diff --git a/src/components/views/elements/AccessibleButton.tsx b/src/components/views/elements/AccessibleButton.tsx
index d94162393e..76b90506dc 100644
--- a/src/components/views/elements/AccessibleButton.tsx
+++ b/src/components/views/elements/AccessibleButton.tsx
@@ -106,6 +106,11 @@ type Props<T extends keyof JSX.IntrinsicElements> = DynamicHtmlElementProps<T> &
      * Callback for when the tooltip is opened or closed.
      */
     onTooltipOpenChange?: TooltipProps["onOpenChange"];
+
+    /**
+     * Whether the tooltip should be disabled.
+     */
+    disableTooltip?: TooltipProps["disabled"];
 };
 
 /**
@@ -140,6 +145,7 @@ const AccessibleButton = forwardRef(function <T extends keyof JSX.IntrinsicEleme
         caption,
         placement = "right",
         onTooltipOpenChange,
+        disableTooltip,
         ...restProps
     }: Props<T>,
     ref: Ref<HTMLElement>,
@@ -217,6 +223,7 @@ const AccessibleButton = forwardRef(function <T extends keyof JSX.IntrinsicEleme
                 isTriggerInteractive={true}
                 placement={placement}
                 onOpenChange={onTooltipOpenChange}
+                disabled={disableTooltip}
             >
                 {button}
             </Tooltip>
diff --git a/test/components/views/spaces/__snapshots__/SpacePanel-test.tsx.snap b/test/components/views/spaces/__snapshots__/SpacePanel-test.tsx.snap
index 22735eb9e7..8a155b3033 100644
--- a/test/components/views/spaces/__snapshots__/SpacePanel-test.tsx.snap
+++ b/test/components/views/spaces/__snapshots__/SpacePanel-test.tsx.snap
@@ -229,8 +229,8 @@ exports[`<SpacePanel /> should show all activated MetaSpaces in the correct orde
       class="mx_ThreadsActivityCentre_container"
     >
       <button
-        aria-controls="floating-ui-35"
-        aria-describedby="floating-ui-35"
+        aria-controls="floating-ui-39"
+        aria-describedby="floating-ui-39"
         aria-expanded="true"
         aria-haspopup="dialog"
         aria-label="Threads"