Fix: Clicking on members pile does nothing. (matrix-org#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 <[email protected]>
sipb · Oct 6, 2023 · 54fa9a5 · 54fa9a5
1 parent 91413bc
commit 54fa9a5
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 22 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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>