From 10533cb858313c38820523ecb9dde64aa376813a Mon Sep 17 00:00:00 2001
From: Manan Sadana <manan.sadana@cnhteam.onmicrosoft.com>
Date: Mon, 25 Sep 2023 00:31:32 +0530
Subject: [PATCH 1/4] Fix: Clicking on pile opens members list

---
 res/css/structures/_SpaceRoomView.pcss     | 1 +
 src/components/views/elements/FacePile.tsx | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/res/css/structures/_SpaceRoomView.pcss b/res/css/structures/_SpaceRoomView.pcss
index a4a4aa78843..000781bd97a 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 2ade713816d..ac8ce0af8c5 100644
--- a/src/components/views/elements/FacePile.tsx
+++ b/src/components/views/elements/FacePile.tsx
@@ -64,7 +64,7 @@ const FacePile: FC<IProps> = ({
     );
 
     const content = (
-        <div className="mx_FacePile">
+        <div onClick={props.onClick} className="mx_FacePile">
             <AvatarStack>{pileContents}</AvatarStack>
             {children}
         </div>

From 6c3291e14df75d3c85c9c7599b0c304920298339 Mon Sep 17 00:00:00 2001
From: Manan Sadana <manan.sadana@cnhteam.onmicrosoft.com>
Date: Mon, 2 Oct 2023 16:40:12 +0530
Subject: [PATCH 2/4] onClick used on Accessible Component

---
 src/components/views/elements/FacePile.tsx     | 10 +++++++---
 src/components/views/elements/RoomFacePile.tsx |  2 ++
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/components/views/elements/FacePile.tsx b/src/components/views/elements/FacePile.tsx
index ac8ce0af8c5..b54bd04ae65 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,9 +66,11 @@ const FacePile: FC<IProps> = ({
     );
 
     const content = (
-        <div onClick={props.onClick} className="mx_FacePile">
-            <AvatarStack>{pileContents}</AvatarStack>
-            {children}
+        <div className="mx_FacePile">
+            <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 f1a0ba03a49..b30aa6fb632 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 }) => {

From fd165fc532aa55a374ead0f2ee1e509f6a4aea58 Mon Sep 17 00:00:00 2001
From: Manan Sadana <manan.sadana@cnhteam.onmicrosoft.com>
Date: Mon, 2 Oct 2023 19:51:54 +0530
Subject: [PATCH 3/4] Updated snapshots for testing

---
 .../__snapshots__/FacePile-test.tsx.snap      | 26 ++++++++++++-------
 .../__snapshots__/RoomFacePile-test.tsx.snap  | 26 ++++++++++++-------
 2 files changed, 32 insertions(+), 20 deletions(-)

diff --git a/test/components/views/elements/__snapshots__/FacePile-test.tsx.snap b/test/components/views/elements/__snapshots__/FacePile-test.tsx.snap
index 9da61cd6575..df3dda43361 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_2lhia_116"
+      class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
+      role="button"
+      tabindex="0"
     >
-      <span
-        class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56"
-        data-color="8"
-        data-testid="avatar-img"
-        data-type="round"
-        role="presentation"
-        style="--cpd-avatar-size: 36px;"
+      <div
+        class="_stacked-avatars_2lhia_116"
       >
-        4
-      </span>
+        <span
+          class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_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 7ddcb5128f4..3b75d6f8439 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_2lhia_116"
+      class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
+      role="button"
+      tabindex="0"
     >
-      <span
-        class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56"
-        data-color="8"
-        data-testid="avatar-img"
-        data-type="round"
-        role="presentation"
-        style="--cpd-avatar-size: 28px;"
+      <div
+        class="_stacked-avatars_2lhia_116"
       >
-        b
-      </span>
+        <span
+          class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56"
+          data-color="8"
+          data-testid="avatar-img"
+          data-type="round"
+          role="presentation"
+          style="--cpd-avatar-size: 28px;"
+        >
+          b
+        </span>
+      </div>
     </div>
   </div>
 </DocumentFragment>

From 8d21379edaab1a12c594d9eed60609585b7e0587 Mon Sep 17 00:00:00 2001
From: manancodes <manancodes.dev@gmail.com>
Date: Wed, 4 Oct 2023 15:43:18 +0530
Subject: [PATCH 4/4] Snapshots updated after merging

---
 .../views/elements/__snapshots__/FacePile-test.tsx.snap       | 4 ++--
 .../views/elements/__snapshots__/RoomFacePile-test.tsx.snap   | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/test/components/views/elements/__snapshots__/FacePile-test.tsx.snap b/test/components/views/elements/__snapshots__/FacePile-test.tsx.snap
index df3dda43361..6c2b64cc155 100644
--- a/test/components/views/elements/__snapshots__/FacePile-test.tsx.snap
+++ b/test/components/views/elements/__snapshots__/FacePile-test.tsx.snap
@@ -12,10 +12,10 @@ exports[`<FacePile /> renders with a tooltip 1`] = `
       tabindex="0"
     >
       <div
-        class="_stacked-avatars_2lhia_116"
+        class="_stacked-avatars_ylj7w_116"
       >
         <span
-          class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56"
+          class="_avatar_ylj7w_17 mx_BaseAvatar _avatar-imageless_ylj7w_56"
           data-color="8"
           data-testid="avatar-img"
           data-type="round"
diff --git a/test/components/views/elements/__snapshots__/RoomFacePile-test.tsx.snap b/test/components/views/elements/__snapshots__/RoomFacePile-test.tsx.snap
index 3b75d6f8439..11056fad011 100644
--- a/test/components/views/elements/__snapshots__/RoomFacePile-test.tsx.snap
+++ b/test/components/views/elements/__snapshots__/RoomFacePile-test.tsx.snap
@@ -12,10 +12,10 @@ exports[`<RoomFacePile /> renders 1`] = `
       tabindex="0"
     >
       <div
-        class="_stacked-avatars_2lhia_116"
+        class="_stacked-avatars_ylj7w_116"
       >
         <span
-          class="_avatar_2lhia_17 mx_BaseAvatar _avatar-imageless_2lhia_56"
+          class="_avatar_ylj7w_17 mx_BaseAvatar _avatar-imageless_ylj7w_56"
           data-color="8"
           data-testid="avatar-img"
           data-type="round"