Change div to button

apps/web/res/css/views/rooms/_EventTile.pcss

@@ -486,7 +486,7 @@ $left-gutter: 64px;
         }
 
         > .mx_DisambiguatedProfile {
-            line-height: $font-20px;
+            margin-bottom: 4px;
             margin-left: $left-gutter;
             max-width: calc(100% - $left-gutter);
         }

apps/web/src/components/views/messages/SenderProfile.tsx

@@ -38,6 +38,8 @@ export default function SenderProfile({ mxEvent, onClick, withTooltip }: IProps)
                 emphasizeDisplayName: true,
                 withTooltip,
                 className: "mx_DisambiguatedProfile",
+                classNameDisplayName: "mx_DisambiguatedProfile_displayName",
+                classNameDisplayIdentifier: "mx_DisambiguatedProfile_mxid",
             }),
     );
 

apps/web/src/components/views/rooms/MemberList/tiles/RoomMemberTileView.tsx

@@ -54,6 +54,8 @@ export function RoomMemberTileView(props: IProps): JSX.Element {
                 member,
                 withTooltip: true,
                 className: "mx_DisambiguatedProfile",
+                classNameDisplayName: "mx_DisambiguatedProfile_displayName",
+                classNameDisplayIdentifier: "mx_DisambiguatedProfile_mxid",
             }),
     );
     useEffect(() => {

apps/web/src/viewmodels/profile/DisambiguatedProfileViewModel.ts

@@ -6,12 +6,11 @@
  */
 import {
     BaseViewModel,
-    type DisambiguatedProfileViewActions,
     type DisambiguatedProfileViewSnapshot,
     type DisambiguatedProfileViewModel as DisambiguatedProfileViewModelInterface,
 } from "@element-hq/web-shared-components";
-import { type MouseEvent } from "react";
 
+import type { MouseEvent } from "react";
 import { _t } from "../../languageHandler";
 import { getUserNameColorClass } from "../../utils/FormattingUtils";
 import UserIdentifier from "../../customisations/UserIdentifier";
@@ -65,11 +64,19 @@ export interface DisambiguatedProfileViewModelProps {
     /**
      * Optional click handler for the profile.
      */
-    onClick?: DisambiguatedProfileViewActions["onClick"];
+    onClick?: (event: MouseEvent<HTMLButtonElement | HTMLDivElement>) => void;
     /**
      * Optional CSS class name to apply to the profile.
      */
     className?: string;
+    /**
+     * Optional CSS class name to apply to the display name span.
+     */
+    classNameDisplayName?: string;
+    /**
+     * Optional CSS class name to apply to the display identifier span.
+     */
+    classNameDisplayIdentifier?: string;
 }
 
 /**
@@ -83,7 +90,16 @@ export class DisambiguatedProfileViewModel
     private static readonly computeSnapshot = (
         props: DisambiguatedProfileViewModelProps,
     ): DisambiguatedProfileViewSnapshot => {
-        const { member, fallbackName, colored, emphasizeDisplayName, withTooltip, className } = props;
+        const {
+            member,
+            fallbackName,
+            colored,
+            emphasizeDisplayName,
+            withTooltip,
+            className,
+            classNameDisplayName,
+            classNameDisplayIdentifier,
+        } = props;
 
         // Compute display name
         const displayName = member?.rawDisplayName || fallbackName;
@@ -124,6 +140,8 @@ export class DisambiguatedProfileViewModel
             displayName,
             colorClass,
             className,
+            classNameDisplayName,
+            classNameDisplayIdentifier,
             displayIdentifier,
             title,
             emphasizeDisplayName,
@@ -141,7 +159,7 @@ export class DisambiguatedProfileViewModel
         this.snapshot.set(DisambiguatedProfileViewModel.computeSnapshot(this.props));
     }
 
-    public onClick = (evt: MouseEvent<HTMLDivElement>): void => {
-        this.props.onClick?.(evt);
-    };
+    public get onClick(): ((event: MouseEvent<HTMLButtonElement | HTMLDivElement>) => void) | undefined {
+        return this.props.onClick;
+    }
 }

apps/web/test/unit-tests/components/views/elements/__snapshots__/ReplyChain-test.tsx.snap

@@ -31,12 +31,10 @@ exports[`ReplyChain should call setQuoteExpanded if chain is longer than 2 lines
                 u
               </span>
               <div
-                class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8"
-                role="button"
-                tabindex="0"
+                class="mx_DisambiguatedProfile _disambiguatedProfile_s5fes_8"
               >
                 <span
-                  class="mx_Username_color2 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName"
+                  class="mx_DisambiguatedProfile_displayName mx_Username_color2 _disambiguatedProfile_displayName_s5fes_13"
                   dir="auto"
                 >
                   @userId:matrix.org

apps/web/test/unit-tests/components/views/rooms/memberlist/__snapshots__/MemberTileView-test.tsx.snap

@@ -35,13 +35,11 @@ exports[`MemberTileView RoomMemberTileView should display an verified E2EIcon wh
           class="mx_MemberTileView_name"
         >
           <div
-            class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8"
-            role="button"
-            tabindex="0"
+            class="mx_DisambiguatedProfile _disambiguatedProfile_s5fes_8"
             title="@userId:matrix.org (@userId:matrix.org)"
           >
             <span
-              class=""
+              class="mx_DisambiguatedProfile_displayName"
               dir="auto"
             >
               @userId:matrix.org
@@ -111,13 +109,11 @@ exports[`MemberTileView RoomMemberTileView should display an warning E2EIcon whe
           class="mx_MemberTileView_name"
         >
           <div
-            class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8"
-            role="button"
-            tabindex="0"
+            class="mx_DisambiguatedProfile _disambiguatedProfile_s5fes_8"
             title="@userId:matrix.org (@userId:matrix.org)"
           >
             <span
-              class=""
+              class="mx_DisambiguatedProfile_displayName"
               dir="auto"
             >
               @userId:matrix.org
@@ -187,13 +183,11 @@ exports[`MemberTileView RoomMemberTileView should not display an E2EIcon when th
           class="mx_MemberTileView_name"
         >
           <div
-            class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8"
-            role="button"
-            tabindex="0"
+            class="mx_DisambiguatedProfile _disambiguatedProfile_s5fes_8"
             title="@userId:matrix.org (@userId:matrix.org)"
           >
             <span
-              class=""
+              class="mx_DisambiguatedProfile_displayName"
               dir="auto"
             >
               @userId:matrix.org

apps/web/test/unit-tests/components/views/settings/__snapshots__/LayoutSwitcher-test.tsx.snap

@@ -70,18 +70,17 @@ exports[`<LayoutSwitcher /> should render 1`] = `
                 data-self="true"
                 tabindex="-1"
               >
-                <div
-                  class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8"
-                  role="button"
-                  tabindex="0"
+                <button
+                  class="mx_DisambiguatedProfile _disambiguatedProfile_s5fes_8"
+                  type="button"
                 >
                   <span
-                    class="mx_Username_color2 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName"
+                    class="mx_DisambiguatedProfile_displayName mx_Username_color2 _disambiguatedProfile_displayName_s5fes_13"
                     dir="auto"
                   >
                     Alice
                   </span>
-                </div>
+                </button>
                 <div
                   class="mx_EventTile_avatar"
                 >
@@ -211,18 +210,17 @@ exports[`<LayoutSwitcher /> should render 1`] = `
                 data-self="true"
                 tabindex="-1"
               >
-                <div
-                  class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8"
-                  role="button"
-                  tabindex="0"
+                <button
+                  class="mx_DisambiguatedProfile _disambiguatedProfile_s5fes_8"
+                  type="button"
                 >
                   <span
-                    class="mx_Username_color2 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName"
+                    class="mx_DisambiguatedProfile_displayName mx_Username_color2 _disambiguatedProfile_displayName_s5fes_13"
                     dir="auto"
                   >
                     Alice
                   </span>
-                </div>
+                </button>
                 <div
                   class="mx_EventTile_avatar"
                 >
@@ -355,18 +353,17 @@ exports[`<LayoutSwitcher /> should render 1`] = `
                 <span
                   class="mx_MessageTimestamp"
                 />
-                <div
-                  class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8"
-                  role="button"
-                  tabindex="0"
+                <button
+                  class="mx_DisambiguatedProfile _disambiguatedProfile_s5fes_8"
+                  type="button"
                 >
                   <span
-                    class="mx_Username_color2 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName"
+                    class="mx_DisambiguatedProfile_displayName mx_Username_color2 _disambiguatedProfile_displayName_s5fes_13"
                     dir="auto"
                   >
                     Alice
                   </span>
-                </div>
+                </button>
                 <div
                   class="mx_EventTile_avatar"
                 >

apps/web/test/unit-tests/components/views/settings/tabs/user/__snapshots__/AppearanceUserSettingsTab-test.tsx.snap

@@ -213,18 +213,17 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
                         data-self="true"
                         tabindex="-1"
                       >
-                        <div
-                          class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8"
-                          role="button"
-                          tabindex="0"
+                        <button
+                          class="mx_DisambiguatedProfile _disambiguatedProfile_s5fes_8"
+                          type="button"
                         >
                           <span
-                            class="mx_Username_color2 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName"
+                            class="mx_DisambiguatedProfile_displayName mx_Username_color2 _disambiguatedProfile_displayName_s5fes_13"
                             dir="auto"
                           >
                             @userId:matrix.org
                           </span>
-                        </div>
+                        </button>
                         <div
                           class="mx_EventTile_avatar"
                         >
@@ -354,18 +353,17 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
                         data-self="true"
                         tabindex="-1"
                       >
-                        <div
-                          class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8"
-                          role="button"
-                          tabindex="0"
+                        <button
+                          class="mx_DisambiguatedProfile _disambiguatedProfile_s5fes_8"
+                          type="button"
                         >
                           <span
-                            class="mx_Username_color2 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName"
+                            class="mx_DisambiguatedProfile_displayName mx_Username_color2 _disambiguatedProfile_displayName_s5fes_13"
                             dir="auto"
                           >
                             @userId:matrix.org
                           </span>
-                        </div>
+                        </button>
                         <div
                           class="mx_EventTile_avatar"
                         >
@@ -498,18 +496,17 @@ exports[`AppearanceUserSettingsTab should render 1`] = `
                         <span
                           class="mx_MessageTimestamp"
                         />
-                        <div
-                          class="mx_DisambiguatedProfile _disambiguatedProfile_oa3at_8"
-                          role="button"
-                          tabindex="0"
+                        <button
+                          class="mx_DisambiguatedProfile _disambiguatedProfile_s5fes_8"
+                          type="button"
                         >
                           <span
-                            class="mx_Username_color2 _disambiguatedProfile_displayName_oa3at_14 mx_DisambiguatedProfile_displayName"
+                            class="mx_DisambiguatedProfile_displayName mx_Username_color2 _disambiguatedProfile_displayName_s5fes_13"
                             dir="auto"
                           >
                             @userId:matrix.org
                           </span>
-                        </div>
+                        </button>
                         <div
                           class="mx_EventTile_avatar"
                         >

packages/shared-components/src/profile/DisambiguatedProfile/DisambiguatedProfile.module.css

@@ -9,7 +9,6 @@
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    cursor: pointer;
 
     .disambiguatedProfile_displayName {
         font: var(--cpd-font-body-md-semibold);
@@ -25,3 +24,11 @@
         margin-inline-start: 5px;
     }
 }
+
+button {
+    /* Clear default <button> styles */
+    padding: 0;
+    border: none;
+    vertical-align: baseline;
+    background: none;
+}

packages/shared-components/src/profile/DisambiguatedProfile/DisambiguatedProfile.stories.tsx

@@ -6,7 +6,6 @@
  */
 
 import React, { type JSX } from "react";
-import { fn } from "storybook/test";
 
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import {
@@ -33,14 +32,17 @@ const meta = {
         displayName: { control: "text" },
         colorClass: { control: "text" },
         className: { control: "text" },
+        classNameDisplayName: { control: "text" },
+        classNameDisplayIdentifier: { control: "text" },
         displayIdentifier: { control: "text" },
         title: { control: "text" },
         emphasizeDisplayName: { control: "boolean" },
     },
     args: {
         displayName: "Alice",
         emphasizeDisplayName: true,
-        onClick: fn(),
+        classNameDisplayName: "mx_DisambiguatedProfile_displayName",
+        classNameDisplayIdentifier: "mx_DisambiguatedProfile_mxid",
     },
 } satisfies Meta<typeof DisambiguatedProfileViewWrapper>;
 
@@ -78,6 +80,14 @@ export const WithTooltip: Story = {
     },
 };
 
+export const WithTooltipAndActions: Story = {
+    args: {
+        displayName: "Diana",
+        title: "Diana (@diana:example.org)",
+        onClick: () => console.log("Clicked disambiguated profile"),
+    },
+};
+
 export const FullExample: Story = {
     args: {
         displayName: "Eve",