Release announcement for new room list (#30675)

* Release announcement for new room list

* Update snapshots

* Update release announcement tests

* worryingly large snapshot update

* Remove the pinned message release anncounement

* Hopefully fix e2e tests

add missing e2e screenshot and remove one for removed test

* Remove unused i18n strings

* Fix screenshot

* Try straight on the quick settings button

* unused import

* update snapshots

* Fix settings location

playwright/e2e/release-announcement/index.ts

@@ -30,9 +30,8 @@ export class Helpers {
     /**
      * Get the release announcement with the given name.
      * @param name
-     * @private
      */
-    private getReleaseAnnouncement(name: string) {
+    public getReleaseAnnouncement(name: string) {
         return this.page.getByRole("dialog", { name });
     }
 
@@ -55,16 +54,6 @@ export class Helpers {
     assertReleaseAnnouncementIsNotVisible(name: string) {
         return expect(this.getReleaseAnnouncement(name)).not.toBeVisible();
     }
-
-    /**
-     * Mark the release announcement with the given name as read.
-     * If the release announcement is not visible, this will throw an error.
-     * @param name
-     */
-    async markReleaseAnnouncementAsRead(name: string) {
-        const dialog = this.getReleaseAnnouncement(name);
-        await dialog.getByRole("button", { name: "Ok" }).click();
-    }
 }
 
 export { expect };

playwright/e2e/release-announcement/releaseAnnouncement.spec.ts

@@ -22,25 +22,25 @@ test.describe("Release announcement", () => {
             await app.viewRoomById(roomId);
             await use({ roomId });
         },
+        labsFlags: ["feature_new_room_list"],
     });
 
     test(
-        "should display the pinned messages release announcement",
+        "should display the new room list release announcement",
         { tag: "@screenshot" },
         async ({ page, app, room, util }) => {
-            await app.toggleRoomInfoPanel();
+            const name = "Chats has a new look!";
-
-            const name = "All new pinned messages";
 
             // The release announcement should be displayed
             await util.assertReleaseAnnouncementIsVisible(name);
             // Hide the release announcement
-            await util.markReleaseAnnouncementAsRead(name);
+            const dialog = util.getReleaseAnnouncement(name);
+            await dialog.getByRole("button", { name: "Next" }).click();
+
             await util.assertReleaseAnnouncementIsNotVisible(name);
 
             await page.reload();
-            await app.toggleRoomInfoPanel();
+            await expect(page.getByRole("button", { name: "Room options" })).toBeVisible();
-            await expect(page.getByRole("menuitem", { name: "Pinned messages" })).toBeVisible();
             // Check that once the release announcement has been marked as viewed, it does not appear again
             await util.assertReleaseAnnouncementIsNotVisible(name);
         },

res/css/views/rooms/RoomListPanel/_RoomListHeaderView.pcss

@@ -32,4 +32,8 @@
             transform: rotate(180deg);
         }
     }
+
+    .mx_RoomListHeaderView_ReleaseAnnouncementAnchor {
+        display: inline-flex;
+    }
 }

src/components/views/right_panel/RoomSummaryCardView.tsx

@@ -49,7 +49,6 @@ import RoomName from "../elements/RoomName.tsx";
 import { Flex } from "../../../shared-components/utils/Flex";
 import { Linkify, topicToHtml } from "../../../HtmlUtils.tsx";
 import { Box } from "../../../shared-components/utils/Box";
-import { ReleaseAnnouncement } from "../../structures/ReleaseAnnouncement.tsx";
 import { useRoomSummaryCardViewModel } from "../../viewmodels/right_panel/RoomSummaryCardViewModel.tsx";
 import { useRoomTopicViewModel } from "../../viewmodels/right_panel/RoomSummaryCardTopicViewModel.tsx";
 
@@ -251,25 +250,15 @@ const RoomSummaryCardView: React.FC<IProps> = ({
                 <MenuItem Icon={ThreadsIcon} label={_t("common|threads")} onSelect={vm.onRoomThreadsClick} />
                 {!vm.isVideoRoom && (
                     <>
-                        <ReleaseAnnouncement
+                        <MenuItem
-                            feature="pinningMessageList"
+                            Icon={PinIcon}
-                            header={_t("right_panel|pinned_messages|release_announcement|title")}
+                            label={_t("right_panel|pinned_messages_button")}
-                            description={_t("right_panel|pinned_messages|release_announcement|description")}
+                            onSelect={vm.onRoomPinsClick}
-                            closeLabel={_t("right_panel|pinned_messages|release_announcement|close")}
-                            placement="top"
                         >
-                            <div>
+                            <Text as="span" size="sm">
-                                <MenuItem
+                                {vm.pinCount}
-                                    Icon={PinIcon}
+                            </Text>
-                                    label={_t("right_panel|pinned_messages_button")}
+                        </MenuItem>
-                                    onSelect={vm.onRoomPinsClick}
-                                >
-                                    <Text as="span" size="sm">
-                                        {vm.pinCount}
-                                    </Text>
-                                </MenuItem>
-                            </div>
-                        </ReleaseAnnouncement>
                         <MenuItem
                             Icon={FilesIcon}
                             label={_t("right_panel|files_button")}

src/components/views/rooms/RoomListPanel/RoomListHeaderView.tsx

@@ -23,6 +23,7 @@ import {
     useRoomListHeaderViewModel,
 } from "../../../viewmodels/roomlist/RoomListHeaderViewModel";
 import { RoomListOptionsMenu } from "./RoomListOptionsMenu";
+import { ReleaseAnnouncement } from "../../../structures/ReleaseAnnouncement";
 
 /**
  * The header view for the room list
@@ -45,15 +46,38 @@ export function RoomListHeaderView(): JSX.Element {
                 {vm.displaySpaceMenu && <SpaceMenu vm={vm} />}
             </Flex>
             <Flex align="center" gap="var(--cpd-space-2x)">
-                <RoomListOptionsMenu vm={vm} />
+                <ReleaseAnnouncement
+                    feature="newRoomList_sort"
+                    header={_t("room_list|release_announcement|sort|title")}
+                    description={_t("room_list|release_announcement|sort|description")}
+                    closeLabel={_t("room_list|release_announcement|next")}
+                    placement="bottom"
+                >
+                    <div className="mx_RoomListHeaderView_ReleaseAnnouncementAnchor">
+                        <RoomListOptionsMenu vm={vm} />
+                    </div>
+                </ReleaseAnnouncement>
+
                 {/* If we don't display the compose menu, it means that the user can only send DM */}
-                {vm.displayComposeMenu ? (
+                <ReleaseAnnouncement
-                    <ComposeMenu vm={vm} />
+                    feature="newRoomList_intro"
-                ) : (
+                    header={_t("room_list|release_announcement|intro|title")}
-                    <IconButton aria-label={_t("action|start_chat")} onClick={(e) => vm.createChatRoom(e.nativeEvent)}>
+                    description={_t("room_list|release_announcement|intro|description")}
-                        <ComposeIcon color="var(--cpd-color-icon-secondary)" />
+                    closeLabel={_t("room_list|release_announcement|next")}
-                    </IconButton>
+                >
-                )}
+                    <div className="mx_RoomListHeaderView_ReleaseAnnouncementAnchor">
+                        {vm.displayComposeMenu ? (
+                            <ComposeMenu vm={vm} />
+                        ) : (
+                            <IconButton
+                                aria-label={_t("action|start_chat")}
+                                onClick={(e) => vm.createChatRoom(e.nativeEvent)}
+                            >
+                                <ComposeIcon color="var(--cpd-color-icon-secondary)" />
+                            </IconButton>
+                        )}
+                    </div>
+                </ReleaseAnnouncement>
             </Flex>
         </Flex>
     );

src/components/views/rooms/RoomListPanel/RoomListView.tsx

@@ -11,6 +11,8 @@ import { useRoomListViewModel } from "../../../viewmodels/roomlist/RoomListViewM
 import { RoomList } from "./RoomList";
 import { EmptyRoomList } from "./EmptyRoomList";
 import { RoomListPrimaryFilters } from "./RoomListPrimaryFilters";
+import { _t } from "../../../../languageHandler";
+import { ReleaseAnnouncement } from "../../../structures/ReleaseAnnouncement";
 
 /**
  * Host the room list and the (future) room filters
@@ -28,7 +30,17 @@ export function RoomListView(): JSX.Element {
     }
     return (
         <>
-            <RoomListPrimaryFilters vm={vm} />
+            <ReleaseAnnouncement
+                feature="newRoomList_filter"
+                header={_t("room_list|release_announcement|filter|title")}
+                description={_t("room_list|release_announcement|filter|description")}
+                closeLabel={_t("room_list|release_announcement|next")}
+                placement="right"
+            >
+                <div>
+                    <RoomListPrimaryFilters vm={vm} />
+                </div>
+            </ReleaseAnnouncement>
             {listBody}
         </>
     );

src/components/views/spaces/QuickSettingsButton.tsx

@@ -29,6 +29,7 @@ import QuickThemeSwitcher from "./QuickThemeSwitcher";
 import Modal from "../../../Modal";
 import DevtoolsDialog from "../dialogs/DevtoolsDialog";
 import { SdkContextClass } from "../../../contexts/SDKContext";
+import { ReleaseAnnouncement } from "../../structures/ReleaseAnnouncement";
 
 const QuickSettingsButton: React.FC<{
     isPanelCollapsed: boolean;
@@ -137,16 +138,24 @@ const QuickSettingsButton: React.FC<{
 
     return (
         <>
-            <AccessibleButton
+            <ReleaseAnnouncement
-                className={classNames("mx_QuickSettingsButton", { expanded: !isPanelCollapsed })}
+                feature="newRoomList_settings"
-                onClick={openMenu}
+                header={_t("room_list|release_announcement|settings|title")}
-                aria-label={_t("quick_settings|title")}
+                description={_t("room_list|release_announcement|settings|description")}
-                title={isPanelCollapsed ? _t("quick_settings|title") : undefined}
+                closeLabel={_t("room_list|release_announcement|done")}
-                ref={handle}
+                placement="right"
-                aria-expanded={!isPanelCollapsed}
             >
-                {!isPanelCollapsed ? _t("common|settings") : null}
+                <AccessibleButton
-            </AccessibleButton>
+                    className={classNames("mx_QuickSettingsButton", { expanded: !isPanelCollapsed })}
+                    onClick={openMenu}
+                    aria-label={_t("quick_settings|title")}
+                    title={isPanelCollapsed ? _t("quick_settings|title") : undefined}
+                    ref={handle}
+                    aria-expanded={!isPanelCollapsed}
+                >
+                    {!isPanelCollapsed ? _t("common|settings") : null}
+                </AccessibleButton>
+            </ReleaseAnnouncement>
 
             {contextMenu}
         </>

src/i18n/strings/en_EN.json

@@ -1877,11 +1877,6 @@
                 "other": "You can only pin up to %(count)s widgets"
             },
             "menu": "Open menu",
-            "release_announcement": {
-                "close": "Ok",
-                "description": "Find all pinned messages here. Rollover any message and select “Pin” to add it.",
-                "title": "All new pinned messages"
-            },
             "reply_thread": "Reply to a <link>thread message</link>",
             "unpin_all": {
                 "button": "Unpin all messages",
@@ -2180,6 +2175,26 @@
             "one": "Currently removing messages in %(count)s room",
             "other": "Currently removing messages in %(count)s rooms"
         },
+        "release_announcement": {
+            "done": "Done",
+            "filter": {
+                "description": "Filter your chats with a single click. Expand to view more filters.",
+                "title": "New quick filters"
+            },
+            "intro": {
+                "description": "The chats list has been updated to be more clear and simple to use.",
+                "title": "Chats has a new look!"
+            },
+            "next": "Next",
+            "settings": {
+                "description": "To show or hide message previews, go to All settings > Preferences > Room list",
+                "title": "Some settings have moved"
+            },
+            "sort": {
+                "description": "Change the ordering of your chats from most recent to A-Z",
+                "title": "Sort your chats"
+            }
+        },
         "room": {
             "more_options": "More Options",
             "open_room": "Open room %(roomName)s"

src/stores/ReleaseAnnouncementStore.ts

@@ -17,7 +17,7 @@ import { Features } from "../settings/Settings";
 /**
  * The features are shown in the array order.
  */
-const FEATURES = ["pinningMessageList"] as const;
+const FEATURES = ["newRoomList_intro", "newRoomList_sort", "newRoomList_filter", "newRoomList_settings"] as const;
 /**
  * All the features that can be shown in the release announcements.
  */

test/unit-tests/components/structures/ReleaseAnnouncement-test.tsx

@@ -23,7 +23,7 @@ describe("ReleaseAnnouncement", () => {
     function renderReleaseAnnouncement() {
         return render(
             <ReleaseAnnouncement
-                feature="pinningMessageList"
+                feature="newRoomList_intro"
                 header="header"
                 description="description"
                 closeLabel="close"

test/unit-tests/components/views/right_panel/__snapshots__/RoomSummaryCardView-test.tsx.snap

@@ -10,13 +10,12 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
   >
     <div
       class="mx_BaseCard_header"
-      data-floating-ui-inert=""
     >
       <div
         class="mx_BaseCard_header_spacer"
       />
       <button
-        aria-labelledby="«rq»"
+        aria-labelledby="«re»"
         class="_icon-button_1pz9o_8"
         data-kind="secondary"
         data-testid="base-card-close-button"
@@ -48,7 +47,6 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
     >
       <header
         class="mx_RoomSummaryCard_container"
-        data-floating-ui-inert=""
       >
         <span
           class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
@@ -174,7 +172,6 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
       </header>
       <div
         class="_separator_7ckbw_8"
-        data-floating-ui-inert=""
         data-kind="primary"
         data-orientation="horizontal"
         role="separator"
@@ -186,7 +183,6 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
         <div
           aria-checked="false"
           class="_item_dyt4i_8 _interactive_dyt4i_26"
-          data-floating-ui-inert=""
           data-kind="primary"
           role="menuitemcheckbox"
         >
@@ -214,7 +210,7 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
             <input
               aria-hidden="true"
               class="_input_19o42_24"
-              id="«rv»"
+              id="«rj»"
               role="switch"
               type="checkbox"
             />
@@ -225,7 +221,6 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
         </div>
         <button
           class="_item_dyt4i_8 _interactive_dyt4i_26"
-          data-floating-ui-inert=""
           data-kind="primary"
           role="menuitem"
         >
@@ -263,14 +258,12 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
         </button>
         <div
           class="_separator_7ckbw_8"
-          data-floating-ui-inert=""
           data-kind="primary"
           data-orientation="horizontal"
           role="separator"
         />
         <button
           class="_item_dyt4i_8 _interactive_dyt4i_26"
-          data-floating-ui-inert=""
           data-kind="primary"
           role="menuitem"
         >
@@ -314,7 +307,6 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
         </button>
         <button
           class="_item_dyt4i_8 _interactive_dyt4i_26"
-          data-floating-ui-inert=""
           data-kind="primary"
           role="menuitem"
         >
@@ -353,86 +345,52 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
             />
           </svg>
         </button>
-        <div
-          aria-controls="«r12»"
-          aria-describedby="«r12»"
-          aria-expanded="true"
-          aria-haspopup="dialog"
-          data-floating-ui-inert=""
-        >
-          <button
-            class="_item_dyt4i_8 _interactive_dyt4i_26"
-            data-kind="primary"
-            role="menuitem"
-          >
-            <svg
-              aria-hidden="true"
-              class="_icon_dyt4i_50"
-              fill="currentColor"
-              height="24"
-              viewBox="0 0 24 24"
-              width="24"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                clip-rule="evenodd"
-                d="M6.119 2a.5.5 0 0 0-.35.857L7.85 4.9a.5.5 0 0 1 .15.357v4.487a.5.5 0 0 1-.15.356l-3.7 3.644A.5.5 0 0 0 4 14.1v1.4a.5.5 0 0 0 .5.5H11v6a1 1 0 1 0 2 0v-6h6.5a.5.5 0 0 0 .5-.5v-1.4a.5.5 0 0 0-.15-.356l-3.7-3.644a.5.5 0 0 1-.15-.356V5.257a.5.5 0 0 1 .15-.357l2.081-2.043a.5.5 0 0 0-.35-.857zM10 4h4v5.744a2.5 2.5 0 0 0 .746 1.781L17.26 14H6.74l2.514-2.475A2.5 2.5 0 0 0 10 9.744z"
-                fill-rule="evenodd"
-              />
-            </svg>
-            <span
-              class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
-            >
-              Pinned messages
-            </span>
-            <svg
-              aria-hidden="true"
-              class="_nav-hint_dyt4i_59"
-              fill="currentColor"
-              height="24"
-              viewBox="8 0 8 24"
-              width="8"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M8.7 17.3a.95.95 0 0 1-.275-.7q0-.425.275-.7l3.9-3.9-3.9-3.9a.95.95 0 0 1-.275-.7q0-.425.275-.7a.95.95 0 0 1 .7-.275q.425 0 .7.275l4.6 4.6q.15.15.213.325.062.175.062.375t-.062.375a.9.9 0 0 1-.213.325l-4.6 4.6a.95.95 0 0 1-.7.275.95.95 0 0 1-.7-.275"
-              />
-            </svg>
-            <span
-              class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31"
-            >
-              0
-            </span>
-          </button>
-        </div>
-        <span
-          aria-hidden="true"
-          data-floating-ui-inert=""
-          style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"
-          tabindex="-1"
-        />
-        <span
-          data-floating-ui-focus-guard=""
-          data-type="outside"
-          role="button"
-          style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"
-          tabindex="0"
-        />
-        <span
-          aria-owns="«r14»"
-          data-floating-ui-inert=""
-          style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"
-        />
-        <span
-          data-floating-ui-focus-guard=""
-          data-type="outside"
-          role="button"
-          style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"
-          tabindex="0"
-        />
         <button
           class="_item_dyt4i_8 _interactive_dyt4i_26"
-          data-floating-ui-inert=""
+          data-kind="primary"
+          role="menuitem"
+        >
+          <svg
+            aria-hidden="true"
+            class="_icon_dyt4i_50"
+            fill="currentColor"
+            height="24"
+            viewBox="0 0 24 24"
+            width="24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              clip-rule="evenodd"
+              d="M6.119 2a.5.5 0 0 0-.35.857L7.85 4.9a.5.5 0 0 1 .15.357v4.487a.5.5 0 0 1-.15.356l-3.7 3.644A.5.5 0 0 0 4 14.1v1.4a.5.5 0 0 0 .5.5H11v6a1 1 0 1 0 2 0v-6h6.5a.5.5 0 0 0 .5-.5v-1.4a.5.5 0 0 0-.15-.356l-3.7-3.644a.5.5 0 0 1-.15-.356V5.257a.5.5 0 0 1 .15-.357l2.081-2.043a.5.5 0 0 0-.35-.857zM10 4h4v5.744a2.5 2.5 0 0 0 .746 1.781L17.26 14H6.74l2.514-2.475A2.5 2.5 0 0 0 10 9.744z"
+              fill-rule="evenodd"
+            />
+          </svg>
+          <span
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
+          >
+            Pinned messages
+          </span>
+          <svg
+            aria-hidden="true"
+            class="_nav-hint_dyt4i_59"
+            fill="currentColor"
+            height="24"
+            viewBox="8 0 8 24"
+            width="8"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M8.7 17.3a.95.95 0 0 1-.275-.7q0-.425.275-.7l3.9-3.9-3.9-3.9a.95.95 0 0 1-.275-.7q0-.425.275-.7a.95.95 0 0 1 .7-.275q.425 0 .7.275l4.6 4.6q.15.15.213.325.062.175.062.375t-.062.375a.9.9 0 0 1-.213.325l-4.6 4.6a.95.95 0 0 1-.7.275.95.95 0 0 1-.7-.275"
+            />
+          </svg>
+          <span
+            class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31"
+          >
+            0
+          </span>
+        </button>
+        <button
+          class="_item_dyt4i_8 _interactive_dyt4i_26"
           data-kind="primary"
           role="menuitem"
         >
@@ -470,7 +428,6 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
         </button>
         <button
           class="_item_dyt4i_8 _interactive_dyt4i_26"
-          data-floating-ui-inert=""
           data-kind="primary"
           role="menuitem"
         >
@@ -508,14 +465,12 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
         </button>
         <div
           class="_separator_7ckbw_8"
-          data-floating-ui-inert=""
           data-kind="primary"
           data-orientation="horizontal"
           role="separator"
         />
         <button
           class="_item_dyt4i_8 _interactive_dyt4i_26"
-          data-floating-ui-inert=""
           data-kind="primary"
           role="menuitem"
         >
@@ -553,7 +508,6 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
         </button>
         <button
           class="_item_dyt4i_8 _interactive_dyt4i_26"
-          data-floating-ui-inert=""
           data-kind="primary"
           role="menuitem"
         >
@@ -591,7 +545,6 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
         </button>
         <button
           class="_item_dyt4i_8 _interactive_dyt4i_26"
-          data-floating-ui-inert=""
           data-kind="primary"
           role="menuitem"
         >
@@ -629,7 +582,6 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
         </button>
         <button
           class="_item_dyt4i_8 _interactive_dyt4i_26"
-          data-floating-ui-inert=""
           data-kind="primary"
           role="menuitem"
         >
@@ -670,14 +622,12 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
         </button>
         <div
           class="_separator_7ckbw_8"
-          data-floating-ui-inert=""
           data-kind="primary"
           data-orientation="horizontal"
           role="separator"
         />
         <div
           class="mx_RoomSummaryCard_bottomOptions"
-          data-floating-ui-inert=""
         >
           <button
             class="_item_dyt4i_8 _interactive_dyt4i_26"
@@ -773,7 +723,6 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
   >
     <div
       class="mx_BaseCard_header"
-      data-floating-ui-inert=""
     >
       <div
         class="mx_BaseCard_header_spacer"
@@ -811,7 +760,6 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
     >
       <header
         class="mx_RoomSummaryCard_container"
-        data-floating-ui-inert=""
       >
         <span
           class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
@@ -899,7 +847,6 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
       </header>
       <div
         class="_separator_7ckbw_8"
-        data-floating-ui-inert=""
         data-kind="primary"
         data-orientation="horizontal"
         role="separator"
@@ -911,7 +858,6 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
         <div
           aria-checked="false"
           class="_item_dyt4i_8 _interactive_dyt4i_26"
-          data-floating-ui-inert=""
           data-kind="primary"
           role="menuitemcheckbox"
         >
@@ -950,7 +896,6 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
         </div>
         <button
           class="_item_dyt4i_8 _interactive_dyt4i_26"
-          data-floating-ui-inert=""
           data-kind="primary"
           role="menuitem"
         >
@@ -988,14 +933,12 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
         </button>
         <div
           class="_separator_7ckbw_8"
-          data-floating-ui-inert=""
           data-kind="primary"
           data-orientation="horizontal"
           role="separator"
         />
         <button
           class="_item_dyt4i_8 _interactive_dyt4i_26"
-          data-floating-ui-inert=""
           data-kind="primary"
           role="menuitem"
         >
@@ -1039,7 +982,6 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
         </button>
         <button
           class="_item_dyt4i_8 _interactive_dyt4i_26"
-          data-floating-ui-inert=""
           data-kind="primary"
           role="menuitem"
         >
@@ -1078,86 +1020,52 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
             />
           </svg>
         </button>
-        <div
-          aria-controls="«r8»"
-          aria-describedby="«r8»"
-          aria-expanded="true"
-          aria-haspopup="dialog"
-          data-floating-ui-inert=""
-        >
-          <button
-            class="_item_dyt4i_8 _interactive_dyt4i_26"
-            data-kind="primary"
-            role="menuitem"
-          >
-            <svg
-              aria-hidden="true"
-              class="_icon_dyt4i_50"
-              fill="currentColor"
-              height="24"
-              viewBox="0 0 24 24"
-              width="24"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                clip-rule="evenodd"
-                d="M6.119 2a.5.5 0 0 0-.35.857L7.85 4.9a.5.5 0 0 1 .15.357v4.487a.5.5 0 0 1-.15.356l-3.7 3.644A.5.5 0 0 0 4 14.1v1.4a.5.5 0 0 0 .5.5H11v6a1 1 0 1 0 2 0v-6h6.5a.5.5 0 0 0 .5-.5v-1.4a.5.5 0 0 0-.15-.356l-3.7-3.644a.5.5 0 0 1-.15-.356V5.257a.5.5 0 0 1 .15-.357l2.081-2.043a.5.5 0 0 0-.35-.857zM10 4h4v5.744a2.5 2.5 0 0 0 .746 1.781L17.26 14H6.74l2.514-2.475A2.5 2.5 0 0 0 10 9.744z"
-                fill-rule="evenodd"
-              />
-            </svg>
-            <span
-              class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
-            >
-              Pinned messages
-            </span>
-            <svg
-              aria-hidden="true"
-              class="_nav-hint_dyt4i_59"
-              fill="currentColor"
-              height="24"
-              viewBox="8 0 8 24"
-              width="8"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M8.7 17.3a.95.95 0 0 1-.275-.7q0-.425.275-.7l3.9-3.9-3.9-3.9a.95.95 0 0 1-.275-.7q0-.425.275-.7a.95.95 0 0 1 .7-.275q.425 0 .7.275l4.6 4.6q.15.15.213.325.062.175.062.375t-.062.375a.9.9 0 0 1-.213.325l-4.6 4.6a.95.95 0 0 1-.7.275.95.95 0 0 1-.7-.275"
-              />
-            </svg>
-            <span
-              class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31"
-            >
-              0
-            </span>
-          </button>
-        </div>
-        <span
-          aria-hidden="true"
-          data-floating-ui-inert=""
-          style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"
-          tabindex="-1"
-        />
-        <span
-          data-floating-ui-focus-guard=""
-          data-type="outside"
-          role="button"
-          style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"
-          tabindex="0"
-        />
-        <span
-          aria-owns="«ra»"
-          data-floating-ui-inert=""
-          style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"
-        />
-        <span
-          data-floating-ui-focus-guard=""
-          data-type="outside"
-          role="button"
-          style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"
-          tabindex="0"
-        />
         <button
           class="_item_dyt4i_8 _interactive_dyt4i_26"
-          data-floating-ui-inert=""
+          data-kind="primary"
+          role="menuitem"
+        >
+          <svg
+            aria-hidden="true"
+            class="_icon_dyt4i_50"
+            fill="currentColor"
+            height="24"
+            viewBox="0 0 24 24"
+            width="24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              clip-rule="evenodd"
+              d="M6.119 2a.5.5 0 0 0-.35.857L7.85 4.9a.5.5 0 0 1 .15.357v4.487a.5.5 0 0 1-.15.356l-3.7 3.644A.5.5 0 0 0 4 14.1v1.4a.5.5 0 0 0 .5.5H11v6a1 1 0 1 0 2 0v-6h6.5a.5.5 0 0 0 .5-.5v-1.4a.5.5 0 0 0-.15-.356l-3.7-3.644a.5.5 0 0 1-.15-.356V5.257a.5.5 0 0 1 .15-.357l2.081-2.043a.5.5 0 0 0-.35-.857zM10 4h4v5.744a2.5 2.5 0 0 0 .746 1.781L17.26 14H6.74l2.514-2.475A2.5 2.5 0 0 0 10 9.744z"
+              fill-rule="evenodd"
+            />
+          </svg>
+          <span
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
+          >
+            Pinned messages
+          </span>
+          <svg
+            aria-hidden="true"
+            class="_nav-hint_dyt4i_59"
+            fill="currentColor"
+            height="24"
+            viewBox="8 0 8 24"
+            width="8"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M8.7 17.3a.95.95 0 0 1-.275-.7q0-.425.275-.7l3.9-3.9-3.9-3.9a.95.95 0 0 1-.275-.7q0-.425.275-.7a.95.95 0 0 1 .7-.275q.425 0 .7.275l4.6 4.6q.15.15.213.325.062.175.062.375t-.062.375a.9.9 0 0 1-.213.325l-4.6 4.6a.95.95 0 0 1-.7.275.95.95 0 0 1-.7-.275"
+            />
+          </svg>
+          <span
+            class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31"
+          >
+            0
+          </span>
+        </button>
+        <button
+          class="_item_dyt4i_8 _interactive_dyt4i_26"
           data-kind="primary"
           role="menuitem"
         >
@@ -1195,7 +1103,6 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
         </button>
         <button
           class="_item_dyt4i_8 _interactive_dyt4i_26"
-          data-floating-ui-inert=""
           data-kind="primary"
           role="menuitem"
         >
@@ -1233,14 +1140,12 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
         </button>
         <div
           class="_separator_7ckbw_8"
-          data-floating-ui-inert=""
           data-kind="primary"
           data-orientation="horizontal"
           role="separator"
         />
         <button
           class="_item_dyt4i_8 _interactive_dyt4i_26"
-          data-floating-ui-inert=""
           data-kind="primary"
           role="menuitem"
         >
@@ -1278,7 +1183,6 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
         </button>
         <button
           class="_item_dyt4i_8 _interactive_dyt4i_26"
-          data-floating-ui-inert=""
           data-kind="primary"
           role="menuitem"
         >
@@ -1316,7 +1220,6 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
         </button>
         <button
           class="_item_dyt4i_8 _interactive_dyt4i_26"
-          data-floating-ui-inert=""
           data-kind="primary"
           role="menuitem"
         >
@@ -1354,7 +1257,6 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
         </button>
         <button
           class="_item_dyt4i_8 _interactive_dyt4i_26"
-          data-floating-ui-inert=""
           data-kind="primary"
           role="menuitem"
         >
@@ -1395,14 +1297,12 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
         </button>
         <div
           class="_separator_7ckbw_8"
-          data-floating-ui-inert=""
           data-kind="primary"
           data-orientation="horizontal"
           role="separator"
         />
         <div
           class="mx_RoomSummaryCard_bottomOptions"
-          data-floating-ui-inert=""
         >
           <button
             class="_item_dyt4i_8 _interactive_dyt4i_26"
@@ -1498,13 +1398,12 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
   >
     <div
       class="mx_BaseCard_header"
-      data-floating-ui-inert=""
     >
       <div
         class="mx_BaseCard_header_spacer"
       />
       <button
-        aria-labelledby="«rd»"
+        aria-labelledby="«r7»"
         class="_icon-button_1pz9o_8"
         data-kind="secondary"
         data-testid="base-card-close-button"
@@ -1536,7 +1435,6 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
     >
       <header
         class="mx_RoomSummaryCard_container"
-        data-floating-ui-inert=""
       >
         <span
           class="_avatar_1qbcf_8 mx_BaseAvatar _avatar-imageless_1qbcf_52"
@@ -1662,7 +1560,6 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
       </header>
       <div
         class="_separator_7ckbw_8"
-        data-floating-ui-inert=""
         data-kind="primary"
         data-orientation="horizontal"
         role="separator"
@@ -1674,7 +1571,6 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
         <div
           aria-checked="false"
           class="_item_dyt4i_8 _interactive_dyt4i_26"
-          data-floating-ui-inert=""
           data-kind="primary"
           role="menuitemcheckbox"
         >
@@ -1702,7 +1598,7 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
             <input
               aria-hidden="true"
               class="_input_19o42_24"
-              id="«ri»"
+              id="«rc»"
               role="switch"
               type="checkbox"
             />
@@ -1713,7 +1609,6 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
         </div>
         <button
           class="_item_dyt4i_8 _interactive_dyt4i_26"
-          data-floating-ui-inert=""
           data-kind="primary"
           role="menuitem"
         >
@@ -1751,14 +1646,12 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
         </button>
         <div
           class="_separator_7ckbw_8"
-          data-floating-ui-inert=""
           data-kind="primary"
           data-orientation="horizontal"
           role="separator"
         />
         <button
           class="_item_dyt4i_8 _interactive_dyt4i_26"
-          data-floating-ui-inert=""
           data-kind="primary"
           role="menuitem"
         >
@@ -1802,7 +1695,6 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
         </button>
         <button
           class="_item_dyt4i_8 _interactive_dyt4i_26"
-          data-floating-ui-inert=""
           data-kind="primary"
           role="menuitem"
         >
@@ -1841,86 +1733,52 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
             />
           </svg>
         </button>
-        <div
-          aria-controls="«rl»"
-          aria-describedby="«rl»"
-          aria-expanded="true"
-          aria-haspopup="dialog"
-          data-floating-ui-inert=""
-        >
-          <button
-            class="_item_dyt4i_8 _interactive_dyt4i_26"
-            data-kind="primary"
-            role="menuitem"
-          >
-            <svg
-              aria-hidden="true"
-              class="_icon_dyt4i_50"
-              fill="currentColor"
-              height="24"
-              viewBox="0 0 24 24"
-              width="24"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                clip-rule="evenodd"
-                d="M6.119 2a.5.5 0 0 0-.35.857L7.85 4.9a.5.5 0 0 1 .15.357v4.487a.5.5 0 0 1-.15.356l-3.7 3.644A.5.5 0 0 0 4 14.1v1.4a.5.5 0 0 0 .5.5H11v6a1 1 0 1 0 2 0v-6h6.5a.5.5 0 0 0 .5-.5v-1.4a.5.5 0 0 0-.15-.356l-3.7-3.644a.5.5 0 0 1-.15-.356V5.257a.5.5 0 0 1 .15-.357l2.081-2.043a.5.5 0 0 0-.35-.857zM10 4h4v5.744a2.5 2.5 0 0 0 .746 1.781L17.26 14H6.74l2.514-2.475A2.5 2.5 0 0 0 10 9.744z"
-                fill-rule="evenodd"
-              />
-            </svg>
-            <span
-              class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
-            >
-              Pinned messages
-            </span>
-            <svg
-              aria-hidden="true"
-              class="_nav-hint_dyt4i_59"
-              fill="currentColor"
-              height="24"
-              viewBox="8 0 8 24"
-              width="8"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M8.7 17.3a.95.95 0 0 1-.275-.7q0-.425.275-.7l3.9-3.9-3.9-3.9a.95.95 0 0 1-.275-.7q0-.425.275-.7a.95.95 0 0 1 .7-.275q.425 0 .7.275l4.6 4.6q.15.15.213.325.062.175.062.375t-.062.375a.9.9 0 0 1-.213.325l-4.6 4.6a.95.95 0 0 1-.7.275.95.95 0 0 1-.7-.275"
-              />
-            </svg>
-            <span
-              class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31"
-            >
-              0
-            </span>
-          </button>
-        </div>
-        <span
-          aria-hidden="true"
-          data-floating-ui-inert=""
-          style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"
-          tabindex="-1"
-        />
-        <span
-          data-floating-ui-focus-guard=""
-          data-type="outside"
-          role="button"
-          style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"
-          tabindex="0"
-        />
-        <span
-          aria-owns="«rn»"
-          data-floating-ui-inert=""
-          style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"
-        />
-        <span
-          data-floating-ui-focus-guard=""
-          data-type="outside"
-          role="button"
-          style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"
-          tabindex="0"
-        />
         <button
           class="_item_dyt4i_8 _interactive_dyt4i_26"
-          data-floating-ui-inert=""
+          data-kind="primary"
+          role="menuitem"
+        >
+          <svg
+            aria-hidden="true"
+            class="_icon_dyt4i_50"
+            fill="currentColor"
+            height="24"
+            viewBox="0 0 24 24"
+            width="24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              clip-rule="evenodd"
+              d="M6.119 2a.5.5 0 0 0-.35.857L7.85 4.9a.5.5 0 0 1 .15.357v4.487a.5.5 0 0 1-.15.356l-3.7 3.644A.5.5 0 0 0 4 14.1v1.4a.5.5 0 0 0 .5.5H11v6a1 1 0 1 0 2 0v-6h6.5a.5.5 0 0 0 .5-.5v-1.4a.5.5 0 0 0-.15-.356l-3.7-3.644a.5.5 0 0 1-.15-.356V5.257a.5.5 0 0 1 .15-.357l2.081-2.043a.5.5 0 0 0-.35-.857zM10 4h4v5.744a2.5 2.5 0 0 0 .746 1.781L17.26 14H6.74l2.514-2.475A2.5 2.5 0 0 0 10 9.744z"
+              fill-rule="evenodd"
+            />
+          </svg>
+          <span
+            class="_typography_6v6n8_153 _font-body-md-medium_6v6n8_60 _label_dyt4i_34"
+          >
+            Pinned messages
+          </span>
+          <svg
+            aria-hidden="true"
+            class="_nav-hint_dyt4i_59"
+            fill="currentColor"
+            height="24"
+            viewBox="8 0 8 24"
+            width="8"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M8.7 17.3a.95.95 0 0 1-.275-.7q0-.425.275-.7l3.9-3.9-3.9-3.9a.95.95 0 0 1-.275-.7q0-.425.275-.7a.95.95 0 0 1 .7-.275q.425 0 .7.275l4.6 4.6q.15.15.213.325.062.175.062.375t-.062.375a.9.9 0 0 1-.213.325l-4.6 4.6a.95.95 0 0 1-.7.275.95.95 0 0 1-.7-.275"
+            />
+          </svg>
+          <span
+            class="_typography_6v6n8_153 _font-body-sm-regular_6v6n8_31"
+          >
+            0
+          </span>
+        </button>
+        <button
+          class="_item_dyt4i_8 _interactive_dyt4i_26"
           data-kind="primary"
           role="menuitem"
         >
@@ -1958,7 +1816,6 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
         </button>
         <button
           class="_item_dyt4i_8 _interactive_dyt4i_26"
-          data-floating-ui-inert=""
           data-kind="primary"
           role="menuitem"
         >
@@ -1996,14 +1853,12 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
         </button>
         <div
           class="_separator_7ckbw_8"
-          data-floating-ui-inert=""
           data-kind="primary"
           data-orientation="horizontal"
           role="separator"
         />
         <button
           class="_item_dyt4i_8 _interactive_dyt4i_26"
-          data-floating-ui-inert=""
           data-kind="primary"
           role="menuitem"
         >
@@ -2041,7 +1896,6 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
         </button>
         <button
           class="_item_dyt4i_8 _interactive_dyt4i_26"
-          data-floating-ui-inert=""
           data-kind="primary"
           role="menuitem"
         >
@@ -2079,7 +1933,6 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
         </button>
         <button
           class="_item_dyt4i_8 _interactive_dyt4i_26"
-          data-floating-ui-inert=""
           data-kind="primary"
           role="menuitem"
         >
@@ -2117,7 +1970,6 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
         </button>
         <button
           class="_item_dyt4i_8 _interactive_dyt4i_26"
-          data-floating-ui-inert=""
           data-kind="primary"
           role="menuitem"
         >
@@ -2158,14 +2010,12 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
         </button>
         <div
           class="_separator_7ckbw_8"
-          data-floating-ui-inert=""
           data-kind="primary"
           data-orientation="horizontal"
           role="separator"
         />
         <div
           class="mx_RoomSummaryCard_bottomOptions"
-          data-floating-ui-inert=""
         >
           <button
             class="_item_dyt4i_8 _interactive_dyt4i_26"

test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListHeaderView-test.tsx.snap

@@ -10,6 +10,7 @@ exports[`<RoomListHeaderView /> compose menu should display the compose menu 1`]
   >
     <div
       class="flex mx_RoomListHeaderView_title"
+      data-floating-ui-inert=""
       style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
     >
       <h1
@@ -25,7 +26,7 @@ exports[`<RoomListHeaderView /> compose menu should display the compose menu 1`]
         class="_icon-button_1pz9o_8 mx_SpaceMenu_button"
         data-kind="primary"
         data-state="closed"
-        id="radix-«rc»"
+        id="radix-«rm»"
         role="button"
         style="--cpd-icon-button-size: 20px;"
         tabindex="0"
@@ -54,76 +55,117 @@ exports[`<RoomListHeaderView /> compose menu should display the compose menu 1`]
       class="flex"
       style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
     >
-      <button
+      <div
-        aria-disabled="false"
         aria-expanded="false"
-        aria-haspopup="menu"
+        aria-haspopup="dialog"
-        aria-label="Room Options"
+        class="mx_RoomListHeaderView_ReleaseAnnouncementAnchor"
-        aria-labelledby="«rg»"
+        data-floating-ui-inert=""
-        class="_icon-button_1pz9o_8"
-        data-kind="primary"
-        data-state="closed"
-        id="radix-«re»"
-        role="button"
-        style="--cpd-icon-button-size: 32px;"
-        tabindex="0"
-        type="button"
       >
-        <div
+        <button
-          class="_indicator-icon_zr2a0_17"
+          aria-disabled="false"
-          style="--cpd-icon-button-size: 100%;"
+          aria-expanded="false"
+          aria-haspopup="menu"
+          aria-label="Room Options"
+          aria-labelledby="«ru»"
+          class="_icon-button_1pz9o_8"
+          data-kind="primary"
+          data-state="closed"
+          id="radix-«rs»"
+          role="button"
+          style="--cpd-icon-button-size: 32px;"
+          tabindex="0"
+          type="button"
         >
-          <svg
+          <div
-            color="var(--cpd-color-icon-secondary)"
+            class="_indicator-icon_zr2a0_17"
-            fill="currentColor"
+            style="--cpd-icon-button-size: 100%;"
-            height="1em"
-            viewBox="0 0 24 24"
-            width="1em"
-            xmlns="http://www.w3.org/2000/svg"
           >
-            <path
+            <svg
-              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+              color="var(--cpd-color-icon-secondary)"
-            />
+              fill="currentColor"
-          </svg>
+              height="1em"
-        </div>
+              viewBox="0 0 24 24"
-      </button>
+              width="1em"
-      <button
+              xmlns="http://www.w3.org/2000/svg"
-        aria-disabled="false"
+            >
-        aria-expanded="false"
+              <path
-        aria-haspopup="menu"
+                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-        aria-label="Add"
+              />
-        class="_icon-button_1pz9o_8"
+            </svg>
-        data-kind="primary"
+          </div>
-        data-state="closed"
+        </button>
-        id="radix-«rl»"
+      </div>
-        role="button"
+      <div
-        style="--cpd-icon-button-size: 32px;"
+        aria-controls="«r15»"
-        tabindex="0"
+        aria-describedby="«r15»"
-        type="button"
+        aria-expanded="true"
+        aria-haspopup="dialog"
+        class="mx_RoomListHeaderView_ReleaseAnnouncementAnchor"
+        data-floating-ui-inert=""
       >
-        <div
+        <button
-          class="_indicator-icon_zr2a0_17"
+          aria-disabled="false"
-          style="--cpd-icon-button-size: 100%;"
+          aria-expanded="false"
+          aria-haspopup="menu"
+          aria-label="Add"
+          class="_icon-button_1pz9o_8"
+          data-kind="primary"
+          data-state="closed"
+          id="radix-«r17»"
+          role="button"
+          style="--cpd-icon-button-size: 32px;"
+          tabindex="0"
+          type="button"
         >
-          <svg
+          <div
-            color="var(--cpd-color-icon-secondary)"
+            class="_indicator-icon_zr2a0_17"
-            fill="currentColor"
+            style="--cpd-icon-button-size: 100%;"
-            height="1em"
-            viewBox="0 0 24 24"
-            width="1em"
-            xmlns="http://www.w3.org/2000/svg"
           >
-            <path
+            <svg
-              clip-rule="evenodd"
+              color="var(--cpd-color-icon-secondary)"
-              d="M16.937 2.82a2 2 0 0 1 2.828 0l1.415 1.414a2 2 0 0 1 0 2.829l-7.071 7.07c-.195.196-.42.342-.66.44a1 1 0 0 1-.168.072l-3.993 1.331a1 1 0 0 1-1.265-1.265l1.331-3.992q.03-.09.073-.168m10.338-4.903-6.717 6.718-1.414-1.414 6.717-6.718z"
+              fill="currentColor"
-              fill-rule="evenodd"
+              height="1em"
-            />
+              viewBox="0 0 24 24"
-            <path
+              width="1em"
-              d="M3 5a2 2 0 0 1 2-2h6a1 1 0 1 1 0 2H5v14h14v-6a1 1 0 1 1 2 0v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"
+              xmlns="http://www.w3.org/2000/svg"
-            />
+            >
-          </svg>
+              <path
-        </div>
+                clip-rule="evenodd"
-      </button>
+                d="M16.937 2.82a2 2 0 0 1 2.828 0l1.415 1.414a2 2 0 0 1 0 2.829l-7.071 7.07c-.195.196-.42.342-.66.44a1 1 0 0 1-.168.072l-3.993 1.331a1 1 0 0 1-1.265-1.265l1.331-3.992q.03-.09.073-.168m10.338-4.903-6.717 6.718-1.414-1.414 6.717-6.718z"
+                fill-rule="evenodd"
+              />
+              <path
+                d="M3 5a2 2 0 0 1 2-2h6a1 1 0 1 1 0 2H5v14h14v-6a1 1 0 1 1 2 0v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"
+              />
+            </svg>
+          </div>
+        </button>
+      </div>
+      <span
+        aria-hidden="true"
+        data-floating-ui-inert=""
+        style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"
+        tabindex="-1"
+      />
+      <span
+        data-floating-ui-focus-guard=""
+        data-type="outside"
+        role="button"
+        style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"
+        tabindex="0"
+      />
+      <span
+        aria-owns="«r19»"
+        data-floating-ui-inert=""
+        style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"
+      />
+      <span
+        data-floating-ui-focus-guard=""
+        data-type="outside"
+        role="button"
+        style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"
+        tabindex="0"
+      />
     </div>
   </header>
 </DocumentFragment>
@@ -139,6 +181,7 @@ exports[`<RoomListHeaderView /> compose menu should not display the compose menu
   >
     <div
       class="flex mx_RoomListHeaderView_title"
+      data-floating-ui-inert=""
       style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
     >
       <h1
@@ -154,7 +197,7 @@ exports[`<RoomListHeaderView /> compose menu should not display the compose menu
         class="_icon-button_1pz9o_8 mx_SpaceMenu_button"
         data-kind="primary"
         data-state="closed"
-        id="radix-«ro»"
+        id="radix-«r1c»"
         role="button"
         style="--cpd-icon-button-size: 20px;"
         tabindex="0"
@@ -183,70 +226,111 @@ exports[`<RoomListHeaderView /> compose menu should not display the compose menu
       class="flex"
       style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
     >
-      <button
+      <div
-        aria-disabled="false"
         aria-expanded="false"
-        aria-haspopup="menu"
+        aria-haspopup="dialog"
-        aria-label="Room Options"
+        class="mx_RoomListHeaderView_ReleaseAnnouncementAnchor"
-        aria-labelledby="«rs»"
+        data-floating-ui-inert=""
-        class="_icon-button_1pz9o_8"
-        data-kind="primary"
-        data-state="closed"
-        id="radix-«rq»"
-        role="button"
-        style="--cpd-icon-button-size: 32px;"
-        tabindex="0"
-        type="button"
       >
-        <div
+        <button
-          class="_indicator-icon_zr2a0_17"
+          aria-disabled="false"
-          style="--cpd-icon-button-size: 100%;"
+          aria-expanded="false"
+          aria-haspopup="menu"
+          aria-label="Room Options"
+          aria-labelledby="«r1k»"
+          class="_icon-button_1pz9o_8"
+          data-kind="primary"
+          data-state="closed"
+          id="radix-«r1i»"
+          role="button"
+          style="--cpd-icon-button-size: 32px;"
+          tabindex="0"
+          type="button"
         >
-          <svg
+          <div
-            color="var(--cpd-color-icon-secondary)"
+            class="_indicator-icon_zr2a0_17"
-            fill="currentColor"
+            style="--cpd-icon-button-size: 100%;"
-            height="1em"
-            viewBox="0 0 24 24"
-            width="1em"
-            xmlns="http://www.w3.org/2000/svg"
           >
-            <path
+            <svg
-              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+              color="var(--cpd-color-icon-secondary)"
-            />
+              fill="currentColor"
-          </svg>
+              height="1em"
-        </div>
+              viewBox="0 0 24 24"
-      </button>
+              width="1em"
-      <button
+              xmlns="http://www.w3.org/2000/svg"
-        aria-label="Start chat"
+            >
-        class="_icon-button_1pz9o_8"
+              <path
-        data-kind="primary"
+                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-        role="button"
+              />
-        style="--cpd-icon-button-size: 32px;"
+            </svg>
-        tabindex="0"
+          </div>
+        </button>
+      </div>
+      <div
+        aria-controls="«r1r»"
+        aria-describedby="«r1r»"
+        aria-expanded="true"
+        aria-haspopup="dialog"
+        class="mx_RoomListHeaderView_ReleaseAnnouncementAnchor"
+        data-floating-ui-inert=""
       >
-        <div
+        <button
-          class="_indicator-icon_zr2a0_17"
+          aria-label="Start chat"
-          style="--cpd-icon-button-size: 100%;"
+          class="_icon-button_1pz9o_8"
+          data-kind="primary"
+          role="button"
+          style="--cpd-icon-button-size: 32px;"
+          tabindex="0"
         >
-          <svg
+          <div
-            color="var(--cpd-color-icon-secondary)"
+            class="_indicator-icon_zr2a0_17"
-            fill="currentColor"
+            style="--cpd-icon-button-size: 100%;"
-            height="1em"
-            viewBox="0 0 24 24"
-            width="1em"
-            xmlns="http://www.w3.org/2000/svg"
           >
-            <path
+            <svg
-              clip-rule="evenodd"
+              color="var(--cpd-color-icon-secondary)"
-              d="M16.937 2.82a2 2 0 0 1 2.828 0l1.415 1.414a2 2 0 0 1 0 2.829l-7.071 7.07c-.195.196-.42.342-.66.44a1 1 0 0 1-.168.072l-3.993 1.331a1 1 0 0 1-1.265-1.265l1.331-3.992q.03-.09.073-.168m10.338-4.903-6.717 6.718-1.414-1.414 6.717-6.718z"
+              fill="currentColor"
-              fill-rule="evenodd"
+              height="1em"
-            />
+              viewBox="0 0 24 24"
-            <path
+              width="1em"
-              d="M3 5a2 2 0 0 1 2-2h6a1 1 0 1 1 0 2H5v14h14v-6a1 1 0 1 1 2 0v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"
+              xmlns="http://www.w3.org/2000/svg"
-            />
+            >
-          </svg>
+              <path
-        </div>
+                clip-rule="evenodd"
-      </button>
+                d="M16.937 2.82a2 2 0 0 1 2.828 0l1.415 1.414a2 2 0 0 1 0 2.829l-7.071 7.07c-.195.196-.42.342-.66.44a1 1 0 0 1-.168.072l-3.993 1.331a1 1 0 0 1-1.265-1.265l1.331-3.992q.03-.09.073-.168m10.338-4.903-6.717 6.718-1.414-1.414 6.717-6.718z"
+                fill-rule="evenodd"
+              />
+              <path
+                d="M3 5a2 2 0 0 1 2-2h6a1 1 0 1 1 0 2H5v14h14v-6a1 1 0 1 1 2 0v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"
+              />
+            </svg>
+          </div>
+        </button>
+      </div>
+      <span
+        aria-hidden="true"
+        data-floating-ui-inert=""
+        style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"
+        tabindex="-1"
+      />
+      <span
+        data-floating-ui-focus-guard=""
+        data-type="outside"
+        role="button"
+        style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"
+        tabindex="0"
+      />
+      <span
+        aria-owns="«r1t»"
+        data-floating-ui-inert=""
+        style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"
+      />
+      <span
+        data-floating-ui-focus-guard=""
+        data-type="outside"
+        role="button"
+        style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"
+        tabindex="0"
+      />
     </div>
   </header>
 </DocumentFragment>
@@ -262,6 +346,7 @@ exports[`<RoomListHeaderView /> should render 'room options' button 1`] = `
   >
     <div
       class="flex mx_RoomListHeaderView_title"
+      data-floating-ui-inert=""
       style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
     >
       <h1
@@ -306,76 +391,117 @@ exports[`<RoomListHeaderView /> should render 'room options' button 1`] = `
       class="flex"
       style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
     >
-      <button
+      <div
-        aria-disabled="false"
         aria-expanded="false"
-        aria-haspopup="menu"
+        aria-haspopup="dialog"
-        aria-label="Room Options"
+        class="mx_RoomListHeaderView_ReleaseAnnouncementAnchor"
-        aria-labelledby="«r4»"
+        data-floating-ui-inert=""
-        class="_icon-button_1pz9o_8"
-        data-kind="primary"
-        data-state="closed"
-        id="radix-«r2»"
-        role="button"
-        style="--cpd-icon-button-size: 32px;"
-        tabindex="0"
-        type="button"
       >
-        <div
+        <button
-          class="_indicator-icon_zr2a0_17"
+          aria-disabled="false"
-          style="--cpd-icon-button-size: 100%;"
+          aria-expanded="false"
+          aria-haspopup="menu"
+          aria-label="Room Options"
+          aria-labelledby="«r8»"
+          class="_icon-button_1pz9o_8"
+          data-kind="primary"
+          data-state="closed"
+          id="radix-«r6»"
+          role="button"
+          style="--cpd-icon-button-size: 32px;"
+          tabindex="0"
+          type="button"
         >
-          <svg
+          <div
-            color="var(--cpd-color-icon-secondary)"
+            class="_indicator-icon_zr2a0_17"
-            fill="currentColor"
+            style="--cpd-icon-button-size: 100%;"
-            height="1em"
-            viewBox="0 0 24 24"
-            width="1em"
-            xmlns="http://www.w3.org/2000/svg"
           >
-            <path
+            <svg
-              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+              color="var(--cpd-color-icon-secondary)"
-            />
+              fill="currentColor"
-          </svg>
+              height="1em"
-        </div>
+              viewBox="0 0 24 24"
-      </button>
+              width="1em"
-      <button
+              xmlns="http://www.w3.org/2000/svg"
-        aria-disabled="false"
+            >
-        aria-expanded="false"
+              <path
-        aria-haspopup="menu"
+                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-        aria-label="Add"
+              />
-        class="_icon-button_1pz9o_8"
+            </svg>
-        data-kind="primary"
+          </div>
-        data-state="closed"
+        </button>
-        id="radix-«r9»"
+      </div>
-        role="button"
+      <div
-        style="--cpd-icon-button-size: 32px;"
+        aria-controls="«rf»"
-        tabindex="0"
+        aria-describedby="«rf»"
-        type="button"
+        aria-expanded="true"
+        aria-haspopup="dialog"
+        class="mx_RoomListHeaderView_ReleaseAnnouncementAnchor"
+        data-floating-ui-inert=""
       >
-        <div
+        <button
-          class="_indicator-icon_zr2a0_17"
+          aria-disabled="false"
-          style="--cpd-icon-button-size: 100%;"
+          aria-expanded="false"
+          aria-haspopup="menu"
+          aria-label="Add"
+          class="_icon-button_1pz9o_8"
+          data-kind="primary"
+          data-state="closed"
+          id="radix-«rh»"
+          role="button"
+          style="--cpd-icon-button-size: 32px;"
+          tabindex="0"
+          type="button"
         >
-          <svg
+          <div
-            color="var(--cpd-color-icon-secondary)"
+            class="_indicator-icon_zr2a0_17"
-            fill="currentColor"
+            style="--cpd-icon-button-size: 100%;"
-            height="1em"
-            viewBox="0 0 24 24"
-            width="1em"
-            xmlns="http://www.w3.org/2000/svg"
           >
-            <path
+            <svg
-              clip-rule="evenodd"
+              color="var(--cpd-color-icon-secondary)"
-              d="M16.937 2.82a2 2 0 0 1 2.828 0l1.415 1.414a2 2 0 0 1 0 2.829l-7.071 7.07c-.195.196-.42.342-.66.44a1 1 0 0 1-.168.072l-3.993 1.331a1 1 0 0 1-1.265-1.265l1.331-3.992q.03-.09.073-.168m10.338-4.903-6.717 6.718-1.414-1.414 6.717-6.718z"
+              fill="currentColor"
-              fill-rule="evenodd"
+              height="1em"
-            />
+              viewBox="0 0 24 24"
-            <path
+              width="1em"
-              d="M3 5a2 2 0 0 1 2-2h6a1 1 0 1 1 0 2H5v14h14v-6a1 1 0 1 1 2 0v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"
+              xmlns="http://www.w3.org/2000/svg"
-            />
+            >
-          </svg>
+              <path
-        </div>
+                clip-rule="evenodd"
-      </button>
+                d="M16.937 2.82a2 2 0 0 1 2.828 0l1.415 1.414a2 2 0 0 1 0 2.829l-7.071 7.07c-.195.196-.42.342-.66.44a1 1 0 0 1-.168.072l-3.993 1.331a1 1 0 0 1-1.265-1.265l1.331-3.992q.03-.09.073-.168m10.338-4.903-6.717 6.718-1.414-1.414 6.717-6.718z"
+                fill-rule="evenodd"
+              />
+              <path
+                d="M3 5a2 2 0 0 1 2-2h6a1 1 0 1 1 0 2H5v14h14v-6a1 1 0 1 1 2 0v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"
+              />
+            </svg>
+          </div>
+        </button>
+      </div>
+      <span
+        aria-hidden="true"
+        data-floating-ui-inert=""
+        style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"
+        tabindex="-1"
+      />
+      <span
+        data-floating-ui-focus-guard=""
+        data-type="outside"
+        role="button"
+        style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"
+        tabindex="0"
+      />
+      <span
+        aria-owns="«rj»"
+        data-floating-ui-inert=""
+        style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"
+      />
+      <span
+        data-floating-ui-focus-guard=""
+        data-type="outside"
+        role="button"
+        style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"
+        tabindex="0"
+      />
     </div>
   </header>
 </DocumentFragment>
@@ -391,6 +517,7 @@ exports[`<RoomListHeaderView /> space menu should display the space menu 1`] = `
   >
     <div
       class="flex mx_RoomListHeaderView_title"
+      data-floating-ui-inert=""
       style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
     >
       <h1
@@ -406,7 +533,7 @@ exports[`<RoomListHeaderView /> space menu should display the space menu 1`] = `
         class="_icon-button_1pz9o_8 mx_SpaceMenu_button"
         data-kind="primary"
         data-state="closed"
-        id="radix-«r28»"
+        id="radix-«r3q»"
         role="button"
         style="--cpd-icon-button-size: 20px;"
         tabindex="0"
@@ -435,76 +562,117 @@ exports[`<RoomListHeaderView /> space menu should display the space menu 1`] = `
       class="flex"
       style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
     >
-      <button
+      <div
-        aria-disabled="false"
         aria-expanded="false"
-        aria-haspopup="menu"
+        aria-haspopup="dialog"
-        aria-label="Room Options"
+        class="mx_RoomListHeaderView_ReleaseAnnouncementAnchor"
-        aria-labelledby="«r2c»"
+        data-floating-ui-inert=""
-        class="_icon-button_1pz9o_8"
-        data-kind="primary"
-        data-state="closed"
-        id="radix-«r2a»"
-        role="button"
-        style="--cpd-icon-button-size: 32px;"
-        tabindex="0"
-        type="button"
       >
-        <div
+        <button
-          class="_indicator-icon_zr2a0_17"
+          aria-disabled="false"
-          style="--cpd-icon-button-size: 100%;"
+          aria-expanded="false"
+          aria-haspopup="menu"
+          aria-label="Room Options"
+          aria-labelledby="«r42»"
+          class="_icon-button_1pz9o_8"
+          data-kind="primary"
+          data-state="closed"
+          id="radix-«r40»"
+          role="button"
+          style="--cpd-icon-button-size: 32px;"
+          tabindex="0"
+          type="button"
         >
-          <svg
+          <div
-            color="var(--cpd-color-icon-secondary)"
+            class="_indicator-icon_zr2a0_17"
-            fill="currentColor"
+            style="--cpd-icon-button-size: 100%;"
-            height="1em"
-            viewBox="0 0 24 24"
-            width="1em"
-            xmlns="http://www.w3.org/2000/svg"
           >
-            <path
+            <svg
-              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+              color="var(--cpd-color-icon-secondary)"
-            />
+              fill="currentColor"
-          </svg>
+              height="1em"
-        </div>
+              viewBox="0 0 24 24"
-      </button>
+              width="1em"
-      <button
+              xmlns="http://www.w3.org/2000/svg"
-        aria-disabled="false"
+            >
-        aria-expanded="false"
+              <path
-        aria-haspopup="menu"
+                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-        aria-label="Add"
+              />
-        class="_icon-button_1pz9o_8"
+            </svg>
-        data-kind="primary"
+          </div>
-        data-state="closed"
+        </button>
-        id="radix-«r2h»"
+      </div>
-        role="button"
+      <div
-        style="--cpd-icon-button-size: 32px;"
+        aria-controls="«r49»"
-        tabindex="0"
+        aria-describedby="«r49»"
-        type="button"
+        aria-expanded="true"
+        aria-haspopup="dialog"
+        class="mx_RoomListHeaderView_ReleaseAnnouncementAnchor"
+        data-floating-ui-inert=""
       >
-        <div
+        <button
-          class="_indicator-icon_zr2a0_17"
+          aria-disabled="false"
-          style="--cpd-icon-button-size: 100%;"
+          aria-expanded="false"
+          aria-haspopup="menu"
+          aria-label="Add"
+          class="_icon-button_1pz9o_8"
+          data-kind="primary"
+          data-state="closed"
+          id="radix-«r4b»"
+          role="button"
+          style="--cpd-icon-button-size: 32px;"
+          tabindex="0"
+          type="button"
         >
-          <svg
+          <div
-            color="var(--cpd-color-icon-secondary)"
+            class="_indicator-icon_zr2a0_17"
-            fill="currentColor"
+            style="--cpd-icon-button-size: 100%;"
-            height="1em"
-            viewBox="0 0 24 24"
-            width="1em"
-            xmlns="http://www.w3.org/2000/svg"
           >
-            <path
+            <svg
-              clip-rule="evenodd"
+              color="var(--cpd-color-icon-secondary)"
-              d="M16.937 2.82a2 2 0 0 1 2.828 0l1.415 1.414a2 2 0 0 1 0 2.829l-7.071 7.07c-.195.196-.42.342-.66.44a1 1 0 0 1-.168.072l-3.993 1.331a1 1 0 0 1-1.265-1.265l1.331-3.992q.03-.09.073-.168m10.338-4.903-6.717 6.718-1.414-1.414 6.717-6.718z"
+              fill="currentColor"
-              fill-rule="evenodd"
+              height="1em"
-            />
+              viewBox="0 0 24 24"
-            <path
+              width="1em"
-              d="M3 5a2 2 0 0 1 2-2h6a1 1 0 1 1 0 2H5v14h14v-6a1 1 0 1 1 2 0v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"
+              xmlns="http://www.w3.org/2000/svg"
-            />
+            >
-          </svg>
+              <path
-        </div>
+                clip-rule="evenodd"
-      </button>
+                d="M16.937 2.82a2 2 0 0 1 2.828 0l1.415 1.414a2 2 0 0 1 0 2.829l-7.071 7.07c-.195.196-.42.342-.66.44a1 1 0 0 1-.168.072l-3.993 1.331a1 1 0 0 1-1.265-1.265l1.331-3.992q.03-.09.073-.168m10.338-4.903-6.717 6.718-1.414-1.414 6.717-6.718z"
+                fill-rule="evenodd"
+              />
+              <path
+                d="M3 5a2 2 0 0 1 2-2h6a1 1 0 1 1 0 2H5v14h14v-6a1 1 0 1 1 2 0v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"
+              />
+            </svg>
+          </div>
+        </button>
+      </div>
+      <span
+        aria-hidden="true"
+        data-floating-ui-inert=""
+        style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"
+        tabindex="-1"
+      />
+      <span
+        data-floating-ui-focus-guard=""
+        data-type="outside"
+        role="button"
+        style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"
+        tabindex="0"
+      />
+      <span
+        aria-owns="«r4d»"
+        data-floating-ui-inert=""
+        style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"
+      />
+      <span
+        data-floating-ui-focus-guard=""
+        data-type="outside"
+        role="button"
+        style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"
+        tabindex="0"
+      />
     </div>
   </header>
 </DocumentFragment>
@@ -520,6 +688,7 @@ exports[`<RoomListHeaderView /> space menu should not display the space menu 1`]
   >
     <div
       class="flex mx_RoomListHeaderView_title"
+      data-floating-ui-inert=""
       style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-1x); --mx-flex-wrap: nowrap;"
     >
       <h1
@@ -532,76 +701,117 @@ exports[`<RoomListHeaderView /> space menu should not display the space menu 1`]
       class="flex"
       style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
     >
-      <button
+      <div
-        aria-disabled="false"
         aria-expanded="false"
-        aria-haspopup="menu"
+        aria-haspopup="dialog"
-        aria-label="Room Options"
+        class="mx_RoomListHeaderView_ReleaseAnnouncementAnchor"
-        aria-labelledby="«r2m»"
+        data-floating-ui-inert=""
-        class="_icon-button_1pz9o_8"
-        data-kind="primary"
-        data-state="closed"
-        id="radix-«r2k»"
-        role="button"
-        style="--cpd-icon-button-size: 32px;"
-        tabindex="0"
-        type="button"
       >
-        <div
+        <button
-          class="_indicator-icon_zr2a0_17"
+          aria-disabled="false"
-          style="--cpd-icon-button-size: 100%;"
+          aria-expanded="false"
+          aria-haspopup="menu"
+          aria-label="Room Options"
+          aria-labelledby="«r4m»"
+          class="_icon-button_1pz9o_8"
+          data-kind="primary"
+          data-state="closed"
+          id="radix-«r4k»"
+          role="button"
+          style="--cpd-icon-button-size: 32px;"
+          tabindex="0"
+          type="button"
         >
-          <svg
+          <div
-            color="var(--cpd-color-icon-secondary)"
+            class="_indicator-icon_zr2a0_17"
-            fill="currentColor"
+            style="--cpd-icon-button-size: 100%;"
-            height="1em"
-            viewBox="0 0 24 24"
-            width="1em"
-            xmlns="http://www.w3.org/2000/svg"
           >
-            <path
+            <svg
-              d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
+              color="var(--cpd-color-icon-secondary)"
-            />
+              fill="currentColor"
-          </svg>
+              height="1em"
-        </div>
+              viewBox="0 0 24 24"
-      </button>
+              width="1em"
-      <button
+              xmlns="http://www.w3.org/2000/svg"
-        aria-disabled="false"
+            >
-        aria-expanded="false"
+              <path
-        aria-haspopup="menu"
+                d="M6 14q-.824 0-1.412-.588A1.93 1.93 0 0 1 4 12q0-.825.588-1.412A1.93 1.93 0 0 1 6 10q.824 0 1.412.588Q8 11.175 8 12t-.588 1.412A1.93 1.93 0 0 1 6 14m6 0q-.825 0-1.412-.588A1.93 1.93 0 0 1 10 12q0-.825.588-1.412A1.93 1.93 0 0 1 12 10q.825 0 1.412.588Q14 11.175 14 12t-.588 1.412A1.93 1.93 0 0 1 12 14m6 0q-.824 0-1.413-.588A1.93 1.93 0 0 1 16 12q0-.825.587-1.412A1.93 1.93 0 0 1 18 10q.824 0 1.413.588Q20 11.175 20 12t-.587 1.412A1.93 1.93 0 0 1 18 14"
-        aria-label="Add"
+              />
-        class="_icon-button_1pz9o_8"
+            </svg>
-        data-kind="primary"
+          </div>
-        data-state="closed"
+        </button>
-        id="radix-«r2r»"
+      </div>
-        role="button"
+      <div
-        style="--cpd-icon-button-size: 32px;"
+        aria-controls="«r4t»"
-        tabindex="0"
+        aria-describedby="«r4t»"
-        type="button"
+        aria-expanded="true"
+        aria-haspopup="dialog"
+        class="mx_RoomListHeaderView_ReleaseAnnouncementAnchor"
+        data-floating-ui-inert=""
       >
-        <div
+        <button
-          class="_indicator-icon_zr2a0_17"
+          aria-disabled="false"
-          style="--cpd-icon-button-size: 100%;"
+          aria-expanded="false"
+          aria-haspopup="menu"
+          aria-label="Add"
+          class="_icon-button_1pz9o_8"
+          data-kind="primary"
+          data-state="closed"
+          id="radix-«r4v»"
+          role="button"
+          style="--cpd-icon-button-size: 32px;"
+          tabindex="0"
+          type="button"
         >
-          <svg
+          <div
-            color="var(--cpd-color-icon-secondary)"
+            class="_indicator-icon_zr2a0_17"
-            fill="currentColor"
+            style="--cpd-icon-button-size: 100%;"
-            height="1em"
-            viewBox="0 0 24 24"
-            width="1em"
-            xmlns="http://www.w3.org/2000/svg"
           >
-            <path
+            <svg
-              clip-rule="evenodd"
+              color="var(--cpd-color-icon-secondary)"
-              d="M16.937 2.82a2 2 0 0 1 2.828 0l1.415 1.414a2 2 0 0 1 0 2.829l-7.071 7.07c-.195.196-.42.342-.66.44a1 1 0 0 1-.168.072l-3.993 1.331a1 1 0 0 1-1.265-1.265l1.331-3.992q.03-.09.073-.168m10.338-4.903-6.717 6.718-1.414-1.414 6.717-6.718z"
+              fill="currentColor"
-              fill-rule="evenodd"
+              height="1em"
-            />
+              viewBox="0 0 24 24"
-            <path
+              width="1em"
-              d="M3 5a2 2 0 0 1 2-2h6a1 1 0 1 1 0 2H5v14h14v-6a1 1 0 1 1 2 0v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"
+              xmlns="http://www.w3.org/2000/svg"
-            />
+            >
-          </svg>
+              <path
-        </div>
+                clip-rule="evenodd"
-      </button>
+                d="M16.937 2.82a2 2 0 0 1 2.828 0l1.415 1.414a2 2 0 0 1 0 2.829l-7.071 7.07c-.195.196-.42.342-.66.44a1 1 0 0 1-.168.072l-3.993 1.331a1 1 0 0 1-1.265-1.265l1.331-3.992q.03-.09.073-.168m10.338-4.903-6.717 6.718-1.414-1.414 6.717-6.718z"
+                fill-rule="evenodd"
+              />
+              <path
+                d="M3 5a2 2 0 0 1 2-2h6a1 1 0 1 1 0 2H5v14h14v-6a1 1 0 1 1 2 0v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"
+              />
+            </svg>
+          </div>
+        </button>
+      </div>
+      <span
+        aria-hidden="true"
+        data-floating-ui-inert=""
+        style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"
+        tabindex="-1"
+      />
+      <span
+        data-floating-ui-focus-guard=""
+        data-type="outside"
+        role="button"
+        style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"
+        tabindex="0"
+      />
+      <span
+        aria-owns="«r51»"
+        data-floating-ui-inert=""
+        style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"
+      />
+      <span
+        data-floating-ui-focus-guard=""
+        data-type="outside"
+        role="button"
+        style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: fixed; white-space: nowrap; width: 1px; top: 0px; left: 0px;"
+        tabindex="0"
+      />
     </div>
   </header>
 </DocumentFragment>

test/unit-tests/components/views/spaces/__snapshots__/QuickSettingsButton-test.tsx.snap

@@ -3,7 +3,8 @@
 exports[`QuickSettingsButton should render the quick settings button in expanded mode 1`] = `
 <DocumentFragment>
   <div
-    aria-expanded="true"
+    aria-expanded="false"
+    aria-haspopup="dialog"
     aria-label="Quick settings"
     class="mx_AccessibleButton mx_QuickSettingsButton expanded"
     role="button"

test/unit-tests/components/views/spaces/__snapshots__/SpacePanel-test.tsx.snap

@@ -264,6 +264,7 @@ exports[`<SpacePanel /> should show all activated MetaSpaces in the correct orde
     </div>
     <div
       aria-expanded="false"
+      aria-haspopup="dialog"
       aria-label="Quick settings"
       class="mx_AccessibleButton mx_QuickSettingsButton"
       role="button"

test/unit-tests/stores/ReleaseAnnouncementStore-test.tsx

@@ -110,12 +110,12 @@ describe("ReleaseAnnouncementStore", () => {
 
     it("should listen to release announcement data changes in the store", async () => {
         const secondStore = new ReleaseAnnouncementStore();
-        expect(secondStore.getReleaseAnnouncement()).toBe("pinningMessageList");
+        expect(secondStore.getReleaseAnnouncement()).toBe("newRoomList_intro");
 
         const promise = listenReleaseAnnouncementChanged();
         await secondStore.nextReleaseAnnouncement();
 
-        expect(await promise).toBe(null);
+        expect(await promise).toBe("newRoomList_sort");
-        expect(releaseAnnouncementStore.getReleaseAnnouncement()).toBe(null);
+        expect(releaseAnnouncementStore.getReleaseAnnouncement()).toBe("newRoomList_sort");
     });
 });