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,14 +250,6 @@ const RoomSummaryCardView: React.FC<IProps> = ({
                 <MenuItem Icon={ThreadsIcon} label={_t("common|threads")} onSelect={vm.onRoomThreadsClick} />
                 {!vm.isVideoRoom && (
                     <>
-                        <ReleaseAnnouncement
-                            feature="pinningMessageList"
-                            header={_t("right_panel|pinned_messages|release_announcement|title")}
-                            description={_t("right_panel|pinned_messages|release_announcement|description")}
-                            closeLabel={_t("right_panel|pinned_messages|release_announcement|close")}
-                            placement="top"
-                        >
-                            <div>
                         <MenuItem
                             Icon={PinIcon}
                             label={_t("right_panel|pinned_messages_button")}
@@ -268,8 +259,6 @@ const RoomSummaryCardView: React.FC<IProps> = ({
                                 {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)">
+                <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 */}
+                <ReleaseAnnouncement
+                    feature="newRoomList_intro"
+                    header={_t("room_list|release_announcement|intro|title")}
+                    description={_t("room_list|release_announcement|intro|description")}
+                    closeLabel={_t("room_list|release_announcement|next")}
+                >
+                    <div className="mx_RoomListHeaderView_ReleaseAnnouncementAnchor">
                         {vm.displayComposeMenu ? (
                             <ComposeMenu vm={vm} />
                         ) : (
-                    <IconButton aria-label={_t("action|start_chat")} onClick={(e) => vm.createChatRoom(e.nativeEvent)}>
+                            <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 (
         <>
+            <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,6 +138,13 @@ const QuickSettingsButton: React.FC<{
 
     return (
         <>
+            <ReleaseAnnouncement
+                feature="newRoomList_settings"
+                header={_t("room_list|release_announcement|settings|title")}
+                description={_t("room_list|release_announcement|settings|description")}
+                closeLabel={_t("room_list|release_announcement|done")}
+                placement="right"
+            >
                 <AccessibleButton
                     className={classNames("mx_QuickSettingsButton", { expanded: !isPanelCollapsed })}
                     onClick={openMenu}
@@ -147,6 +155,7 @@ const QuickSettingsButton: React.FC<{
                 >
                     {!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,13 +345,6 @@ 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"
@@ -404,35 +389,8 @@ exports[`<RoomSummaryCard /> has button to edit topic 1`] = `
             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"
         >
@@ -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,13 +1020,6 @@ 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"
@@ -1129,35 +1064,8 @@ exports[`<RoomSummaryCard /> renders the room summary 1`] = `
             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"
         >
@@ -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,13 +1733,6 @@ 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"
@@ -1892,35 +1777,8 @@ exports[`<RoomSummaryCard /> renders the room topic in the summary 1`] = `
             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"
         >
@@ -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"
@@ -53,17 +54,23 @@ exports[`<RoomListHeaderView /> compose menu should display the compose menu 1`]
     <div
       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;"
+    >
+      <div
+        aria-expanded="false"
+        aria-haspopup="dialog"
+        class="mx_RoomListHeaderView_ReleaseAnnouncementAnchor"
+        data-floating-ui-inert=""
       >
         <button
           aria-disabled="false"
           aria-expanded="false"
           aria-haspopup="menu"
           aria-label="Room Options"
-        aria-labelledby="«rg»"
+          aria-labelledby="«ru»"
           class="_icon-button_1pz9o_8"
           data-kind="primary"
           data-state="closed"
-        id="radix-«re»"
+          id="radix-«rs»"
           role="button"
           style="--cpd-icon-button-size: 32px;"
           tabindex="0"
@@ -87,6 +94,15 @@ exports[`<RoomListHeaderView /> compose menu should display the compose menu 1`]
             </svg>
           </div>
         </button>
+      </div>
+      <div
+        aria-controls="«r15»"
+        aria-describedby="«r15»"
+        aria-expanded="true"
+        aria-haspopup="dialog"
+        class="mx_RoomListHeaderView_ReleaseAnnouncementAnchor"
+        data-floating-ui-inert=""
+      >
         <button
           aria-disabled="false"
           aria-expanded="false"
@@ -95,7 +111,7 @@ exports[`<RoomListHeaderView /> compose menu should display the compose menu 1`]
           class="_icon-button_1pz9o_8"
           data-kind="primary"
           data-state="closed"
-        id="radix-«rl»"
+          id="radix-«r17»"
           role="button"
           style="--cpd-icon-button-size: 32px;"
           tabindex="0"
@@ -125,6 +141,32 @@ exports[`<RoomListHeaderView /> compose menu should display the compose menu 1`]
           </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"
@@ -182,17 +225,23 @@ exports[`<RoomListHeaderView /> compose menu should not display the compose menu
     <div
       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;"
+    >
+      <div
+        aria-expanded="false"
+        aria-haspopup="dialog"
+        class="mx_RoomListHeaderView_ReleaseAnnouncementAnchor"
+        data-floating-ui-inert=""
       >
         <button
           aria-disabled="false"
           aria-expanded="false"
           aria-haspopup="menu"
           aria-label="Room Options"
-        aria-labelledby="«rs»"
+          aria-labelledby="«r1k»"
           class="_icon-button_1pz9o_8"
           data-kind="primary"
           data-state="closed"
-        id="radix-«rq»"
+          id="radix-«r1i»"
           role="button"
           style="--cpd-icon-button-size: 32px;"
           tabindex="0"
@@ -216,6 +265,15 @@ exports[`<RoomListHeaderView /> compose menu should not display the compose menu
             </svg>
           </div>
         </button>
+      </div>
+      <div
+        aria-controls="«r1r»"
+        aria-describedby="«r1r»"
+        aria-expanded="true"
+        aria-haspopup="dialog"
+        class="mx_RoomListHeaderView_ReleaseAnnouncementAnchor"
+        data-floating-ui-inert=""
+      >
         <button
           aria-label="Start chat"
           class="_icon-button_1pz9o_8"
@@ -248,6 +306,32 @@ exports[`<RoomListHeaderView /> compose menu should not display the compose menu
           </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
@@ -305,17 +390,23 @@ exports[`<RoomListHeaderView /> should render 'room options' button 1`] = `
     <div
       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;"
+    >
+      <div
+        aria-expanded="false"
+        aria-haspopup="dialog"
+        class="mx_RoomListHeaderView_ReleaseAnnouncementAnchor"
+        data-floating-ui-inert=""
       >
         <button
           aria-disabled="false"
           aria-expanded="false"
           aria-haspopup="menu"
           aria-label="Room Options"
-        aria-labelledby="«r4»"
+          aria-labelledby="«r8»"
           class="_icon-button_1pz9o_8"
           data-kind="primary"
           data-state="closed"
-        id="radix-«r2»"
+          id="radix-«r6»"
           role="button"
           style="--cpd-icon-button-size: 32px;"
           tabindex="0"
@@ -339,6 +430,15 @@ exports[`<RoomListHeaderView /> should render 'room options' button 1`] = `
             </svg>
           </div>
         </button>
+      </div>
+      <div
+        aria-controls="«rf»"
+        aria-describedby="«rf»"
+        aria-expanded="true"
+        aria-haspopup="dialog"
+        class="mx_RoomListHeaderView_ReleaseAnnouncementAnchor"
+        data-floating-ui-inert=""
+      >
         <button
           aria-disabled="false"
           aria-expanded="false"
@@ -347,7 +447,7 @@ exports[`<RoomListHeaderView /> should render 'room options' button 1`] = `
           class="_icon-button_1pz9o_8"
           data-kind="primary"
           data-state="closed"
-        id="radix-«r9»"
+          id="radix-«rh»"
           role="button"
           style="--cpd-icon-button-size: 32px;"
           tabindex="0"
@@ -377,6 +477,32 @@ exports[`<RoomListHeaderView /> should render 'room options' button 1`] = `
           </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"
@@ -434,17 +561,23 @@ exports[`<RoomListHeaderView /> space menu should display the space menu 1`] = `
     <div
       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;"
+    >
+      <div
+        aria-expanded="false"
+        aria-haspopup="dialog"
+        class="mx_RoomListHeaderView_ReleaseAnnouncementAnchor"
+        data-floating-ui-inert=""
       >
         <button
           aria-disabled="false"
           aria-expanded="false"
           aria-haspopup="menu"
           aria-label="Room Options"
-        aria-labelledby="«r2c»"
+          aria-labelledby="«r42»"
           class="_icon-button_1pz9o_8"
           data-kind="primary"
           data-state="closed"
-        id="radix-«r2a»"
+          id="radix-«r40»"
           role="button"
           style="--cpd-icon-button-size: 32px;"
           tabindex="0"
@@ -468,6 +601,15 @@ exports[`<RoomListHeaderView /> space menu should display the space menu 1`] = `
             </svg>
           </div>
         </button>
+      </div>
+      <div
+        aria-controls="«r49»"
+        aria-describedby="«r49»"
+        aria-expanded="true"
+        aria-haspopup="dialog"
+        class="mx_RoomListHeaderView_ReleaseAnnouncementAnchor"
+        data-floating-ui-inert=""
+      >
         <button
           aria-disabled="false"
           aria-expanded="false"
@@ -476,7 +618,7 @@ exports[`<RoomListHeaderView /> space menu should display the space menu 1`] = `
           class="_icon-button_1pz9o_8"
           data-kind="primary"
           data-state="closed"
-        id="radix-«r2h»"
+          id="radix-«r4b»"
           role="button"
           style="--cpd-icon-button-size: 32px;"
           tabindex="0"
@@ -506,6 +648,32 @@ exports[`<RoomListHeaderView /> space menu should display the space menu 1`] = `
           </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
@@ -531,17 +700,23 @@ exports[`<RoomListHeaderView /> space menu should not display the space menu 1`]
     <div
       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;"
+    >
+      <div
+        aria-expanded="false"
+        aria-haspopup="dialog"
+        class="mx_RoomListHeaderView_ReleaseAnnouncementAnchor"
+        data-floating-ui-inert=""
       >
         <button
           aria-disabled="false"
           aria-expanded="false"
           aria-haspopup="menu"
           aria-label="Room Options"
-        aria-labelledby="«r2m»"
+          aria-labelledby="«r4m»"
           class="_icon-button_1pz9o_8"
           data-kind="primary"
           data-state="closed"
-        id="radix-«r2k»"
+          id="radix-«r4k»"
           role="button"
           style="--cpd-icon-button-size: 32px;"
           tabindex="0"
@@ -565,6 +740,15 @@ exports[`<RoomListHeaderView /> space menu should not display the space menu 1`]
             </svg>
           </div>
         </button>
+      </div>
+      <div
+        aria-controls="«r4t»"
+        aria-describedby="«r4t»"
+        aria-expanded="true"
+        aria-haspopup="dialog"
+        class="mx_RoomListHeaderView_ReleaseAnnouncementAnchor"
+        data-floating-ui-inert=""
+      >
         <button
           aria-disabled="false"
           aria-expanded="false"
@@ -573,7 +757,7 @@ exports[`<RoomListHeaderView /> space menu should not display the space menu 1`]
           class="_icon-button_1pz9o_8"
           data-kind="primary"
           data-state="closed"
-        id="radix-«r2r»"
+          id="radix-«r4v»"
           role="button"
           style="--cpd-icon-button-size: 32px;"
           tabindex="0"
@@ -603,6 +787,32 @@ exports[`<RoomListHeaderView /> space menu should not display the space menu 1`]
           </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");
     });
 });