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

@@ -189,6 +189,7 @@ limitations under the License.
 
                 .mx_FacePile {
                     display: inline-block;
+                    cursor: pointer;
                 }
 
                 .mx_SpaceRoomView_landing_inviteButton,

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">
+            <AccessibleButton kind="link_inline" onClick={props.onClick ?? null}>
                 <AvatarStack>{pileContents}</AvatarStack>
                 {children}
+            </AccessibleButton>
         </div>
     );
 

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 }) => {

test/components/views/elements/__snapshots__/FacePile-test.tsx.snap

@@ -5,6 +5,11 @@ exports[`<FacePile /> renders with a tooltip 1`] = `
   <div
     class="mx_FacePile"
     data-state="closed"
+  >
+    <div
+      class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
+      role="button"
+      tabindex="0"
     >
       <div
         class="_stacked-avatars_ylj7w_116"
@@ -21,5 +26,6 @@ exports[`<FacePile /> renders with a tooltip 1`] = `
         </span>
       </div>
     </div>
+  </div>
 </DocumentFragment>
 `;

test/components/views/elements/__snapshots__/RoomFacePile-test.tsx.snap

@@ -5,6 +5,11 @@ exports[`<RoomFacePile /> renders 1`] = `
   <div
     class="mx_FacePile"
     data-state="closed"
+  >
+    <div
+      class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_link_inline"
+      role="button"
+      tabindex="0"
     >
       <div
         class="_stacked-avatars_ylj7w_116"
@@ -21,5 +26,6 @@ exports[`<RoomFacePile /> renders 1`] = `
         </span>
       </div>
     </div>
+  </div>
 </DocumentFragment>
 `;