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
This commit is contained in:
David Langley
2025-09-29 16:06:15 +01:00
committed by GitHub
parent 1415354f2a
commit 5014f0b411
9 changed files with 137 additions and 230 deletions

View File

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

View File

@@ -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>

View File

@@ -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>
`;

View File

@@ -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 () => {