Add release announcement for the sounds (#30900)

* Add release announcement for sounds

* Update jest test and snapshots

* lint

* Update e2e test

* Add screenshot

* Fix order

* Fix snapshots

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

@@ -32,20 +32,26 @@ test.describe("Release announcement", () => {
             // dismiss the toast so the announcement appears
             await page.getByRole("button", { name: "Dismiss" }).click();
 
-            const name = "Chats has a new look!";
+            const newSoundsName = "We’ve refreshed your sounds";
+            // The new sounds release announcement should be displayed
+            await util.assertReleaseAnnouncementIsVisible(newSoundsName);
+            // Hide the new sounds release announcement
+            const newSoundsDialog = util.getReleaseAnnouncement(newSoundsName);
+            await newSoundsDialog.getByRole("button", { name: "OK" }).click();
 
-            // The release announcement should be displayed
-            await util.assertReleaseAnnouncementIsVisible(name);
-            // Hide the release announcement
-            const dialog = util.getReleaseAnnouncement(name);
+            const newRoomListName = "Chats has a new look!";
+            // The new room list release announcement should be displayed
+            await util.assertReleaseAnnouncementIsVisible(newRoomListName);
+            // Hide the new room list release announcement
+            const dialog = util.getReleaseAnnouncement(newRoomListName);
             await dialog.getByRole("button", { name: "Next" }).click();
 
-            await util.assertReleaseAnnouncementIsNotVisible(name);
+            await util.assertReleaseAnnouncementIsNotVisible(newRoomListName);
 
             await page.reload();
             await expect(page.getByRole("button", { name: "Room options" })).toBeVisible();
-            // Check that once the release announcement has been marked as viewed, it does not appear again
-            await util.assertReleaseAnnouncementIsNotVisible(name);
+            // Check that once the release announcements has been marked as viewed, it does not appear again
+            await util.assertReleaseAnnouncementIsNotVisible(newRoomListName);
         },
     );
 });

src/components/views/spaces/SpacePanel.tsx

@@ -68,6 +68,7 @@ import { ThreadsActivityCentre } from "./threads-activity-centre/";
 import AccessibleButton from "../elements/AccessibleButton";
 import { Landmark, LandmarkNavigation } from "../../../accessibility/LandmarkNavigation";
 import { KeyboardShortcut } from "../settings/KeyboardShortcut";
+import { ReleaseAnnouncement } from "../../structures/ReleaseAnnouncement";
 
 const useSpaces = (): [Room[], MetaSpace[], Room[], SpaceKey] => {
     const invites = useEventEmitterState<Room[]>(SpaceStore.instance, UPDATE_INVITED_SPACES, () => {
@@ -379,61 +380,72 @@ const SpacePanel: React.FC = () => {
                         onDragEndHandler();
                     }}
                 >
-                    <nav
-                        className={classNames("mx_SpacePanel", {
-                            collapsed: isPanelCollapsed,
-                            newUi: newRoomListEnabled,
-                        })}
-                        onKeyDown={(ev) => {
-                            const navAction = getKeyBindingsManager().getNavigationAction(ev);
-                            if (
-                                navAction === KeyBindingAction.NextLandmark ||
-                                navAction === KeyBindingAction.PreviousLandmark
-                            ) {
-                                LandmarkNavigation.findAndFocusNextLandmark(
-                                    Landmark.ACTIVE_SPACE_BUTTON,
-                                    navAction === KeyBindingAction.PreviousLandmark,
-                                );
-                                ev.stopPropagation();
-                                ev.preventDefault();
-                                return;
-                            }
-                            onKeyDownHandler(ev);
-                        }}
-                        ref={ref}
-                        aria-label={_t("common|spaces")}
+                    <ReleaseAnnouncement
+                        feature="newNotificationSounds"
+                        header={_t("settings|notifications|sounds_release_announcement|title")}
+                        description={_t("settings|notifications|sounds_release_announcement|description")}
+                        closeLabel={_t("action|ok")}
+                        displayArrow={false}
+                        placement="right-start"
                     >
-                        <UserMenu isPanelCollapsed={isPanelCollapsed}>
-                            <AccessibleButton
-                                className={classNames("mx_SpacePanel_toggleCollapse", { expanded: !isPanelCollapsed })}
-                                onClick={() => setPanelCollapsed(!isPanelCollapsed)}
-                                title={isPanelCollapsed ? _t("action|expand") : _t("action|collapse")}
-                                caption={
-                                    <KeyboardShortcut
-                                        value={{ ctrlOrCmdKey: true, shiftKey: true, key: "d" }}
-                                        className="mx_SpacePanel_Tooltip_KeyboardShortcut"
-                                    />
+                        <nav
+                            className={classNames("mx_SpacePanel", {
+                                collapsed: isPanelCollapsed,
+                                newUi: newRoomListEnabled,
+                            })}
+                            onKeyDown={(ev) => {
+                                const navAction = getKeyBindingsManager().getNavigationAction(ev);
+                                if (
+                                    navAction === KeyBindingAction.NextLandmark ||
+                                    navAction === KeyBindingAction.PreviousLandmark
+                                ) {
+                                    LandmarkNavigation.findAndFocusNextLandmark(
+                                        Landmark.ACTIVE_SPACE_BUTTON,
+                                        navAction === KeyBindingAction.PreviousLandmark,
+                                    );
+                                    ev.stopPropagation();
+                                    ev.preventDefault();
+                                    return;
                                 }
-                            />
-                        </UserMenu>
-                        <Droppable droppableId="top-level-spaces">
-                            {(provided, snapshot) => (
-                                <InnerSpacePanel
-                                    {...provided.droppableProps}
-                                    isPanelCollapsed={isPanelCollapsed}
-                                    setPanelCollapsed={setPanelCollapsed}
-                                    isDraggingOver={snapshot.isDraggingOver}
-                                    innerRef={provided.innerRef}
-                                >
-                                    {provided.placeholder}
-                                </InnerSpacePanel>
-                            )}
-                        </Droppable>
+                                onKeyDownHandler(ev);
+                            }}
+                            ref={ref}
+                            aria-label={_t("common|spaces")}
+                        >
+                            <UserMenu isPanelCollapsed={isPanelCollapsed}>
+                                <AccessibleButton
+                                    className={classNames("mx_SpacePanel_toggleCollapse", {
+                                        expanded: !isPanelCollapsed,
+                                    })}
+                                    onClick={() => setPanelCollapsed(!isPanelCollapsed)}
+                                    title={isPanelCollapsed ? _t("action|expand") : _t("action|collapse")}
+                                    caption={
+                                        <KeyboardShortcut
+                                            value={{ ctrlOrCmdKey: true, shiftKey: true, key: "d" }}
+                                            className="mx_SpacePanel_Tooltip_KeyboardShortcut"
+                                        />
+                                    }
+                                />
+                            </UserMenu>
+                            <Droppable droppableId="top-level-spaces">
+                                {(provided, snapshot) => (
+                                    <InnerSpacePanel
+                                        {...provided.droppableProps}
+                                        isPanelCollapsed={isPanelCollapsed}
+                                        setPanelCollapsed={setPanelCollapsed}
+                                        isDraggingOver={snapshot.isDraggingOver}
+                                        innerRef={provided.innerRef}
+                                    >
+                                        {provided.placeholder}
+                                    </InnerSpacePanel>
+                                )}
+                            </Droppable>
 
-                        <ThreadsActivityCentre displayButtonLabel={!isPanelCollapsed} />
+                            <ThreadsActivityCentre displayButtonLabel={!isPanelCollapsed} />
 
-                        <QuickSettingsButton isPanelCollapsed={isPanelCollapsed} />
-                    </nav>
+                            <QuickSettingsButton isPanelCollapsed={isPanelCollapsed} />
+                        </nav>
+                    </ReleaseAnnouncement>
                 </DragDropContext>
             )}
         </RovingTabIndexProvider>

src/i18n/strings/en_EN.json

@@ -2860,6 +2860,10 @@
             "rule_suppress_notices": "Messages sent by bot",
             "rule_tombstone": "When rooms are upgraded",
             "show_message_desktop_notification": "Show message in desktop notification",
+            "sounds_release_announcement": {
+                "description": "Your notification ping and call ringer have been updated—clearer, quicker, and less disruptive",
+                "title": "We’ve refreshed your sounds"
+            },
             "voip": "Audio and Video calls"
         },
         "preferences": {

src/stores/ReleaseAnnouncementStore.ts

@@ -18,7 +18,13 @@ import ToastStore from "./ToastStore";
 /**
  * The features are shown in the array order.
  */
-const FEATURES = ["newRoomList_intro", "newRoomList_sort", "newRoomList_filter", "newRoomList_settings"] as const;
+const FEATURES = [
+    "newNotificationSounds",
+    "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="newRoomList_intro"
+                feature="newNotificationSounds"
                 header="header"
                 description="description"
                 closeLabel="close"

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

@@ -10,7 +10,6 @@ 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
@@ -26,7 +25,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-«rm»"
+        id="radix-«rk»"
         role="button"
         style="--cpd-icon-button-size: 20px;"
         tabindex="0"
@@ -58,18 +57,17 @@ exports[`<RoomListHeaderView /> compose menu should display the compose menu 1`]
       <div
         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="«ru»"
+          aria-labelledby="«rs»"
           class="_icon-button_1pz9o_8"
           data-kind="primary"
           data-state="closed"
-          id="radix-«rs»"
+          id="radix-«rq»"
           role="button"
           style="--cpd-icon-button-size: 32px;"
           tabindex="0"
@@ -95,11 +93,8 @@ exports[`<RoomListHeaderView /> compose menu should display the compose menu 1`]
         </button>
       </div>
       <div
-        aria-controls="«r15»"
-        aria-describedby="«r15»"
         aria-haspopup="dialog"
         class="mx_RoomListHeaderView_ReleaseAnnouncementAnchor"
-        data-floating-ui-inert=""
       >
         <button
           aria-disabled="false"
@@ -109,7 +104,7 @@ exports[`<RoomListHeaderView /> compose menu should display the compose menu 1`]
           class="_icon-button_1pz9o_8"
           data-kind="primary"
           data-state="closed"
-          id="radix-«r17»"
+          id="radix-«r15»"
           role="button"
           style="--cpd-icon-button-size: 32px;"
           tabindex="0"
@@ -139,31 +134,6 @@ 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>
@@ -179,7 +149,6 @@ 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
@@ -195,7 +164,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-«r1c»"
+        id="radix-«r18»"
         role="button"
         style="--cpd-icon-button-size: 20px;"
         tabindex="0"
@@ -227,18 +196,17 @@ exports[`<RoomListHeaderView /> compose menu should not display the compose menu
       <div
         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="«r1k»"
+          aria-labelledby="«r1g»"
           class="_icon-button_1pz9o_8"
           data-kind="primary"
           data-state="closed"
-          id="radix-«r1i»"
+          id="radix-«r1e»"
           role="button"
           style="--cpd-icon-button-size: 32px;"
           tabindex="0"
@@ -264,11 +232,8 @@ exports[`<RoomListHeaderView /> compose menu should not display the compose menu
         </button>
       </div>
       <div
-        aria-controls="«r1r»"
-        aria-describedby="«r1r»"
         aria-haspopup="dialog"
         class="mx_RoomListHeaderView_ReleaseAnnouncementAnchor"
-        data-floating-ui-inert=""
       >
         <button
           aria-label="Start chat"
@@ -302,31 +267,6 @@ 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>
@@ -342,7 +282,6 @@ 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
@@ -390,7 +329,6 @@ exports[`<RoomListHeaderView /> should render 'room options' button 1`] = `
       <div
         aria-haspopup="dialog"
         class="mx_RoomListHeaderView_ReleaseAnnouncementAnchor"
-        data-floating-ui-inert=""
       >
         <button
           aria-disabled="false"
@@ -427,11 +365,8 @@ exports[`<RoomListHeaderView /> should render 'room options' button 1`] = `
         </button>
       </div>
       <div
-        aria-controls="«rf»"
-        aria-describedby="«rf»"
         aria-haspopup="dialog"
         class="mx_RoomListHeaderView_ReleaseAnnouncementAnchor"
-        data-floating-ui-inert=""
       >
         <button
           aria-disabled="false"
@@ -471,31 +406,6 @@ 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>
@@ -511,7 +421,6 @@ 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
@@ -527,7 +436,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-«r3q»"
+        id="radix-«r3g»"
         role="button"
         style="--cpd-icon-button-size: 20px;"
         tabindex="0"
@@ -559,18 +468,17 @@ exports[`<RoomListHeaderView /> space menu should display the space menu 1`] = `
       <div
         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="«r42»"
+          aria-labelledby="«r3o»"
           class="_icon-button_1pz9o_8"
           data-kind="primary"
           data-state="closed"
-          id="radix-«r40»"
+          id="radix-«r3m»"
           role="button"
           style="--cpd-icon-button-size: 32px;"
           tabindex="0"
@@ -596,11 +504,8 @@ exports[`<RoomListHeaderView /> space menu should display the space menu 1`] = `
         </button>
       </div>
       <div
-        aria-controls="«r49»"
-        aria-describedby="«r49»"
         aria-haspopup="dialog"
         class="mx_RoomListHeaderView_ReleaseAnnouncementAnchor"
-        data-floating-ui-inert=""
       >
         <button
           aria-disabled="false"
@@ -610,7 +515,7 @@ exports[`<RoomListHeaderView /> space menu should display the space menu 1`] = `
           class="_icon-button_1pz9o_8"
           data-kind="primary"
           data-state="closed"
-          id="radix-«r4b»"
+          id="radix-«r41»"
           role="button"
           style="--cpd-icon-button-size: 32px;"
           tabindex="0"
@@ -640,31 +545,6 @@ 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>
@@ -680,7 +560,6 @@ 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
@@ -696,18 +575,17 @@ exports[`<RoomListHeaderView /> space menu should not display the space menu 1`]
       <div
         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="«r4m»"
+          aria-labelledby="«r4a»"
           class="_icon-button_1pz9o_8"
           data-kind="primary"
           data-state="closed"
-          id="radix-«r4k»"
+          id="radix-«r48»"
           role="button"
           style="--cpd-icon-button-size: 32px;"
           tabindex="0"
@@ -733,11 +611,8 @@ exports[`<RoomListHeaderView /> space menu should not display the space menu 1`]
         </button>
       </div>
       <div
-        aria-controls="«r4t»"
-        aria-describedby="«r4t»"
         aria-haspopup="dialog"
         class="mx_RoomListHeaderView_ReleaseAnnouncementAnchor"
-        data-floating-ui-inert=""
       >
         <button
           aria-disabled="false"
@@ -747,7 +622,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-«r4v»"
+          id="radix-«r4j»"
           role="button"
           style="--cpd-icon-button-size: 32px;"
           tabindex="0"
@@ -777,31 +652,6 @@ 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__/SpacePanel-test.tsx.snap

@@ -3,8 +3,12 @@
 exports[`<SpacePanel /> should show all activated MetaSpaces in the correct order 1`] = `
 <DocumentFragment>
   <nav
+    aria-controls="«r2»"
+    aria-describedby="«r2»"
+    aria-haspopup="dialog"
     aria-label="Spaces"
     class="mx_SpacePanel collapsed newUi"
+    data-floating-ui-inert=""
   >
     <div
       class="mx_UserMenu"
@@ -233,11 +237,11 @@ exports[`<SpacePanel /> should show all activated MetaSpaces in the correct orde
         aria-expanded="false"
         aria-haspopup="menu"
         aria-label="Threads"
-        aria-labelledby="«r12»"
+        aria-labelledby="«r16»"
         class="_icon-button_1pz9o_8 mx_ThreadsActivityCentreButton"
         data-kind="primary"
         data-state="closed"
-        id="radix-«r10»"
+        id="radix-«r14»"
         role="button"
         style="--cpd-icon-button-size: 32px;"
         tabindex="0"
@@ -271,5 +275,30 @@ exports[`<SpacePanel /> should show all activated MetaSpaces in the correct orde
       tabindex="0"
     />
   </nav>
+  <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="«r1j»"
+    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"
+  />
 </DocumentFragment>
 `;

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

@@ -117,13 +117,13 @@ describe("ReleaseAnnouncementStore", () => {
 
     it("should listen to release announcement data changes in the store", async () => {
         const secondStore = new ReleaseAnnouncementStore();
-        expect(secondStore.getReleaseAnnouncement()).toBe("newRoomList_intro");
+        expect(secondStore.getReleaseAnnouncement()).toBe("newNotificationSounds");
 
         const promise = listenReleaseAnnouncementChanged();
         await secondStore.nextReleaseAnnouncement();
 
-        expect(await promise).toBe("newRoomList_sort");
-        expect(releaseAnnouncementStore.getReleaseAnnouncement()).toBe("newRoomList_sort");
+        expect(await promise).toBe("newRoomList_intro");
+        expect(releaseAnnouncementStore.getReleaseAnnouncement()).toBe("newRoomList_intro");
     });
 
     it("should return null when there are toasts on screen", async () => {