Merge pull request #33764 from element-hq/dbkr/withpresence_use_new_component

Make presence icons & colours consistent throughout the app

apps/web/test/unit-tests/components/views/avatars/WithPresenceIndicator-test.tsx

@@ -6,17 +6,20 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import { render, waitFor } from "jest-matrix-react";
+import { act, render, renderHook, waitFor } from "jest-matrix-react";
 import { mocked } from "jest-mock";
-import { type MatrixClient, PendingEventOrdering, Room, RoomMember, User } from "matrix-js-sdk/src/matrix";
+import { type MatrixClient, PendingEventOrdering, Room, RoomMember, User, UserEvent } from "matrix-js-sdk/src/matrix";
 import React from "react";
-import userEvent from "@testing-library/user-event";
 
 import { MatrixClientPeg } from "../../../../../src/MatrixClientPeg";
-import { stubClient } from "../../../../test-utils";
+import { getMockClientWithEventEmitter, stubClient } from "../../../../test-utils";
 import DMRoomMap from "../../../../../src/utils/DMRoomMap";
-import WithPresenceIndicator from "../../../../../src/components/views/avatars/WithPresenceIndicator";
+import WithPresenceIndicator, {
+    Presence,
+    usePresence,
+} from "../../../../../src/components/views/avatars/WithPresenceIndicator";
 import { isPresenceEnabled } from "../../../../../src/utils/presence";
+import { getJoinedNonFunctionalMembers } from "../../../../../src/utils/room/getJoinedNonFunctionalMembers";
 
 jest.mock("../../../../../src/utils/presence");
 
@@ -32,7 +35,7 @@ describe("WithPresenceIndicator", () => {
 
     function renderComponent() {
         return render(
-            <WithPresenceIndicator room={room} size="32px">
+            <WithPresenceIndicator room={room}>
                 <span />
             </WithPresenceIndicator>,
         );
@@ -83,67 +86,140 @@ describe("WithPresenceIndicator", () => {
             return member;
         });
 
-        const { container, asFragment } = renderComponent();
-
-        const presence = container.querySelector(".mx_WithPresenceIndicator_icon")!;
-        expect(presence).toBeVisible();
-        await userEvent.hover(presence!);
-
-        // wait for the tooltip to open
-        const tooltip = await waitFor(() => {
-            const tooltip = document.getElementById(presence.getAttribute("aria-labelledby")!);
-            expect(tooltip).toBeVisible();
-            return tooltip;
-        });
-        expect(tooltip).toHaveTextContent(renderedStr);
+        const { asFragment } = renderComponent();
 
         expect(asFragment()).toMatchSnapshot();
     });
+});
+
+describe("usePresence", () => {
+    const ROOM_ID = "roomId";
+    const DM_USER_ID = "@bob:foo.bar";
+
+    let mockClient: ReturnType<typeof getMockClientWithEventEmitter>;
+    let room: Room;
+    let member: RoomMember;
+    let user: User;
+
+    beforeEach(() => {
+        mockClient = getMockClientWithEventEmitter({
+            getUserId: jest.fn().mockReturnValue("@alice:foo.bar"),
+            getUser: jest.fn().mockReturnValue(null),
+            store: { getPendingEvents: jest.fn().mockResolvedValue([]) },
+        });
+        room = new Room(ROOM_ID, mockClient as unknown as MatrixClient, mockClient.getUserId() ?? "");
+
+        mocked(isPresenceEnabled).mockReturnValue(true);
+        mocked(getJoinedNonFunctionalMembers).mockReturnValue([1, 2] as any);
+
+        user = new User(DM_USER_ID);
+        user.presence = "online";
+        member = new RoomMember(ROOM_ID, DM_USER_ID);
+        member.user = user;
+    });
+
+    afterEach(() => {
+        jest.restoreAllMocks();
+    });
+
+    it("returns null when presence is disabled", () => {
+        mocked(isPresenceEnabled).mockReturnValue(false);
+        const { result } = renderHook(() => usePresence(room, member));
+        expect(result.current).toBeNull();
+    });
+
+    it("returns null when room does not have exactly 2 members", () => {
+        mocked(getJoinedNonFunctionalMembers).mockReturnValue([1] as any);
+        const { result } = renderHook(() => usePresence(room, member));
+        expect(result.current).toBeNull();
+    });
+
+    it("returns null when member is null", () => {
+        const { result } = renderHook(() => usePresence(room, null));
+        expect(result.current).toBeNull();
+    });
 
     it.each([
-        ["online", "Online"],
-        ["offline", "Offline"],
-        ["unavailable", "Away"],
-    ])(
-        "renders presence indicator when member.user is not linked but client has user data",
-        async (presenceStr, renderedStr) => {
-            mocked(isPresenceEnabled).mockReturnValue(true);
+        ["online", Presence.Online],
+        ["offline", Presence.Offline],
+        ["unavailable", Presence.Away],
+        ["busy", Presence.Busy],
+    ])("returns correct presence for user with '%s' presence state", (presenceStr, expectedPresence) => {
+        user.presence = presenceStr;
+        const { result } = renderHook(() => usePresence(room, member));
+        expect(result.current).toBe(expectedPresence);
+    });
 
-            const DM_USER_ID = "@bob:foo.bar";
-            const dmRoomMap = {
-                getUserIdForRoomId: () => {
-                    return DM_USER_ID;
-                },
-            } as unknown as DMRoomMap;
+    it("returns Online when user.currentlyActive is true regardless of presence string", () => {
+        user.presence = "offline";
+        user.currentlyActive = true;
+        const { result } = renderHook(() => usePresence(room, member));
+        expect(result.current).toBe(Presence.Online);
+    });
 
-            jest.spyOn(DMRoomMap, "shared").mockReturnValue(dmRoomMap);
+    it("updates when UserEvent.Presence fires on member.user", async () => {
+        user.presence = "online";
+        const { result } = renderHook(() => usePresence(room, member));
+        expect(result.current).toBe(Presence.Online);
 
-            // member.user is not set: simulates the race condition on fresh login with no cache
-            // where the room list renders before member.user is linked
-            room.getMember = jest.fn((userId) => {
-                return new RoomMember(room.roomId, userId);
-            });
+        act(() => {
+            user.presence = "offline";
+            user.emit(UserEvent.Presence, null as any, user);
+        });
 
-            // But client.getUser() has the presence data
-            const user = new User(DM_USER_ID);
-            user.presence = presenceStr;
-            mockClient.getUser = jest.fn((userId) => (userId === DM_USER_ID ? user : null));
+        await waitFor(() => expect(result.current).toBe(Presence.Offline));
+    });
 
-            const { container } = renderComponent();
+    it("updates when UserEvent.CurrentlyActive fires on member.user", async () => {
+        user.presence = "offline";
+        user.currentlyActive = false;
+        const { result } = renderHook(() => usePresence(room, member));
+        expect(result.current).toBe(Presence.Offline);
 
-            const presence = container.querySelector(".mx_WithPresenceIndicator_icon")!;
-            expect(presence).toBeVisible();
-            await userEvent.hover(presence!);
+        act(() => {
+            user.currentlyActive = true;
+            user.emit(UserEvent.CurrentlyActive, null as any, user);
+        });
 
-            const tooltip = await waitFor(() => {
-                const tooltip = document.getElementById(presence.getAttribute("aria-labelledby")!);
-                expect(tooltip).toBeVisible();
-                return tooltip;
-            });
+        await waitFor(() => expect(result.current).toBe(Presence.Online));
+    });
 
-            // component should fall back to reading client.getUser() which does have the presence data
-            // so it should render correctly
-            expect(tooltip).toHaveTextContent(renderedStr);
-        },
-    );
+    it("returns correct presence when member.user is not linked but client has user data", () => {
+        member.user = undefined;
+        mocked(mockClient.getUser).mockImplementation((userId) => (userId === DM_USER_ID ? user : null));
+
+        user.presence = "online";
+        const { result } = renderHook(() => usePresence(room, member));
+        expect(result.current).toBe("online");
+    });
+
+    it("updates via client-level UserEvent.Presence when member.user is not yet linked", async () => {
+        member.user = undefined;
+        mocked(mockClient.getUser).mockImplementation((userId) => (userId === DM_USER_ID ? user : null));
+        user.presence = "online";
+
+        const { result } = renderHook(() => usePresence(room, member));
+        expect(result.current).toBe(Presence.Online);
+
+        act(() => {
+            user.presence = "offline";
+            mockClient.emit(UserEvent.Presence, null as any, user);
+        });
+
+        await waitFor(() => expect(result.current).toBe(Presence.Offline));
+    });
+
+    it("does not update when client emits UserEvent.Presence for a different user", async () => {
+        user.presence = "online";
+        const { result } = renderHook(() => usePresence(room, member));
+        expect(result.current).toBe(Presence.Online);
+
+        act(() => {
+            const otherUser = new User("@other:foo.bar");
+            otherUser.presence = "offline";
+            mockClient.emit(UserEvent.Presence, null as any, otherUser);
+        });
+
+        expect(result.current).toBe(Presence.Online);
+    });
 });

apps/web/test/unit-tests/components/views/avatars/__snapshots__/RoomAvatarView-test.tsx.snap

@@ -156,64 +156,7 @@ exports[`<RoomAvatarView /> should render a video room decoration 1`] = `
 </DocumentFragment>
 `;
 
-exports[`<RoomAvatarView /> should render the AWAY presence 1`] = `
-<DocumentFragment>
-  <div
-    class="_flex_4dswl_9 mx_RoomAvatarView"
-    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
-  >
-    <span
-      aria-label="Avatar"
-      class="_avatar_va14e_8 mx_BaseAvatar mx_RoomAvatarView_RoomAvatar mx_RoomAvatarView_RoomAvatar_presence"
-      data-color="1"
-      data-testid="avatar-img"
-      data-type="round"
-      style="--cpd-avatar-size: 32px;"
-    >
-      <img
-        alt=""
-        class="_image_va14e_43"
-        data-type="round"
-        height="32px"
-        loading="lazy"
-        referrerpolicy="no-referrer"
-        src="http://this.is.a.url/avatar.url/room.png"
-        width="32px"
-      />
-    </span>
-    <svg
-      aria-label="Away"
-      aria-labelledby="react-use-id-1"
-      class="mx_RoomAvatarView_PresenceDecoration"
-      color="var(--cpd-color-icon-quaternary)"
-      fill="currentColor"
-      height="8px"
-      viewBox="0 0 8 8"
-      width="8px"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <g
-        clip-path="url(#cpd_PresenceSolid8X8Icon_a)"
-      >
-        <path
-          d="M8 4a4 4 0 1 1-8 0 4 4 0 0 1 8 0"
-        />
-      </g>
-      <defs>
-        <clippath
-          id="cpd_PresenceSolid8X8Icon_a"
-        >
-          <path
-            d="M0 0h8v8H0z"
-          />
-        </clippath>
-      </defs>
-    </svg>
-  </div>
-</DocumentFragment>
-`;
-
-exports[`<RoomAvatarView /> should render the BUSY presence 1`] = `
+exports[`<RoomAvatarView /> should render the busy presence 1`] = `
 <DocumentFragment>
   <div
     class="_flex_4dswl_9 mx_RoomAvatarView"
@@ -272,7 +215,7 @@ exports[`<RoomAvatarView /> should render the BUSY presence 1`] = `
 </DocumentFragment>
 `;
 
-exports[`<RoomAvatarView /> should render the OFFLINE presence 1`] = `
+exports[`<RoomAvatarView /> should render the offline presence 1`] = `
 <DocumentFragment>
   <div
     class="_flex_4dswl_9 mx_RoomAvatarView"
@@ -331,7 +274,7 @@ exports[`<RoomAvatarView /> should render the OFFLINE presence 1`] = `
 </DocumentFragment>
 `;
 
-exports[`<RoomAvatarView /> should render the ONLINE presence 1`] = `
+exports[`<RoomAvatarView /> should render the online presence 1`] = `
 <DocumentFragment>
   <div
     class="_flex_4dswl_9 mx_RoomAvatarView"
@@ -387,3 +330,60 @@ exports[`<RoomAvatarView /> should render the ONLINE presence 1`] = `
   </div>
 </DocumentFragment>
 `;
+
+exports[`<RoomAvatarView /> should render the unavailable presence 1`] = `
+<DocumentFragment>
+  <div
+    class="_flex_4dswl_9 mx_RoomAvatarView"
+    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: 0; --mx-flex-wrap: nowrap;"
+  >
+    <span
+      aria-label="Avatar"
+      class="_avatar_va14e_8 mx_BaseAvatar mx_RoomAvatarView_RoomAvatar mx_RoomAvatarView_RoomAvatar_presence"
+      data-color="1"
+      data-testid="avatar-img"
+      data-type="round"
+      style="--cpd-avatar-size: 32px;"
+    >
+      <img
+        alt=""
+        class="_image_va14e_43"
+        data-type="round"
+        height="32px"
+        loading="lazy"
+        referrerpolicy="no-referrer"
+        src="http://this.is.a.url/avatar.url/room.png"
+        width="32px"
+      />
+    </span>
+    <svg
+      aria-label="Away"
+      aria-labelledby="react-use-id-1"
+      class="mx_RoomAvatarView_PresenceDecoration"
+      color="var(--cpd-color-icon-quaternary)"
+      fill="currentColor"
+      height="8px"
+      viewBox="0 0 8 8"
+      width="8px"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g
+        clip-path="url(#cpd_PresenceSolid8X8Icon_a)"
+      >
+        <path
+          d="M8 4a4 4 0 1 1-8 0 4 4 0 0 1 8 0"
+        />
+      </g>
+      <defs>
+        <clippath
+          id="cpd_PresenceSolid8X8Icon_a"
+        >
+          <path
+            d="M0 0h8v8H0z"
+          />
+        </clippath>
+      </defs>
+    </svg>
+  </div>
+</DocumentFragment>
+`;

apps/web/test/unit-tests/components/views/avatars/__snapshots__/WithPresenceIndicator-test.tsx.snap

@@ -7,11 +7,43 @@ exports[`WithPresenceIndicator renders presence indicator with tooltip for DM ro
   >
     <span />
     <div
-      aria-labelledby="react-use-id-1"
-      class="mx_WithPresenceIndicator_icon mx_WithPresenceIndicator_icon_online"
-      style="width: 32px; height: 32px;"
-      tabindex="0"
-    />
+      class="mx_WithPresenceIndicator_icon"
+    >
+      <span
+        tabindex="0"
+      >
+        <div
+          aria-labelledby="react-use-id-1"
+          class="mx_PresenceIconView"
+        >
+          <svg
+            class="mx_PresenceIconView_online"
+            fill="currentColor"
+            height="8px"
+            viewBox="0 0 8 8"
+            width="8px"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <g
+              clip-path="url(#cpd_PresenceSolid8X8Icon_a)"
+            >
+              <path
+                d="M8 4a4 4 0 1 1-8 0 4 4 0 0 1 8 0"
+              />
+            </g>
+            <defs>
+              <clippath
+                id="cpd_PresenceSolid8X8Icon_a"
+              >
+                <path
+                  d="M0 0h8v8H0z"
+                />
+              </clippath>
+            </defs>
+          </svg>
+        </div>
+      </span>
+    </div>
   </div>
 </DocumentFragment>
 `;
@@ -23,11 +55,45 @@ exports[`WithPresenceIndicator renders presence indicator with tooltip for DM ro
   >
     <span />
     <div
-      aria-labelledby="react-use-id-1"
-      class="mx_WithPresenceIndicator_icon mx_WithPresenceIndicator_icon_offline"
-      style="width: 32px; height: 32px;"
-      tabindex="0"
-    />
+      class="mx_WithPresenceIndicator_icon"
+    >
+      <span
+        tabindex="0"
+      >
+        <div
+          aria-labelledby="react-use-id-1"
+          class="mx_PresenceIconView"
+        >
+          <svg
+            class="mx_PresenceIconView_offline"
+            fill="currentColor"
+            height="8px"
+            viewBox="0 0 8 8"
+            width="8px"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <g
+              clip-path="url(#cpd_PresenceOutline8X8Icon_a)"
+            >
+              <path
+                clip-rule="evenodd"
+                d="M4 6.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5M4 8a4 4 0 1 0 0-8 4 4 0 0 0 0 8"
+                fill-rule="evenodd"
+              />
+            </g>
+            <defs>
+              <clippath
+                id="cpd_PresenceOutline8X8Icon_a"
+              >
+                <path
+                  d="M0 0h8v8H0z"
+                />
+              </clippath>
+            </defs>
+          </svg>
+        </div>
+      </span>
+    </div>
   </div>
 </DocumentFragment>
 `;
@@ -39,11 +105,43 @@ exports[`WithPresenceIndicator renders presence indicator with tooltip for DM ro
   >
     <span />
     <div
-      aria-labelledby="react-use-id-1"
-      class="mx_WithPresenceIndicator_icon mx_WithPresenceIndicator_icon_away"
-      style="width: 32px; height: 32px;"
-      tabindex="0"
-    />
+      class="mx_WithPresenceIndicator_icon"
+    >
+      <span
+        tabindex="0"
+      >
+        <div
+          aria-labelledby="react-use-id-1"
+          class="mx_PresenceIconView"
+        >
+          <svg
+            class="mx_PresenceIconView_unavailable"
+            fill="currentColor"
+            height="8px"
+            viewBox="0 0 8 8"
+            width="8px"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <g
+              clip-path="url(#cpd_PresenceSolid8X8Icon_a)"
+            >
+              <path
+                d="M8 4a4 4 0 1 1-8 0 4 4 0 0 1 8 0"
+              />
+            </g>
+            <defs>
+              <clippath
+                id="cpd_PresenceSolid8X8Icon_a"
+              >
+                <path
+                  d="M0 0h8v8H0z"
+                />
+              </clippath>
+            </defs>
+          </svg>
+        </div>
+      </span>
+    </div>
   </div>
 </DocumentFragment>
 `;

apps/web/test/unit-tests/components/views/rooms/memberlist/PresenceIconView-test.tsx

@@ -7,7 +7,8 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React from "react";
-import { render } from "jest-matrix-react";
+import { render, waitFor } from "jest-matrix-react";
+import userEvent from "@testing-library/user-event";
 
 import AvatarPresenceIconView from "../../../../../../src/components/views/rooms/MemberList/tiles/common/PresenceIconView";
 
@@ -39,4 +40,24 @@ describe("<PresenceIconView/>", () => {
         expect(container.querySelector(".mx_PresenceIconView_dnd")).toBeDefined();
         expect(container).toMatchSnapshot();
     });
+
+    it("renders the tooltip", async () => {
+        const user = userEvent.setup();
+
+        const { container, asFragment } = render(<AvatarPresenceIconView presenceState="busy" />);
+
+        const presence = container.querySelector(".mx_PresenceIconView")!;
+        expect(presence).toBeVisible();
+        await user.hover(presence!);
+
+        // wait for the tooltip to open
+        const tooltip = await waitFor(() => {
+            const tooltip = document.getElementById(presence.getAttribute("aria-labelledby")!);
+            expect(tooltip).toBeVisible();
+            return tooltip;
+        });
+        expect(tooltip).toHaveTextContent("Busy");
+
+        expect(asFragment()).toMatchSnapshot();
+    });
 });

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

@@ -29,7 +29,9 @@ exports[`MemberTileView RoomMemberTileView should display an verified E2EIcon wh
           >
             u
           </span>
-           
+          <div
+            class="mx_MemberTileView_presence"
+          />
         </div>
         <div
           class="mx_MemberTileView_name"
@@ -105,7 +107,9 @@ exports[`MemberTileView RoomMemberTileView should display an warning E2EIcon whe
           >
             u
           </span>
-           
+          <div
+            class="mx_MemberTileView_presence"
+          />
         </div>
         <div
           class="mx_MemberTileView_name"
@@ -181,7 +185,9 @@ exports[`MemberTileView RoomMemberTileView should not display an E2EIcon when th
           >
             u
           </span>
-           
+          <div
+            class="mx_MemberTileView_presence"
+          />
         </div>
         <div
           class="mx_MemberTileView_name"
@@ -239,7 +245,9 @@ exports[`MemberTileView ThreePidInviteTileView renders ThreePidInvite correctly
           >
             F
           </span>
-           
+          <div
+            class="mx_MemberTileView_presence"
+          />
         </div>
         <div
           class="mx_MemberTileView_name"

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

@@ -2,174 +2,240 @@
 
 exports[`<PresenceIconView/> renders correctly for presence=busy 1`] = `
 <div>
-  <div
-    class="mx_PresenceIconView"
+  <span
+    tabindex="0"
   >
-    <svg
-      class="mx_PresenceIconView_dnd"
-      fill="currentColor"
-      height="8px"
-      viewBox="0 0 8 8"
-      width="8px"
-      xmlns="http://www.w3.org/2000/svg"
+    <div
+      aria-labelledby="react-use-id-1"
+      class="mx_PresenceIconView"
     >
-      <g
-        clip-path="url(#cpd_PresenceStrikethrough8X8Icon_a)"
+      <svg
+        class="mx_PresenceIconView_dnd"
+        fill="currentColor"
+        height="8px"
+        viewBox="0 0 8 8"
+        width="8px"
+        xmlns="http://www.w3.org/2000/svg"
       >
-        <path
-          clip-rule="evenodd"
-          d="M8 4a4 4 0 1 1-8 0 4 4 0 0 1 8 0M5.435 6.048A2.5 2.5 0 0 1 1.687 3.05zm.914-1.19L2.648 1.897a2.5 2.5 0 0 1 3.701 2.961"
-          fill-rule="evenodd"
-        />
-      </g>
-      <defs>
-        <clippath
-          id="cpd_PresenceStrikethrough8X8Icon_a"
+        <g
+          clip-path="url(#cpd_PresenceStrikethrough8X8Icon_a)"
         >
           <path
-            d="M0 0h8v8H0z"
+            clip-rule="evenodd"
+            d="M8 4a4 4 0 1 1-8 0 4 4 0 0 1 8 0M5.435 6.048A2.5 2.5 0 0 1 1.687 3.05zm.914-1.19L2.648 1.897a2.5 2.5 0 0 1 3.701 2.961"
+            fill-rule="evenodd"
           />
-        </clippath>
-      </defs>
-    </svg>
-  </div>
+        </g>
+        <defs>
+          <clippath
+            id="cpd_PresenceStrikethrough8X8Icon_a"
+          >
+            <path
+              d="M0 0h8v8H0z"
+            />
+          </clippath>
+        </defs>
+      </svg>
+    </div>
+  </span>
 </div>
 `;
 
 exports[`<PresenceIconView/> renders correctly for presence=offline 1`] = `
 <div>
-  <div
-    class="mx_PresenceIconView"
+  <span
+    tabindex="0"
   >
-    <svg
-      class="mx_PresenceIconView_offline"
-      fill="currentColor"
-      height="8px"
-      viewBox="0 0 8 8"
-      width="8px"
-      xmlns="http://www.w3.org/2000/svg"
+    <div
+      aria-labelledby="react-use-id-1"
+      class="mx_PresenceIconView"
     >
-      <g
-        clip-path="url(#cpd_PresenceOutline8X8Icon_a)"
+      <svg
+        class="mx_PresenceIconView_offline"
+        fill="currentColor"
+        height="8px"
+        viewBox="0 0 8 8"
+        width="8px"
+        xmlns="http://www.w3.org/2000/svg"
       >
-        <path
-          clip-rule="evenodd"
-          d="M4 6.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5M4 8a4 4 0 1 0 0-8 4 4 0 0 0 0 8"
-          fill-rule="evenodd"
-        />
-      </g>
-      <defs>
-        <clippath
-          id="cpd_PresenceOutline8X8Icon_a"
+        <g
+          clip-path="url(#cpd_PresenceOutline8X8Icon_a)"
         >
           <path
-            d="M0 0h8v8H0z"
+            clip-rule="evenodd"
+            d="M4 6.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5M4 8a4 4 0 1 0 0-8 4 4 0 0 0 0 8"
+            fill-rule="evenodd"
           />
-        </clippath>
-      </defs>
-    </svg>
-  </div>
+        </g>
+        <defs>
+          <clippath
+            id="cpd_PresenceOutline8X8Icon_a"
+          >
+            <path
+              d="M0 0h8v8H0z"
+            />
+          </clippath>
+        </defs>
+      </svg>
+    </div>
+  </span>
 </div>
 `;
 
 exports[`<PresenceIconView/> renders correctly for presence=online 1`] = `
 <div>
-  <div
-    class="mx_PresenceIconView"
+  <span
+    tabindex="0"
   >
-    <svg
-      class="mx_PresenceIconView_online"
-      fill="currentColor"
-      height="8px"
-      viewBox="0 0 8 8"
-      width="8px"
-      xmlns="http://www.w3.org/2000/svg"
+    <div
+      aria-labelledby="react-use-id-1"
+      class="mx_PresenceIconView"
     >
-      <g
-        clip-path="url(#cpd_PresenceSolid8X8Icon_a)"
+      <svg
+        class="mx_PresenceIconView_online"
+        fill="currentColor"
+        height="8px"
+        viewBox="0 0 8 8"
+        width="8px"
+        xmlns="http://www.w3.org/2000/svg"
       >
-        <path
-          d="M8 4a4 4 0 1 1-8 0 4 4 0 0 1 8 0"
-        />
-      </g>
-      <defs>
-        <clippath
-          id="cpd_PresenceSolid8X8Icon_a"
+        <g
+          clip-path="url(#cpd_PresenceSolid8X8Icon_a)"
         >
           <path
-            d="M0 0h8v8H0z"
+            d="M8 4a4 4 0 1 1-8 0 4 4 0 0 1 8 0"
           />
-        </clippath>
-      </defs>
-    </svg>
-  </div>
+        </g>
+        <defs>
+          <clippath
+            id="cpd_PresenceSolid8X8Icon_a"
+          >
+            <path
+              d="M0 0h8v8H0z"
+            />
+          </clippath>
+        </defs>
+      </svg>
+    </div>
+  </span>
 </div>
 `;
 
 exports[`<PresenceIconView/> renders correctly for presence=unavailable/unreachable 1`] = `
 <div>
-  <div
-    class="mx_PresenceIconView"
+  <span
+    tabindex="0"
   >
-    <svg
-      class="mx_PresenceIconView_unavailable"
-      fill="currentColor"
-      height="8px"
-      viewBox="0 0 8 8"
-      width="8px"
-      xmlns="http://www.w3.org/2000/svg"
+    <div
+      aria-labelledby="react-use-id-1"
+      class="mx_PresenceIconView"
     >
-      <g
-        clip-path="url(#cpd_PresenceSolid8X8Icon_a)"
+      <svg
+        class="mx_PresenceIconView_unavailable"
+        fill="currentColor"
+        height="8px"
+        viewBox="0 0 8 8"
+        width="8px"
+        xmlns="http://www.w3.org/2000/svg"
       >
-        <path
-          d="M8 4a4 4 0 1 1-8 0 4 4 0 0 1 8 0"
-        />
-      </g>
-      <defs>
-        <clippath
-          id="cpd_PresenceSolid8X8Icon_a"
+        <g
+          clip-path="url(#cpd_PresenceSolid8X8Icon_a)"
         >
           <path
-            d="M0 0h8v8H0z"
+            d="M8 4a4 4 0 1 1-8 0 4 4 0 0 1 8 0"
           />
-        </clippath>
-      </defs>
-    </svg>
-  </div>
+        </g>
+        <defs>
+          <clippath
+            id="cpd_PresenceSolid8X8Icon_a"
+          >
+            <path
+              d="M0 0h8v8H0z"
+            />
+          </clippath>
+        </defs>
+      </svg>
+    </div>
+  </span>
 </div>
 `;
 
 exports[`<PresenceIconView/> renders correctly for presence=unavailable/unreachable 2`] = `
 <div>
-  <div
-    class="mx_PresenceIconView"
+  <span
+    tabindex="0"
   >
-    <svg
-      class="mx_PresenceIconView_unavailable"
-      fill="currentColor"
-      height="8px"
-      viewBox="0 0 8 8"
-      width="8px"
-      xmlns="http://www.w3.org/2000/svg"
+    <div
+      aria-labelledby="react-use-id-1"
+      class="mx_PresenceIconView"
     >
-      <g
-        clip-path="url(#cpd_PresenceSolid8X8Icon_a)"
+      <svg
+        class="mx_PresenceIconView_unavailable"
+        fill="currentColor"
+        height="8px"
+        viewBox="0 0 8 8"
+        width="8px"
+        xmlns="http://www.w3.org/2000/svg"
       >
-        <path
-          d="M8 4a4 4 0 1 1-8 0 4 4 0 0 1 8 0"
-        />
-      </g>
-      <defs>
-        <clippath
-          id="cpd_PresenceSolid8X8Icon_a"
+        <g
+          clip-path="url(#cpd_PresenceSolid8X8Icon_a)"
         >
           <path
-            d="M0 0h8v8H0z"
+            d="M8 4a4 4 0 1 1-8 0 4 4 0 0 1 8 0"
           />
-        </clippath>
-      </defs>
-    </svg>
-  </div>
+        </g>
+        <defs>
+          <clippath
+            id="cpd_PresenceSolid8X8Icon_a"
+          >
+            <path
+              d="M0 0h8v8H0z"
+            />
+          </clippath>
+        </defs>
+      </svg>
+    </div>
+  </span>
 </div>
 `;
+
+exports[`<PresenceIconView/> renders the tooltip 1`] = `
+<DocumentFragment>
+  <span
+    tabindex="0"
+  >
+    <div
+      aria-labelledby="react-use-id-1"
+      class="mx_PresenceIconView"
+    >
+      <svg
+        class="mx_PresenceIconView_dnd"
+        fill="currentColor"
+        height="8px"
+        viewBox="0 0 8 8"
+        width="8px"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <g
+          clip-path="url(#cpd_PresenceStrikethrough8X8Icon_a)"
+        >
+          <path
+            clip-rule="evenodd"
+            d="M8 4a4 4 0 1 1-8 0 4 4 0 0 1 8 0M5.435 6.048A2.5 2.5 0 0 1 1.687 3.05zm.914-1.19L2.648 1.897a2.5 2.5 0 0 1 3.701 2.961"
+            fill-rule="evenodd"
+          />
+        </g>
+        <defs>
+          <clippath
+            id="cpd_PresenceStrikethrough8X8Icon_a"
+          >
+            <path
+              d="M0 0h8v8H0z"
+            />
+          </clippath>
+        </defs>
+      </svg>
+    </div>
+  </span>
+</DocumentFragment>
+`;