From 45132ec6aa5415939d2ec0c0e0a7e0646a49ac40 Mon Sep 17 00:00:00 2001
From: Florian Duros <florianduros@element.io>
Date: Fri, 26 Apr 2024 12:17:13 +0200
Subject: [PATCH] MenuItem: fix caption usage (#12455)

* Add placement and fix additional span for `AccessibleButton`

* Use only `RovingAccessibleButton` in `MenuItem`

* Replace `tooltip` by `caption`

* Update snapshots
---
 src/accessibility/context_menu/MenuItem.tsx   | 13 ++-----------
 src/components/views/rooms/RoomList.tsx       |  8 ++++----
 src/components/views/rooms/RoomListHeader.tsx |  4 ++--
 3 files changed, 8 insertions(+), 17 deletions(-)

diff --git a/src/accessibility/context_menu/MenuItem.tsx b/src/accessibility/context_menu/MenuItem.tsx
index a244602a09..db3c64468b 100644
--- a/src/accessibility/context_menu/MenuItem.tsx
+++ b/src/accessibility/context_menu/MenuItem.tsx
@@ -18,25 +18,16 @@ limitations under the License.
 
 import React from "react";
 
-import { RovingAccessibleButton, RovingAccessibleTooltipButton } from "../RovingTabIndex";
+import { RovingAccessibleButton } from "../RovingTabIndex";
 
 interface IProps extends React.ComponentProps<typeof RovingAccessibleButton> {
     label?: string;
-    tooltip?: string;
 }
 
 // Semantic component for representing a role=menuitem
-export const MenuItem: React.FC<IProps> = ({ children, label, tooltip, ...props }) => {
+export const MenuItem: React.FC<IProps> = ({ children, label, ...props }) => {
     const ariaLabel = props["aria-label"] || label;
 
-    if (tooltip) {
-        return (
-            <RovingAccessibleTooltipButton {...props} role="menuitem" aria-label={ariaLabel} title={tooltip}>
-                {children}
-            </RovingAccessibleTooltipButton>
-        );
-    }
-
     return (
         <RovingAccessibleButton {...props} role="menuitem" aria-label={ariaLabel}>
             {children}
diff --git a/src/components/views/rooms/RoomList.tsx b/src/components/views/rooms/RoomList.tsx
index 073950e30f..d573f3bbf0 100644
--- a/src/components/views/rooms/RoomList.tsx
+++ b/src/components/views/rooms/RoomList.tsx
@@ -160,7 +160,7 @@ const DmAuxButton: React.FC<IAuxButtonProps> = ({ tabIndex, dispatcher = default
                                     showSpaceInvite(activeSpace);
                                 }}
                                 disabled={!canInvite}
-                                tooltip={canInvite ? undefined : _t("spaces|error_no_permission_invite")}
+                                title={canInvite ? undefined : _t("spaces|error_no_permission_invite")}
                             />
                         )}
                     </IconizedContextMenuOptionList>
@@ -250,7 +250,7 @@ const UntaggedAuxButton: React.FC<IAuxButtonProps> = ({ tabIndex }) => {
                                 PosthogTrackers.trackInteraction("WebRoomListRoomsSublistPlusMenuCreateRoomItem", e);
                             }}
                             disabled={!canAddRooms}
-                            tooltip={canAddRooms ? undefined : _t("spaces|error_no_permission_create_room")}
+                            title={canAddRooms ? undefined : _t("spaces|error_no_permission_create_room")}
                         />
                         {videoRoomsEnabled && (
                             <IconizedContextMenuOption
@@ -266,7 +266,7 @@ const UntaggedAuxButton: React.FC<IAuxButtonProps> = ({ tabIndex }) => {
                                     );
                                 }}
                                 disabled={!canAddRooms}
-                                tooltip={canAddRooms ? undefined : _t("spaces|error_no_permission_create_room")}
+                                title={canAddRooms ? undefined : _t("spaces|error_no_permission_create_room")}
                             >
                                 <BetaPill />
                             </IconizedContextMenuOption>
@@ -281,7 +281,7 @@ const UntaggedAuxButton: React.FC<IAuxButtonProps> = ({ tabIndex }) => {
                                 showAddExistingRooms(activeSpace);
                             }}
                             disabled={!canAddRooms}
-                            tooltip={canAddRooms ? undefined : _t("spaces|error_no_permission_add_room")}
+                            title={canAddRooms ? undefined : _t("spaces|error_no_permission_add_room")}
                         />
                     </>
                 ) : null}
diff --git a/src/components/views/rooms/RoomListHeader.tsx b/src/components/views/rooms/RoomListHeader.tsx
index 690300dfa2..bcd918eaf3 100644
--- a/src/components/views/rooms/RoomListHeader.tsx
+++ b/src/components/views/rooms/RoomListHeader.tsx
@@ -267,7 +267,7 @@ const RoomListHeader: React.FC<IProps> = ({ onVisibilityChange }) => {
                             closePlusMenu();
                         }}
                         disabled={!canAddSubRooms}
-                        tooltip={!canAddSubRooms ? _t("spaces|error_no_permission_add_room") : undefined}
+                        title={!canAddSubRooms ? _t("spaces|error_no_permission_add_room") : undefined}
                     />
                     {canCreateSpaces && (
                         <IconizedContextMenuOption
@@ -280,7 +280,7 @@ const RoomListHeader: React.FC<IProps> = ({ onVisibilityChange }) => {
                                 closePlusMenu();
                             }}
                             disabled={!canAddSubSpaces}
-                            tooltip={!canAddSubSpaces ? _t("spaces|error_no_permission_add_space") : undefined}
+                            title={!canAddSubSpaces ? _t("spaces|error_no_permission_add_space") : undefined}
                         >
                             <BetaPill />
                         </IconizedContextMenuOption>