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
tchapgouv · May 15, 2024 · bec8fdb · bec8fdb
1 parent 580bc87
commit bec8fdb
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 7 deletions.
diff --git 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
@@ -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
@@ -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"