Update dependency @vector-im/compound-web to v0.9.4 (#11891)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>

package.json

@@ -76,7 +76,7 @@
         "@sentry/browser": "^7.0.0",
         "@testing-library/react-hooks": "^8.0.1",
         "@vector-im/compound-design-tokens": "^0.1.0",
-        "@vector-im/compound-web": "0.8.1",
+        "@vector-im/compound-web": "0.9.4",
         "@zxcvbn-ts/core": "^3.0.4",
         "@zxcvbn-ts/language-common": "^3.0.4",
         "@zxcvbn-ts/language-en": "^3.0.2",

src/PosthogTrackers.ts

@@ -91,7 +91,7 @@ export default class PosthogTrackers {
         this.trackPage();
     }
 
-    public static trackInteraction(name: InteractionName, ev?: SyntheticEvent, index?: number): void {
+    public static trackInteraction(name: InteractionName, ev?: SyntheticEvent | Event, index?: number): void {
         let interactionType: InteractionEvent["interactionType"];
         if (ev?.type === "click") {
             interactionType = "Pointer";

src/components/views/right_panel/RoomSummaryCard.tsx

@@ -39,7 +39,7 @@ import { useIsEncrypted } from "../../../hooks/useIsEncrypted";
 import BaseCard, { Group } from "./BaseCard";
 import { _t } from "../../../languageHandler";
 import RoomAvatar from "../avatars/RoomAvatar";
-import AccessibleButton, { ButtonEvent } from "../elements/AccessibleButton";
+import AccessibleButton from "../elements/AccessibleButton";
 import defaultDispatcher from "../../../dispatcher/dispatcher";
 import { RightPanelPhases } from "../../../stores/right-panel/RightPanelStorePhases";
 import Modal from "../../../Modal";
@@ -268,7 +268,7 @@ const onRoomPinsClick = (): void => {
     RightPanelStore.instance.pushCard({ phase: RightPanelPhases.PinnedMessages }, true);
 };
 
-const onRoomSettingsClick = (ev: ButtonEvent): void => {
+const onRoomSettingsClick = (ev: Event): void => {
     defaultDispatcher.dispatch({ action: "open_room_settings" });
     PosthogTrackers.trackInteraction("WebRightPanelRoomInfoSettingsButton", ev);
 };
@@ -303,7 +303,7 @@ const RoomSummaryCard: React.FC<IProps> = ({ room, permalinkCreator, onClose, on
         });
     };
 
-    const onRoomMembersClick = (ev: ButtonEvent): void => {
+    const onRoomMembersClick = (ev: Event): void => {
         RightPanelStore.instance.pushCard({ phase: RightPanelPhases.RoomMemberList }, true);
         PosthogTrackers.trackInteraction("WebRightPanelRoomInfoPeopleButton", ev);
     };
@@ -433,15 +433,17 @@ const RoomSummaryCard: React.FC<IProps> = ({ room, permalinkCreator, onClose, on
                 label={_t("room|context_menu|favourite")}
                 checked={isFavorite}
                 onChange={() => tagRoom(room, DefaultTagID.Favourite)}
+                // XXX: https://github.com/element-hq/compound/issues/288
+                onSelect={() => {}}
             />
             <MenuItem
                 Icon={UserAddIcon}
                 label={_t("action|invite")}
                 disabled={!canInviteTo(room)}
-                onClick={() => inviteToRoom(room)}
+                onSelect={() => inviteToRoom(room)}
             />
-            <MenuItem Icon={LinkIcon} label={_t("action|copy_link")} onClick={onShareRoomClick} />
+            <MenuItem Icon={LinkIcon} label={_t("action|copy_link")} onSelect={onShareRoomClick} />
-            <MenuItem Icon={SettingsIcon} label={_t("common|settings")} onClick={onRoomSettingsClick} />
+            <MenuItem Icon={SettingsIcon} label={_t("common|settings")} onSelect={onRoomSettingsClick} />
 
             <Separator />
             <MenuItem
@@ -449,34 +451,34 @@ const RoomSummaryCard: React.FC<IProps> = ({ room, permalinkCreator, onClose, on
                 // and is a short term solution until legacy room header is removed
                 Icon={UserProfileSolidIcon}
                 label={_t("common|people")}
-                onClick={onRoomMembersClick}
+                onSelect={onRoomMembersClick}
             />
             {!isVideoRoom && (
                 <>
-                    <MenuItem Icon={FilesIcon} label={_t("right_panel|files_button")} onClick={onRoomFilesClick} />
+                    <MenuItem Icon={FilesIcon} label={_t("right_panel|files_button")} onSelect={onRoomFilesClick} />
                     <MenuItem
                         Icon={PollsIcon}
                         label={_t("right_panel|polls_button")}
-                        onClick={onRoomPollHistoryClick}
+                        onSelect={onRoomPollHistoryClick}
                     />
                     {pinningEnabled && (
                         <MenuItem
                             Icon={PinIcon}
                             label={_t("right_panel|pinned_messages_button")}
-                            onClick={onRoomPinsClick}
+                            onSelect={onRoomPinsClick}
                         >
                             <Text as="span" size="sm">
                                 {pinCount}
                             </Text>
                         </MenuItem>
                     )}
-                    <MenuItem Icon={ExportArchiveIcon} label={_t("export_chat|title")} onClick={onRoomExportClick} />
+                    <MenuItem Icon={ExportArchiveIcon} label={_t("export_chat|title")} onSelect={onRoomExportClick} />
                 </>
             )}
 
             <Separator />
 
-            <MenuItem Icon={LeaveIcon} kind="critical" label={_t("action|leave_room")} onClick={onLeaveRoomClick} />
+            <MenuItem Icon={LeaveIcon} kind="critical" label={_t("action|leave_room")} onSelect={onLeaveRoomClick} />
 
             {SettingsStore.getValue(UIFeature.Widgets) &&
                 !isVideoRoom &&

src/utils/exportUtils/exportCSS.ts

@@ -33,7 +33,7 @@ function mutateCssText(css: string): string {
 }
 
 function isLightTheme(sheet: CSSStyleSheet): boolean {
-    return (<HTMLStyleElement>sheet.ownerNode).dataset.mxTheme?.toLowerCase() === "light";
+    return (<HTMLStyleElement>sheet.ownerNode)?.dataset.mxTheme?.toLowerCase() === "light";
 }
 
 async function getRulesFromCssFile(path: string): Promise<CSSStyleSheet> {

test/components/views/right_panel/RoomSummaryCard-test.tsx

@@ -34,6 +34,10 @@ import { PollHistoryDialog } from "../../../../src/components/views/dialogs/Poll
 import { RoomPermalinkCreator } from "../../../../src/utils/permalinks/Permalinks";
 import { _t } from "../../../../src/languageHandler";
 import SettingsStore from "../../../../src/settings/SettingsStore";
+import { tagRoom } from "../../../../src/utils/room/tagRoom";
+import { DefaultTagID } from "../../../../src/stores/room-list/models";
+
+jest.mock("../../../../src/utils/room/tagRoom");
 
 describe("<RoomSummaryCard />", () => {
     const userId = "@alice:domain.org";
@@ -63,6 +67,9 @@ describe("<RoomSummaryCard />", () => {
             isRoomEncrypted: jest.fn(),
             getOrCreateFilter: jest.fn().mockResolvedValue({ filterId: 1 }),
             getRoom: jest.fn(),
+            isGuest: jest.fn().mockReturnValue(false),
+            deleteRoomTag: jest.fn().mockResolvedValue({}),
+            setRoomTag: jest.fn().mockResolvedValue({}),
         });
         room = new Room(roomId, mockClient, userId);
         const roomCreateEvent = new MatrixEvent({
@@ -76,6 +83,7 @@ describe("<RoomSummaryCard />", () => {
             state_key: "",
         });
         room.currentState.setStateEvents([roomCreateEvent]);
+        room.updateMyMembership("join");
 
         jest.spyOn(Modal, "createDialog");
         jest.spyOn(RightPanelStore.instance, "pushCard");
@@ -133,6 +141,22 @@ describe("<RoomSummaryCard />", () => {
         expect(Modal.createDialog).toHaveBeenCalledWith(ShareDialog, { target: room });
     });
 
+    it("opens invite dialog on button click", () => {
+        const { getByText } = getComponent();
+
+        fireEvent.click(getByText(_t("action|invite")));
+
+        expect(defaultDispatcher.dispatch).toHaveBeenCalledWith({ action: "view_invite", roomId: room.roomId });
+    });
+
+    it("fires favourite dispatch on button click", () => {
+        const { getByText } = getComponent();
+
+        fireEvent.click(getByText(_t("room|context_menu|favourite")));
+
+        expect(tagRoom).toHaveBeenCalledWith(room, DefaultTagID.Favourite);
+    });
+
     it("opens room settings on button click", () => {
         const { getByText } = getComponent();
 

test/components/views/right_panel/__snapshots__/RoomSummaryCard-test.tsx.snap

@@ -71,24 +71,24 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
         </section>
       </header>
       <div
-        class="_separator_1uqhh_17"
+        class="_separator_1dey0_17"
         data-orientation="horizontal"
         role="separator"
       />
       <label
-        class="_item_zxa40_17 _interactive_zxa40_36"
+        class="_item_1bcsk_17 _interactive_1bcsk_36"
         data-kind="primary"
         for=":r1:"
         role="menuitemcheckbox"
       >
         <div
           aria-hidden="true"
-          class="_icon_zxa40_49"
+          class="_icon_1bcsk_44"
           height="24"
           width="24"
         />
         <span
-          class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_zxa40_58"
+          class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1bcsk_53"
         >
           Favourite
         </span>
@@ -106,25 +106,24 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
         </div>
       </label>
       <button
-        class="_item_zxa40_17 _interactive_zxa40_36 _disabled_zxa40_125"
+        class="_item_1bcsk_17 _interactive_1bcsk_36"
         data-kind="primary"
-        disabled=""
         role="menuitem"
       >
         <div
           aria-hidden="true"
-          class="_icon_zxa40_49"
+          class="_icon_1bcsk_44"
           height="24"
           width="24"
         />
         <span
-          class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_zxa40_58"
+          class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1bcsk_53"
         >
           Invite
         </span>
         <svg
           aria-hidden="true"
-          class="_nav-hint_zxa40_65"
+          class="_nav-hint_1bcsk_60"
           fill="none"
           height="24"
           viewBox="0 0 24 24"
@@ -138,24 +137,24 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
         </svg>
       </button>
       <button
-        class="_item_zxa40_17 _interactive_zxa40_36"
+        class="_item_1bcsk_17 _interactive_1bcsk_36"
         data-kind="primary"
         role="menuitem"
       >
         <div
           aria-hidden="true"
-          class="_icon_zxa40_49"
+          class="_icon_1bcsk_44"
           height="24"
           width="24"
         />
         <span
-          class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_zxa40_58"
+          class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1bcsk_53"
         >
           Copy link
         </span>
         <svg
           aria-hidden="true"
-          class="_nav-hint_zxa40_65"
+          class="_nav-hint_1bcsk_60"
           fill="none"
           height="24"
           viewBox="0 0 24 24"
@@ -169,24 +168,24 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
         </svg>
       </button>
       <button
-        class="_item_zxa40_17 _interactive_zxa40_36"
+        class="_item_1bcsk_17 _interactive_1bcsk_36"
         data-kind="primary"
         role="menuitem"
       >
         <div
           aria-hidden="true"
-          class="_icon_zxa40_49"
+          class="_icon_1bcsk_44"
           height="24"
           width="24"
         />
         <span
-          class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_zxa40_58"
+          class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1bcsk_53"
         >
           Settings
         </span>
         <svg
           aria-hidden="true"
-          class="_nav-hint_zxa40_65"
+          class="_nav-hint_1bcsk_60"
           fill="none"
           height="24"
           viewBox="0 0 24 24"
@@ -200,29 +199,29 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
         </svg>
       </button>
       <div
-        class="_separator_1uqhh_17"
+        class="_separator_1dey0_17"
         data-orientation="horizontal"
         role="separator"
       />
       <button
-        class="_item_zxa40_17 _interactive_zxa40_36"
+        class="_item_1bcsk_17 _interactive_1bcsk_36"
         data-kind="primary"
         role="menuitem"
       >
         <div
           aria-hidden="true"
-          class="_icon_zxa40_49"
+          class="_icon_1bcsk_44"
           height="24"
           width="24"
         />
         <span
-          class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_zxa40_58"
+          class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1bcsk_53"
         >
           People
         </span>
         <svg
           aria-hidden="true"
-          class="_nav-hint_zxa40_65"
+          class="_nav-hint_1bcsk_60"
           fill="none"
           height="24"
           viewBox="0 0 24 24"
@@ -236,24 +235,24 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
         </svg>
       </button>
       <button
-        class="_item_zxa40_17 _interactive_zxa40_36"
+        class="_item_1bcsk_17 _interactive_1bcsk_36"
         data-kind="primary"
         role="menuitem"
       >
         <div
           aria-hidden="true"
-          class="_icon_zxa40_49"
+          class="_icon_1bcsk_44"
           height="24"
           width="24"
         />
         <span
-          class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_zxa40_58"
+          class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1bcsk_53"
         >
           Files
         </span>
         <svg
           aria-hidden="true"
-          class="_nav-hint_zxa40_65"
+          class="_nav-hint_1bcsk_60"
           fill="none"
           height="24"
           viewBox="0 0 24 24"
@@ -267,24 +266,24 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
         </svg>
       </button>
       <button
-        class="_item_zxa40_17 _interactive_zxa40_36"
+        class="_item_1bcsk_17 _interactive_1bcsk_36"
         data-kind="primary"
         role="menuitem"
       >
         <div
           aria-hidden="true"
-          class="_icon_zxa40_49"
+          class="_icon_1bcsk_44"
           height="24"
           width="24"
         />
         <span
-          class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_zxa40_58"
+          class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1bcsk_53"
         >
           Poll history
         </span>
         <svg
           aria-hidden="true"
-          class="_nav-hint_zxa40_65"
+          class="_nav-hint_1bcsk_60"
           fill="none"
           height="24"
           viewBox="0 0 24 24"
@@ -298,24 +297,24 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
         </svg>
       </button>
       <button
-        class="_item_zxa40_17 _interactive_zxa40_36"
+        class="_item_1bcsk_17 _interactive_1bcsk_36"
         data-kind="primary"
         role="menuitem"
       >
         <div
           aria-hidden="true"
-          class="_icon_zxa40_49"
+          class="_icon_1bcsk_44"
           height="24"
           width="24"
         />
         <span
-          class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_zxa40_58"
+          class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1bcsk_53"
         >
           Export Chat
         </span>
         <svg
           aria-hidden="true"
-          class="_nav-hint_zxa40_65"
+          class="_nav-hint_1bcsk_60"
           fill="none"
           height="24"
           viewBox="0 0 24 24"
@@ -329,29 +328,29 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
         </svg>
       </button>
       <div
-        class="_separator_1uqhh_17"
+        class="_separator_1dey0_17"
         data-orientation="horizontal"
         role="separator"
       />
       <button
-        class="_item_zxa40_17 _interactive_zxa40_36"
+        class="_item_1bcsk_17 _interactive_1bcsk_36"
         data-kind="critical"
         role="menuitem"
       >
         <div
           aria-hidden="true"
-          class="_icon_zxa40_49"
+          class="_icon_1bcsk_44"
           height="24"
           width="24"
         />
         <span
-          class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_zxa40_58"
+          class="_typography_yh5dq_162 _font-body-md-medium_yh5dq_69 _label_1bcsk_53"
         >
           Leave room
         </span>
         <svg
           aria-hidden="true"
-          class="_nav-hint_zxa40_65"
+          class="_nav-hint_1bcsk_60"
           fill="none"
           height="24"
           viewBox="0 0 24 24"

test/components/views/rooms/MemberList-test.tsx

@@ -406,7 +406,7 @@ describe("MemberList", () => {
                 await flushPromises();
 
                 // button rendered but disabled
-                expect(screen.getByText("Invite to this room")).toBeDisabled();
+                expect(screen.getByText("Invite to this room")).toHaveAttribute("aria-disabled", "true");
             });
 
             it("renders enabled invite button when current user is a member and has rights to invite", async () => {

test/components/views/rooms/RoomHeader-test.tsx

@@ -238,7 +238,7 @@ describe("RoomHeader", () => {
                 withClientContextRenderOptions(MatrixClientPeg.get()!),
             );
             for (const button of getAllByLabelText(container, "There's no one here to call")) {
-                expect(button).toBeDisabled();
+                expect(button).toHaveAttribute("aria-disabled", "true");
             }
         });
 
@@ -250,8 +250,8 @@ describe("RoomHeader", () => {
             );
             const voiceButton = getByLabelText(container, "Voice call");
             const videoButton = getByLabelText(container, "Video call");
-            expect(voiceButton).not.toBeDisabled();
+            expect(voiceButton).not.toHaveAttribute("aria-disabled", "true");
-            expect(videoButton).not.toBeDisabled();
+            expect(videoButton).not.toHaveAttribute("aria-disabled", "true");
 
             const placeCallSpy = jest.spyOn(LegacyCallHandler.instance, "placeCall");
 
@@ -273,7 +273,7 @@ describe("RoomHeader", () => {
                 withClientContextRenderOptions(MatrixClientPeg.get()!),
             );
             for (const button of getAllByLabelText(container, "Ongoing call")) {
-                expect(button).toBeDisabled();
+                expect(button).toHaveAttribute("aria-disabled", "true");
             }
         });
 
@@ -285,8 +285,8 @@ describe("RoomHeader", () => {
                 withClientContextRenderOptions(MatrixClientPeg.get()!),
             );
 
-            expect(getByLabelText(container, "Voice call")).not.toBeDisabled();
+            expect(getByLabelText(container, "Voice call")).not.toHaveAttribute("aria-disabled", "true");
-            expect(getByLabelText(container, "Video call")).not.toBeDisabled();
+            expect(getByLabelText(container, "Video call")).not.toHaveAttribute("aria-disabled", "true");
         });
 
         it("disable calls in large rooms by default", () => {
@@ -298,10 +298,10 @@ describe("RoomHeader", () => {
             );
             expect(
                 getByLabelText(container, "You do not have permission to start voice calls", { selector: "button" }),
-            ).toBeDisabled();
+            ).toHaveAttribute("aria-disabled", "true");
             expect(
                 getByLabelText(container, "You do not have permission to start video calls", { selector: "button" }),
-            ).toBeDisabled();
+            ).toHaveAttribute("aria-disabled", "true");
         });
     });
 
@@ -324,7 +324,7 @@ describe("RoomHeader", () => {
             expect(screen.queryByTitle("Voice call")).toBeNull();
 
             const videoCallButton = getByLabelText(container, "Video call");
-            expect(videoCallButton).not.toBeDisabled();
+            expect(videoCallButton).not.toHaveAttribute("aria-disabled", "true");
 
             const dispatcherSpy = jest.spyOn(dispatcher, "dispatch");
 
@@ -345,7 +345,7 @@ describe("RoomHeader", () => {
                 <RoomHeader room={room} />,
                 withClientContextRenderOptions(MatrixClientPeg.get()!),
             );
-            expect(getByLabelText(container, "Ongoing call")).toBeDisabled();
+            expect(getByLabelText(container, "Ongoing call")).toHaveAttribute("aria-disabled", "true");
         });
 
         it("clicking on ongoing (unpinned) call re-pins it", () => {
@@ -362,7 +362,7 @@ describe("RoomHeader", () => {
                 <RoomHeader room={room} />,
                 withClientContextRenderOptions(MatrixClientPeg.get()!),
             );
-            expect(getByLabelText(container, "Video call")).not.toBeDisabled();
+            expect(getByLabelText(container, "Video call")).not.toHaveAttribute("aria-disabled", "true");
             fireEvent.click(getByLabelText(container, "Video call"));
             expect(spy).toHaveBeenCalledWith(room, widget, Container.Top);
         });
@@ -378,7 +378,7 @@ describe("RoomHeader", () => {
                 withClientContextRenderOptions(MatrixClientPeg.get()!),
             );
             for (const button of getAllByLabelText(container, "Ongoing call")) {
-                expect(button).toBeDisabled();
+                expect(button).toHaveAttribute("aria-disabled", "true");
             }
         });
 
@@ -389,7 +389,7 @@ describe("RoomHeader", () => {
                 withClientContextRenderOptions(MatrixClientPeg.get()!),
             );
             for (const button of getAllByLabelText(container, "There's no one here to call")) {
-                expect(button).toBeDisabled();
+                expect(button).toHaveAttribute("aria-disabled", "true");
             }
         });
 
@@ -402,8 +402,8 @@ describe("RoomHeader", () => {
 
             const voiceButton = getByLabelText(container, "Voice call");
             const videoButton = getByLabelText(container, "Video call");
-            expect(voiceButton).not.toBeDisabled();
+            expect(voiceButton).not.toHaveAttribute("aria-disabled", "true");
-            expect(videoButton).not.toBeDisabled();
+            expect(videoButton).not.toHaveAttribute("aria-disabled", "true");
 
             const placeCallSpy = jest.spyOn(LegacyCallHandler.instance, "placeCall");
             fireEvent.click(voiceButton);
@@ -428,8 +428,8 @@ describe("RoomHeader", () => {
 
             const voiceButton = getByLabelText(container, "Voice call");
             const videoButton = getByLabelText(container, "Video call");
-            expect(voiceButton).not.toBeDisabled();
+            expect(voiceButton).not.toHaveAttribute("aria-disabled", "true");
-            expect(videoButton).not.toBeDisabled();
+            expect(videoButton).not.toHaveAttribute("aria-disabled", "true");
 
             const placeCallSpy = jest.spyOn(LegacyCallHandler.instance, "placeCall");
             fireEvent.click(voiceButton);
@@ -455,8 +455,8 @@ describe("RoomHeader", () => {
 
             const voiceButton = getByLabelText(container, "Voice call");
             const videoButton = getByLabelText(container, "Video call");
-            expect(voiceButton).not.toBeDisabled();
+            expect(voiceButton).not.toHaveAttribute("aria-disabled", "true");
-            expect(videoButton).not.toBeDisabled();
+            expect(videoButton).not.toHaveAttribute("aria-disabled", "true");
 
             const dispatcherSpy = jest.spyOn(dispatcher, "dispatch");
             fireEvent.click(videoButton);

test/components/views/rooms/RoomHeader/__snapshots__/VideoRoomChatButton-test.tsx.snap

@@ -3,9 +3,11 @@
 exports[`<VideoRoomChatButton /> renders button when room is a video room 1`] = `
 <button
   aria-label="Chat"
-  class="_icon-button_1qjaf_17"
+  class="_icon-button_ur2sw_17"
   data-state="closed"
+  role="button"
   style="--cpd-icon-button-size: 32px;"
+  tabindex="0"
 >
   <div />
 </button>
@@ -14,10 +16,12 @@ exports[`<VideoRoomChatButton /> renders button when room is a video room 1`] =
 exports[`<VideoRoomChatButton /> renders button with an unread marker when room is unread 1`] = `
 <button
   aria-label="Chat"
-  class="_icon-button_1qjaf_17"
+  class="_icon-button_ur2sw_17"
   data-indicator="default"
   data-state="closed"
+  role="button"
   style="--cpd-icon-button-size: 32px;"
+  tabindex="0"
 >
   <div />
 </button>

test/components/views/rooms/__snapshots__/RoomHeader-test.tsx.snap

@@ -44,28 +44,34 @@ exports[`RoomHeader does not show the face pile for DMs 1`] = `
       style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x);"
     >
       <button
+        aria-disabled="true"
         aria-label="There's no one here to call"
-        class="_icon-button_1qjaf_17"
+        class="_icon-button_ur2sw_17"
         data-state="closed"
-        disabled=""
+        role="button"
         style="--cpd-icon-button-size: 32px;"
+        tabindex="0"
       >
         <div />
       </button>
       <button
+        aria-disabled="true"
         aria-label="There's no one here to call"
-        class="_icon-button_1qjaf_17"
+        class="_icon-button_ur2sw_17"
         data-state="closed"
-        disabled=""
+        role="button"
         style="--cpd-icon-button-size: 32px;"
+        tabindex="0"
       >
         <div />
       </button>
       <button
         aria-label="Threads"
-        class="_icon-button_1qjaf_17"
+        class="_icon-button_ur2sw_17"
         data-state="closed"
+        role="button"
         style="--cpd-icon-button-size: 32px;"
+        tabindex="0"
       >
         <div />
       </button>

yarn.lock

@@ -2271,6 +2271,17 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-primitive" "1.0.3"
 
+"@radix-ui/react-collection@1.0.3":
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-collection/-/react-collection-1.0.3.tgz#9595a66e09026187524a36c6e7e9c7d286469159"
+  integrity sha512-3SzW+0PW7yBBoQlT8wNcGtaxaD0XSu0uLUFgrtHY08Acx05TaHaOmVLR73c0j/cqpDy53KBMO7s0dx2wmOIDIA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-compose-refs" "1.0.1"
+    "@radix-ui/react-context" "1.0.1"
+    "@radix-ui/react-primitive" "1.0.3"
+    "@radix-ui/react-slot" "1.0.2"
+
 "@radix-ui/react-compose-refs@1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.1.tgz#7ed868b66946aa6030e580b1ffca386dd4d21989"
@@ -2285,6 +2296,34 @@
   dependencies:
     "@babel/runtime" "^7.13.10"
 
+"@radix-ui/react-dialog@^1.0.4":
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-dialog/-/react-dialog-1.0.5.tgz#71657b1b116de6c7a0b03242d7d43e01062c7300"
+  integrity sha512-GjWJX/AUpB703eEBanuBnIWdIXg6NvJFCXcNlSZk4xdszCdhrJgBoUd1cGk67vFO+WdA2pfI/plOpqz/5GUP6Q==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/primitive" "1.0.1"
+    "@radix-ui/react-compose-refs" "1.0.1"
+    "@radix-ui/react-context" "1.0.1"
+    "@radix-ui/react-dismissable-layer" "1.0.5"
+    "@radix-ui/react-focus-guards" "1.0.1"
+    "@radix-ui/react-focus-scope" "1.0.4"
+    "@radix-ui/react-id" "1.0.1"
+    "@radix-ui/react-portal" "1.0.4"
+    "@radix-ui/react-presence" "1.0.1"
+    "@radix-ui/react-primitive" "1.0.3"
+    "@radix-ui/react-slot" "1.0.2"
+    "@radix-ui/react-use-controllable-state" "1.0.1"
+    aria-hidden "^1.1.1"
+    react-remove-scroll "2.5.5"
+
+"@radix-ui/react-direction@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-direction/-/react-direction-1.0.1.tgz#9cb61bf2ccf568f3421422d182637b7f47596c9b"
+  integrity sha512-RXcvnXgyvYvBEOhCBuddKecVkoMiI10Jcm5cTI7abJRAHYfFxeu+FBQs/DvdxSYucxR5mna0dNsL6QFlds5TMA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
 "@radix-ui/react-dismissable-layer@1.0.5":
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.0.5.tgz#3f98425b82b9068dfbab5db5fff3df6ebf48b9d4"
@@ -2297,6 +2336,37 @@
     "@radix-ui/react-use-callback-ref" "1.0.1"
     "@radix-ui/react-use-escape-keydown" "1.0.3"
 
+"@radix-ui/react-dropdown-menu@^2.0.6":
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-dropdown-menu/-/react-dropdown-menu-2.0.6.tgz#cdf13c956c5e263afe4e5f3587b3071a25755b63"
+  integrity sha512-i6TuFOoWmLWq+M/eCLGd/bQ2HfAX1RJgvrBQ6AQLmzfvsLdefxbWu8G9zczcPFfcSPehz9GcpF6K9QYreFV8hA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/primitive" "1.0.1"
+    "@radix-ui/react-compose-refs" "1.0.1"
+    "@radix-ui/react-context" "1.0.1"
+    "@radix-ui/react-id" "1.0.1"
+    "@radix-ui/react-menu" "2.0.6"
+    "@radix-ui/react-primitive" "1.0.3"
+    "@radix-ui/react-use-controllable-state" "1.0.1"
+
+"@radix-ui/react-focus-guards@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-focus-guards/-/react-focus-guards-1.0.1.tgz#1ea7e32092216b946397866199d892f71f7f98ad"
+  integrity sha512-Rect2dWbQ8waGzhMavsIbmSVCgYxkXLxxR3ZvCX79JOglzdEy4JXMb98lq4hPxUbLr77nP0UOGf4rcMU+s1pUA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
+"@radix-ui/react-focus-scope@1.0.4":
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-focus-scope/-/react-focus-scope-1.0.4.tgz#2ac45fce8c5bb33eb18419cdc1905ef4f1906525"
+  integrity sha512-sL04Mgvf+FmyvZeYfNu1EPAaaxD+aw7cYeIB9L9Fvq8+urhltTRaEo5ysKOpHuKPclsZcSUMKlN05x4u+CINpA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-compose-refs" "1.0.1"
+    "@radix-ui/react-primitive" "1.0.3"
+    "@radix-ui/react-use-callback-ref" "1.0.1"
+
 "@radix-ui/react-form@^0.0.3":
   version "0.0.3"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-form/-/react-form-0.0.3.tgz#328e7163e723ccc748459d66a2d685d7b4f85d5a"
@@ -2326,6 +2396,31 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-primitive" "1.0.3"
 
+"@radix-ui/react-menu@2.0.6":
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-menu/-/react-menu-2.0.6.tgz#2c9e093c1a5d5daa87304b2a2f884e32288ae79e"
+  integrity sha512-BVkFLS+bUC8HcImkRKPSiVumA1VPOOEC5WBMiT+QAVsPzW1FJzI9KnqgGxVDPBcql5xXrHkD3JOVoXWEXD8SYA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/primitive" "1.0.1"
+    "@radix-ui/react-collection" "1.0.3"
+    "@radix-ui/react-compose-refs" "1.0.1"
+    "@radix-ui/react-context" "1.0.1"
+    "@radix-ui/react-direction" "1.0.1"
+    "@radix-ui/react-dismissable-layer" "1.0.5"
+    "@radix-ui/react-focus-guards" "1.0.1"
+    "@radix-ui/react-focus-scope" "1.0.4"
+    "@radix-ui/react-id" "1.0.1"
+    "@radix-ui/react-popper" "1.1.3"
+    "@radix-ui/react-portal" "1.0.4"
+    "@radix-ui/react-presence" "1.0.1"
+    "@radix-ui/react-primitive" "1.0.3"
+    "@radix-ui/react-roving-focus" "1.0.4"
+    "@radix-ui/react-slot" "1.0.2"
+    "@radix-ui/react-use-callback-ref" "1.0.1"
+    aria-hidden "^1.1.1"
+    react-remove-scroll "2.5.5"
+
 "@radix-ui/react-popper@1.1.3":
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-popper/-/react-popper-1.1.3.tgz#24c03f527e7ac348fabf18c89795d85d21b00b42"
@@ -2368,6 +2463,22 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-slot" "1.0.2"
 
+"@radix-ui/react-roving-focus@1.0.4":
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-roving-focus/-/react-roving-focus-1.0.4.tgz#e90c4a6a5f6ac09d3b8c1f5b5e81aab2f0db1974"
+  integrity sha512-2mUg5Mgcu001VkGy+FfzZyzbmuUWzgWkj3rvv4yu+mLw03+mTzbxZHvfcGyFp2b8EkQeMkpRQ5FiA2Vr2O6TeQ==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/primitive" "1.0.1"
+    "@radix-ui/react-collection" "1.0.3"
+    "@radix-ui/react-compose-refs" "1.0.1"
+    "@radix-ui/react-context" "1.0.1"
+    "@radix-ui/react-direction" "1.0.1"
+    "@radix-ui/react-id" "1.0.1"
+    "@radix-ui/react-primitive" "1.0.3"
+    "@radix-ui/react-use-callback-ref" "1.0.1"
+    "@radix-ui/react-use-controllable-state" "1.0.1"
+
 "@radix-ui/react-separator@^1.0.3":
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-separator/-/react-separator-1.0.3.tgz#be5a931a543d5726336b112f465f58585c04c8aa"
@@ -3184,16 +3295,18 @@
   dependencies:
     svg2vectordrawable "^2.9.1"
 
-"@vector-im/compound-web@0.8.1":
+"@vector-im/compound-web@0.9.4":
-  version "0.8.1"
+  version "0.9.4"
-  resolved "https://registry.yarnpkg.com/@vector-im/compound-web/-/compound-web-0.8.1.tgz#5ad709d78471b61af3adb41a3254a57a47cf5bb1"
+  resolved "https://registry.yarnpkg.com/@vector-im/compound-web/-/compound-web-0.9.4.tgz#89ac6d136c5f9d553de0e8540398a8a4b6cdeb6f"
-  integrity sha512-+va9oW0mVe1MdXcP/k2+6YUARNq5N4aDbOu4mVTCOrBz8k+Apzydr+EO1dCjPkwLgkbibu1dutLimW9FxYEH3Q==
+  integrity sha512-L1N0xe3G7k35b3i+5teYg1nplsbz8p+VOxIGWIPU4H7D4PBCxhf9i7ft8aJjLsIdIaInJkqjvKwPU+Yb/yvgUQ==
   dependencies:
+    "@radix-ui/react-dropdown-menu" "^2.0.6"
     "@radix-ui/react-form" "^0.0.3"
     "@radix-ui/react-separator" "^1.0.3"
     "@radix-ui/react-tooltip" "^1.0.6"
     classnames "^2.3.2"
     graphemer "^1.4.0"
+    vaul "^0.7.0"
 
 "@zxcvbn-ts/core@^3.0.4":
   version "3.0.4"
@@ -3398,6 +3511,13 @@ argparse@^2.0.1:
   resolved "https://registry.yarnpkg.com/argparse/-/argparse-2.0.1.tgz#246f50f3ca78a3240f6c997e8a9bd1eac49e4b38"
   integrity sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==
 
+aria-hidden@^1.1.1:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/aria-hidden/-/aria-hidden-1.2.3.tgz#14aeb7fb692bbb72d69bebfa47279c1fd725e954"
+  integrity sha512-xcLxITLe2HYa1cnYnwCjkOO1PqUHQpozB8x9AR0OgWN2woOBi5kSDVxKfd0b7sb1hw5qFeJhXm9H1nu3xSfLeQ==
+  dependencies:
+    tslib "^2.0.0"
+
 aria-query@5.1.3:
   version "5.1.3"
   resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-5.1.3.tgz#19db27cd101152773631396f7a95a3b58c22c35e"
@@ -5906,6 +6026,11 @@ get-intrinsic@^1.0.2, get-intrinsic@^1.1.1, get-intrinsic@^1.1.3, get-intrinsic@
     has-symbols "^1.0.3"
     hasown "^2.0.0"
 
+get-nonce@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/get-nonce/-/get-nonce-1.0.1.tgz#fdf3f0278073820d2ce9426c18f07481b1e0cdf3"
+  integrity sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==
+
 get-package-type@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/get-package-type/-/get-package-type-0.1.0.tgz#8de2d803cff44df3bc6c456e6668b36c3926e11a"
@@ -6333,6 +6458,13 @@ internal-slot@^1.0.5:
     hasown "^2.0.0"
     side-channel "^1.0.4"
 
+invariant@^2.2.4:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
+  integrity sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==
+  dependencies:
+    loose-envify "^1.0.0"
+
 ip-regex@^4.0.0:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/ip-regex/-/ip-regex-4.3.0.tgz#687275ab0f57fa76978ff8f4dddc8a23d5990db5"
@@ -7502,7 +7634,7 @@ loglevel@^1.7.1:
   resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.8.1.tgz#5c621f83d5b48c54ae93b6156353f555963377b4"
   integrity sha512-tCRIJM51SHjAayKwC+QAg8hT8vg6z7GSgLJKGvzuPb1Wc+hLzqtuVLxp6/HzSPOozuK+8ErAhy7U/sVzw8Dgfg==
 
-loose-envify@^1.1.0, loose-envify@^1.4.0:
+loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
   integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
@@ -8686,6 +8818,34 @@ react-redux@^7.2.0:
     prop-types "^15.7.2"
     react-is "^17.0.2"
 
+react-remove-scroll-bar@^2.3.3:
+  version "2.3.4"
+  resolved "https://registry.yarnpkg.com/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.4.tgz#53e272d7a5cb8242990c7f144c44d8bd8ab5afd9"
+  integrity sha512-63C4YQBUt0m6ALadE9XV56hV8BgJWDmmTPY758iIJjfQKt2nYwoUrPk0LXRXcB/yIj82T1/Ixfdpdk68LwIB0A==
+  dependencies:
+    react-style-singleton "^2.2.1"
+    tslib "^2.0.0"
+
+react-remove-scroll@2.5.5:
+  version "2.5.5"
+  resolved "https://registry.yarnpkg.com/react-remove-scroll/-/react-remove-scroll-2.5.5.tgz#1e31a1260df08887a8a0e46d09271b52b3a37e77"
+  integrity sha512-ImKhrzJJsyXJfBZ4bzu8Bwpka14c/fQt0k+cyFp/PBhTfyDnU5hjOtM4AG/0AMyy8oKzOTR0lDgJIM7pYXI0kw==
+  dependencies:
+    react-remove-scroll-bar "^2.3.3"
+    react-style-singleton "^2.2.1"
+    tslib "^2.1.0"
+    use-callback-ref "^1.3.0"
+    use-sidecar "^1.1.2"
+
+react-style-singleton@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/react-style-singleton/-/react-style-singleton-2.2.1.tgz#f99e420492b2d8f34d38308ff660b60d0b1205b4"
+  integrity sha512-ZWj0fHEMyWkHzKYUr2Bs/4zU6XLmq9HsgBURm7g5pAVfyn49DgUiNgY2d4lXRlYSiCif9YBGpQleewkcqddc7g==
+  dependencies:
+    get-nonce "^1.0.0"
+    invariant "^2.2.4"
+    tslib "^2.0.0"
+
 react-transition-group@^4.4.1:
   version "4.4.5"
   resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.5.tgz#e53d4e3f3344da8521489fbef8f2581d42becdd1"
@@ -10108,6 +10268,13 @@ vary@~1.1.2:
   resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
   integrity sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==
 
+vaul@^0.7.0:
+  version "0.7.9"
+  resolved "https://registry.yarnpkg.com/vaul/-/vaul-0.7.9.tgz#365dfe8f6c1df3a81a26508474db0e0ceb98ac8c"
+  integrity sha512-RrcnGOHOq/cEU3YpyyZrnjh0H79xMpF3IrHZs9ichvHlpKjLDc4Vwjn4VkuGzeUGrmQ3wamfm/cpdKWpvBIgQw==
+  dependencies:
+    "@radix-ui/react-dialog" "^1.0.4"
+
 verror@1.10.0:
   version "1.10.0"
   resolved "https://registry.yarnpkg.com/verror/-/verror-1.10.0.tgz#3a105ca17053af55d6e270c1f8288682e18da400"