From 54fa9a572e1c0eb256b341134ba41083af22727e Mon Sep 17 00:00:00 2001
From: Manan Sadana <manancodes.dev@gmail.com>
Date: Fri, 6 Oct 2023 12:24:25 +0530
Subject: [PATCH] Fix: Clicking on members pile does nothing. (#11657)

* Fix: Clicking on pile opens members list

* onClick used on Accessible Component

* Updated snapshots for testing

* Snapshots updated after merging

---------

Co-authored-by: Manan Sadana <manan.sadana@cnhteam.onmicrosoft.com>
---
 res/css/structures/_SpaceRoomView.pcss        |  1 +
 src/components/views/elements/FacePile.tsx    |  8 ++++--
 .../views/elements/RoomFacePile.tsx           |  2 ++
 .../__snapshots__/FacePile-test.tsx.snap      | 26 ++++++++++++-------
 .../__snapshots__/RoomFacePile-test.tsx.snap  | 26 ++++++++++++-------
 5 files changed, 41 insertions(+), 22 deletions(-)

diff --git a/res/css/structures/_SpaceRoomView.pcss b/res/css/structures/_SpaceRoomView.pcss
index a4a4aa7884..000781bd97 100644
--- a/res/css/structures/_SpaceRoomView.pcss
+++ b/res/css/structures/_SpaceRoomView.pcss
@@ -189,6 +189,7 @@ limitations under the License.
 
                 .mx_FacePile {
                     display: inline-block;
+                    cursor: pointer;
                 }
 
                 .mx_SpaceRoomView_landing_inviteButton,
diff --git a/src/components/views/elements/FacePile.tsx b/src/components/views/elements/FacePile.tsx
index d7570fdfa7..5c76219965 100644
--- a/src/components/views/elements/FacePile.tsx
+++ b/src/components/views/elements/FacePile.tsx
@@ -19,6 +19,7 @@ import { RoomMember } from "matrix-js-sdk/src/matrix";
 import { AvatarStack, Tooltip } from "@vector-im/compound-web";
 
 import MemberAvatar from "../avatars/MemberAvatar";
+import AccessibleButton, { ButtonEvent } from "./AccessibleButton";
 
 interface IProps extends HTMLAttributes<HTMLSpanElement> {
     members: RoomMember[];
@@ -28,6 +29,7 @@ interface IProps extends HTMLAttributes<HTMLSpanElement> {
     tooltipShortcut?: string;
     children?: ReactNode;
     viewUserOnClick?: boolean;
+    onClick?: (e: ButtonEvent) => void | Promise<void>;
 }
 
 const FacePile: FC<IProps> = ({
@@ -64,8 +66,10 @@ const FacePile: FC<IProps> = ({
 
     const content = (
         <div className="mx_FacePile">
-            <AvatarStack>{pileContents}</AvatarStack>
-            {children}
+            <AccessibleButton kind="link_inline" onClick={props.onClick ?? null}>
+                <AvatarStack>{pileContents}</AvatarStack>
+                {children}
+            </AccessibleButton>
         </div>
     );
 
diff --git a/src/components/views/elements/RoomFacePile.tsx b/src/components/views/elements/RoomFacePile.tsx
index 68d9348c45..6ec333c4e5 100644
--- a/src/components/views/elements/RoomFacePile.tsx
+++ b/src/components/views/elements/RoomFacePile.tsx
@@ -23,6 +23,7 @@ import DMRoomMap from "../../../utils/DMRoomMap";
 import FacePile from "./FacePile";
 import { useRoomMembers } from "../../../hooks/useRoomMembers";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
+import { ButtonEvent } from "./AccessibleButton";
 
 const DEFAULT_NUM_FACES = 5;
 
@@ -32,6 +33,7 @@ interface IProps extends HTMLAttributes<HTMLSpanElement> {
     room: Room;
     onlyKnownUsers?: boolean;
     numShown?: number;
+    onClick?: (e: ButtonEvent) => void | Promise<void>;
 }
 
 const RoomFacePile: FC<IProps> = ({ room, onlyKnownUsers = true, numShown = DEFAULT_NUM_FACES, ...props }) => {
diff --git a/test/components/views/elements/__snapshots__/FacePile-test.tsx.snap b/test/components/views/elements/__snapshots__/FacePile-test.tsx.snap
index 731a5f460f..6c2b64cc15 100644
--- a/test/components/views/elements/__snapshots__/FacePile-test.tsx.snap
+++ b/test/components/views/elements/__snapshots__/FacePile-test.tsx.snap
@@ -7,18 +7,24 @@ exports[`<FacePile /> renders with a tooltip 1`] = `
     data-state="closed"
   >
     <div
-      class="_stacked-avatars_ylj7w_116"
+      class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
+      role="button"
+      tabindex="0"
     >
-      <span
-        class="_avatar_ylj7w_17 mx_BaseAvatar _avatar-imageless_ylj7w_56"
-        data-color="8"
-        data-testid="avatar-img"
-        data-type="round"
-        role="presentation"
-        style="--cpd-avatar-size: 36px;"
+      <div
+        class="_stacked-avatars_ylj7w_116"
       >
-        4
-      </span>
+        <span
+          class="_avatar_ylj7w_17 mx_BaseAvatar _avatar-imageless_ylj7w_56"
+          data-color="8"
+          data-testid="avatar-img"
+          data-type="round"
+          role="presentation"
+          style="--cpd-avatar-size: 36px;"
+        >
+          4
+        </span>
+      </div>
     </div>
   </div>
 </DocumentFragment>
diff --git a/test/components/views/elements/__snapshots__/RoomFacePile-test.tsx.snap b/test/components/views/elements/__snapshots__/RoomFacePile-test.tsx.snap
index 26fea36a98..11056fad01 100644
--- a/test/components/views/elements/__snapshots__/RoomFacePile-test.tsx.snap
+++ b/test/components/views/elements/__snapshots__/RoomFacePile-test.tsx.snap
@@ -7,18 +7,24 @@ exports[`<RoomFacePile /> renders 1`] = `
     data-state="closed"
   >
     <div
-      class="_stacked-avatars_ylj7w_116"
+      class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
+      role="button"
+      tabindex="0"
     >
-      <span
-        class="_avatar_ylj7w_17 mx_BaseAvatar _avatar-imageless_ylj7w_56"
-        data-color="8"
-        data-testid="avatar-img"
-        data-type="round"
-        role="presentation"
-        style="--cpd-avatar-size: 28px;"
+      <div
+        class="_stacked-avatars_ylj7w_116"
       >
-        b
-      </span>
+        <span
+          class="_avatar_ylj7w_17 mx_BaseAvatar _avatar-imageless_ylj7w_56"
+          data-color="8"
+          data-testid="avatar-img"
+          data-type="round"
+          role="presentation"
+          style="--cpd-avatar-size: 28px;"
+        >
+          b
+        </span>
+      </div>
     </div>
   </div>
 </DocumentFragment>