Use new tooltip in RoomTopic.tsx

matrix-org · May 16, 2024 · 5fee5a8 · 5fee5a8
1 parent bec8fdb
commit 5fee5a8
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 39 deletions.
diff --git a/res/css/views/rooms/_LegacyRoomHeader.pcss b/res/css/views/rooms/_LegacyRoomHeader.pcss
@@ -132,6 +132,9 @@ limitations under the License.
 .mx_RoomTopic {
     position: relative;
     cursor: pointer;
+    background-color: transparent;
+    border: none;
+    text-align: start;
 }
 
 .mx_LegacyRoomHeader_topic {

diff --git a/src/components/views/elements/RoomTopic.tsx b/src/components/views/elements/RoomTopic.tsx
@@ -14,12 +14,12 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { useCallback, useContext, useRef } from "react";
+import React, { useCallback, useContext, useState } from "react";
 import { Room, EventType } from "matrix-js-sdk/src/matrix";
 import classNames from "classnames";
+import { Tooltip } from "@vector-im/compound-web";
 
 import { useTopic } from "../../../hooks/room/useTopic";
-import { Alignment } from "./Tooltip";
 import { _t } from "../../../languageHandler";
 import dis from "../../../dispatcher/dispatcher";
 import { Action } from "../../../dispatcher/actions";
@@ -28,11 +28,10 @@ import InfoDialog from "../dialogs/InfoDialog";
 import { useDispatcher } from "../../../hooks/useDispatcher";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import AccessibleButton from "./AccessibleButton";
-import TooltipTarget from "./TooltipTarget";
 import { Linkify, topicToHtml } from "../../../HtmlUtils";
 import { tryTransformPermalinkToLocalHref } from "../../../utils/permalinks/Permalinks";
 
-interface IProps extends React.HTMLProps<HTMLDivElement> {
+interface IProps extends React.HTMLProps<HTMLButtonElement> {
     room: Room;
 }
 
@@ -49,13 +48,13 @@ export function onRoomTopicLinkClick(e: React.MouseEvent): void {
 
 export default function RoomTopic({ room, className, ...props }: IProps): JSX.Element {
     const client = useContext(MatrixClientContext);
-    const ref = useRef<HTMLDivElement>(null);
+    const [disableTooltip, setDisableTooltip] = useState(false);
 
     const topic = useTopic(room);
-    const body = topicToHtml(topic?.text, topic?.html, ref);
+    const body = topicToHtml(topic?.text, topic?.html);
 
     const onClick = useCallback(
-        (e: React.MouseEvent<HTMLDivElement>) => {
+        (e: React.MouseEvent<HTMLButtonElement>) => {
             props.onClick?.(e);
 
             const target = e.target as HTMLElement;
@@ -70,14 +69,14 @@ export default function RoomTopic({ room, className, ...props }: IProps): JSX.El
         [props],
     );
 
-    const ignoreHover = (ev: React.MouseEvent): boolean => {
-        return (ev.target as HTMLElement).tagName.toUpperCase() === "A";
+    const onHover = (ev: React.MouseEvent | React.FocusEvent): void => {
+        setDisableTooltip((ev.target as HTMLElement).tagName.toUpperCase() === "A");
     };
 
     useDispatcher(dis, (payload) => {
         if (payload.action === Action.ShowRoomTopic) {
             const canSetTopic = room.currentState.maySendStateEvent(EventType.RoomTopic, client.getSafeUserId());
-            const body = topicToHtml(topic?.text, topic?.html, ref, true);
+            const body = topicToHtml(topic?.text, topic?.html, undefined, true);
 
             const modal = Modal.createDialog(InfoDialog, {
                 title: room.name,
@@ -86,7 +85,7 @@ export default function RoomTopic({ room, className, ...props }: IProps): JSX.El
                         <Linkify
                             options={{
                                 attributes: {
-                                    onClick(e: React.MouseEvent<HTMLDivElement>) {
+                                    onClick(e: React.MouseEvent<HTMLButtonElement>) {
                                         onClick(e);
                                         modal.close();
                                     },
@@ -116,17 +115,18 @@ export default function RoomTopic({ room, className, ...props }: IProps): JSX.El
     });
 
     return (
-        <TooltipTarget
-            {...props}
-            ref={ref}
-            onClick={onClick}
-            dir="auto"
-            tooltipTargetClassName={classNames(className, "mx_RoomTopic")}
-            label={_t("room|read_topic")}
-            alignment={Alignment.Bottom}
-            ignoreHover={ignoreHover}
-        >
-            <Linkify>{body}</Linkify>
-        </TooltipTarget>
+        <Tooltip label={_t("room|read_topic")} disabled={disableTooltip}>
+            <button
+                {...props}
+                type="button"
+                onClick={onClick}
+                className={classNames(className, "mx_RoomTopic")}
+                onMouseOver={onHover}
+                onFocus={onHover}
+                aria-label={_t("room|read_topic")}
+            >
+                <Linkify>{body}</Linkify>
+            </button>
+        </Tooltip>
     );
 }
diff --git a/test/components/structures/__snapshots__/RoomView-test.tsx.snap b/test/components/structures/__snapshots__/RoomView-test.tsx.snap
@@ -42,11 +42,10 @@ exports[`RoomView for a local room in state CREATING should match the snapshot 1
             @user:example.com
           </div>
         </div>
-        <div
-          aria-describedby="mx_TooltipTarget_vY7Q4uEh"
+        <button
+          aria-label="Click to read topic"
           class="mx_LegacyRoomHeader_topic mx_RoomTopic"
-          dir="auto"
-          tabindex="0"
+          type="button"
         />
       </div>
     </header>
@@ -120,11 +119,10 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
             @user:example.com
           </div>
         </div>
-        <div
-          aria-describedby="mx_TooltipTarget_vY7Q4uEh"
+        <button
+          aria-label="Click to read topic"
           class="mx_LegacyRoomHeader_topic mx_RoomTopic"
-          dir="auto"
-          tabindex="0"
+          type="button"
         />
       </div>
     </header>
@@ -283,11 +281,10 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
             @user:example.com
           </div>
         </div>
-        <div
-          aria-describedby="mx_TooltipTarget_vY7Q4uEh"
+        <button
+          aria-label="Click to read topic"
           class="mx_LegacyRoomHeader_topic mx_RoomTopic"
-          dir="auto"
-          tabindex="0"
+          type="button"
         />
       </div>
     </header>
@@ -530,11 +527,10 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
             @user:example.com
           </div>
         </div>
-        <div
-          aria-describedby="mx_TooltipTarget_vY7Q4uEh"
+        <button
+          aria-label="Click to read topic"
           class="mx_LegacyRoomHeader_topic mx_RoomTopic"
-          dir="auto"
-          tabindex="0"
+          type="button"
         />
       </div>
     </header>