Tooltip: Use AccessibleButton in dialogs (#12460)

* Update dialogs * Use default right placement
matrix-org · Apr 29, 2024 · 9aeaa38 · 9aeaa38
1 parent 44e2a6d
commit 9aeaa38
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 14 deletions.
diff --git a/src/components/views/dialogs/ForwardDialog.tsx b/src/components/views/dialogs/ForwardDialog.tsx
@@ -41,8 +41,6 @@ import { avatarUrlForUser } from "../../../Avatar";
 import EventTile from "../rooms/EventTile";
 import SearchBox from "../../structures/SearchBox";
 import DecoratedRoomAvatar from "../avatars/DecoratedRoomAvatar";
-import { Alignment } from "../elements/Tooltip";
-import AccessibleTooltipButton from "../elements/AccessibleTooltipButton";
 import AutoHideScrollbar from "../../structures/AutoHideScrollbar";
 import { StaticNotificationState } from "../../../stores/notifications/StaticNotificationState";
 import NotificationBadge from "../rooms/NotificationBadge";
@@ -54,7 +52,7 @@ import EntityTile from "../rooms/EntityTile";
 import BaseAvatar from "../avatars/BaseAvatar";
 import { Action } from "../../../dispatcher/actions";
 import { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
-import { ButtonEvent } from "../elements/AccessibleButton";
+import AccessibleButton, { ButtonEvent } from "../elements/AccessibleButton";
 import { isLocationEvent } from "../../../utils/EventUtils";
 import { isSelfLocation, locationEventGeoUri } from "../../../utils/location";
 import { RoomContextDetails } from "../rooms/RoomContextDetails";
@@ -159,32 +157,32 @@ const Entry: React.FC<IEntryProps<any>> = ({ room, type, content, matrixClient:
             onFocus={onFocus}
             id={id}
         >
-            <AccessibleTooltipButton
+            <AccessibleButton
                 className="mx_ForwardList_roomButton"
                 onClick={jumpToRoom}
                 title={_t("forward|open_room")}
-                alignment={Alignment.Top}
+                placement="top"
                 tabIndex={isActive ? 0 : -1}
             >
                 <DecoratedRoomAvatar room={room} size="32px" tooltipProps={{ tabIndex: isActive ? 0 : -1 }} />
                 <span className="mx_ForwardList_entry_name" id={`${id}_name`}>
                     {room.name}
                 </span>
                 <RoomContextDetails component="span" className="mx_ForwardList_entry_detail" room={room} />
-            </AccessibleTooltipButton>
-            <AccessibleTooltipButton
+            </AccessibleButton>
+            <AccessibleButton
                 kind={sendState === SendState.Failed ? "danger_outline" : "primary_outline"}
                 className={`mx_ForwardList_sendButton ${className}`}
                 onClick={send}
                 disabled={disabled}
                 title={title}
-                alignment={Alignment.Top}
+                placement="top"
                 tabIndex={isActive ? 0 : -1}
                 id={`${id}_send`}
             >
                 <div className="mx_ForwardList_sendLabel">{_t("forward|send_label")}</div>
                 {icon}
-            </AccessibleTooltipButton>
+            </AccessibleButton>
         </div>
     );
 };

diff --git a/src/components/views/dialogs/spotlight/SpotlightDialog.tsx b/src/components/views/dialogs/spotlight/SpotlightDialog.tsx
@@ -939,7 +939,9 @@ const SpotlightDialog: React.FC<IProps> = ({ initialText = "", initialFilter = n
                             setInviteLinkCopied(true);
                             copyPlaintext(ownInviteLink);
                         }}
-                        onHideTooltip={() => setInviteLinkCopied(false)}
+                        onTooltipOpenChange={(open) => {
+                            if (!open) setInviteLinkCopied(false);
+                        }}
                         title={inviteLinkCopied ? _t("common|copied") : _t("action|copy")}
                     >
                         <span className="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary_outline">

diff --git a/src/components/views/dialogs/spotlight/TooltipOption.tsx b/src/components/views/dialogs/spotlight/TooltipOption.tsx
@@ -17,18 +17,19 @@ limitations under the License.
 import classNames from "classnames";
 import React, { ComponentProps, ReactNode } from "react";
 
-import { RovingAccessibleTooltipButton } from "../../../../accessibility/roving/RovingAccessibleTooltipButton";
 import { useRovingTabIndex } from "../../../../accessibility/RovingTabIndex";
-import AccessibleTooltipButton from "../../elements/AccessibleTooltipButton";
+import AccessibleButton from "../../elements/AccessibleButton";
+import { Ref } from "../../../../accessibility/roving/types";
 
-interface TooltipOptionProps extends ComponentProps<typeof RovingAccessibleTooltipButton> {
+interface TooltipOptionProps extends ComponentProps<typeof AccessibleButton> {
     endAdornment?: ReactNode;
+    inputRef?: Ref;
 }
 
 export const TooltipOption: React.FC<TooltipOptionProps> = ({ inputRef, className, ...props }) => {
     const [onFocus, isActive, ref] = useRovingTabIndex(inputRef);
     return (
-        <AccessibleTooltipButton
+        <AccessibleButton
             {...props}
             className={classNames(className, "mx_SpotlightDialog_option")}
             onFocus={onFocus}