mirrors/element-web
1
0
Fork 0
mirror of https://github.com/vector-im/element-web.git synced 2025-11-29 14:31:22 +01:00
Code Issues Projects Releases Wiki Activity

Adds tooltip for compose menu (#31122)

Browse Source 
* Adds tooltip for compose menu button

* fix tests

* prettier

* tweak aria attributes
This commit is contained in:
byteplow 2025-11-21 17:42:44 +01:00 committed by GitHub
parent b679693702
commit cdedcc0b5a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
14 changed files with 72 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
playwright/e2e/crypto/backups-mas.spec.ts
View File

@ -49,7 +49,10 @@ test.describe("Encryption state after registration", () => {
"Pa$sW0rD!",
);
await page.getByRole("navigation", { name: "Room list" }).getByRole("button", { name: "Add" }).click();
await page
.getByRole("navigation", { name: "Room list" })
.getByRole("button", { name: "New conversation" })
.click();
await page.getByRole("menuitem", { name: "New room" }).click();
await page.getByRole("textbox", { name: "Name" }).fill("test room");
await page.getByRole("button", { name: "Create room" }).click();
@ -78,7 +81,10 @@ test.describe("Key backup reset from elsewhere", () => {
await page.getByRole("button", { name: "Continue" }).click();
await registerAccountMas(page, mailpitClient, testUsername, `${testUsername}@email.com`, testPassword);
await page.getByRole("navigation", { name: "Room list" }).getByRole("button", { name: "Add" }).click();
await page
.getByRole("navigation", { name: "Room list" })
.getByRole("button", { name: "New conversation" })
.click();
await page.getByRole("menuitem", { name: "New room" }).click();
await page.getByRole("textbox", { name: "Name" }).fill("test room");
await page.getByRole("button", { name: "Create room" }).click();

2
playwright/e2e/crypto/crypto.spec.ts
View File

@ -21,7 +21,7 @@ const checkDMRoom = async (page: Page) => {
};
const startDMWithBob = async (page: Page, bob: Bot) => {
await page.getByRole("navigation", { name: "Room list" }).getByRole("button", { name: "Add" }).click();
await page.getByRole("navigation", { name: "Room list" }).getByRole("button", { name: "New conversation" }).click();
await page.getByRole("menuitem", { name: "Start chat" }).click();
await page.getByTestId("invite-dialog-input").fill(bob.credentials.userId);
await page.getByRole("option", { name: bob.credentials.displayName }).click();

10
playwright/e2e/crypto/toasts.spec.ts
View File

@ -23,7 +23,10 @@ test.describe("Key storage out of sync toast", () => {
await deleteCachedSecrets(page);
// We won't be prompted for crypto setup unless we have an e2e room, so make one
await page.getByRole("navigation", { name: "Room list" }).getByRole("button", { name: "Add" }).click();
await page
.getByRole("navigation", { name: "Room list" })
.getByRole("button", { name: "New conversation" })
.click();
await page.getByRole("menuitem", { name: "New room" }).click();
await page.getByRole("textbox", { name: "Name" }).fill("Test room");
await page.getByRole("button", { name: "Create room" }).click();
@ -68,7 +71,10 @@ test.describe("'Turn on key storage' toast", () => {
await logIntoElementAndVerify(page, credentials, recoveryKey.encodedPrivateKey);
// We won't be prompted for crypto setup unless we have an e2e room, so make one
await page.getByRole("navigation", { name: "Room list" }).getByRole("button", { name: "Add" }).click();
await page
.getByRole("navigation", { name: "Room list" })
.getByRole("button", { name: "New conversation" })
.click();
await page.getByRole("menuitem", { name: "New room" }).click();
await page.getByRole("textbox", { name: "Name" }).fill("Test room");
await page.getByRole("button", { name: "Create room" }).click();

2
playwright/e2e/crypto/utils.ts
View File

@ -438,7 +438,7 @@ export async function sendMessageInCurrentRoom(page: Page, message: string): Pro
* @param isEncrypted - Whether the room should be encrypted
*/
export async function createRoom(page: Page, roomName: string, isEncrypted: boolean): Promise<void> {
await page.getByRole("navigation", { name: "Room list" }).getByRole("button", { name: "Add" }).click();
await page.getByRole("navigation", { name: "Room list" }).getByRole("button", { name: "New conversation" }).click();
await page.getByRole("menuitem", { name: "New room" }).click();
const dialog = page.locator(".mx_Dialog");

5
playwright/e2e/invite/invite-dialog.spec.ts
View File

@ -73,7 +73,10 @@ test.describe("Invite dialog", function () {
"should support inviting a user to Direct Messages",
{ tag: "@screenshot" },
async ({ page, app, user, bot }) => {
await page.getByRole("navigation", { name: "Room list" }).getByRole("button", { name: "Add" }).click();
await page
.getByRole("navigation", { name: "Room list" })
.getByRole("button", { name: "New conversation" })
.click();
await page.getByRole("menuitem", { name: "Start chat" }).click();
const other = page.locator(".mx_InviteDialog_other");

4
playwright/e2e/left-panel/room-list-panel/room-list-header.spec.ts
View File

@ -30,7 +30,7 @@ test.describe("Header section of the room list", () => {
const roomListHeader = getHeaderSection(page);
await expect(roomListHeader).toMatchScreenshot("room-list-header.png");
const composeMenu = roomListHeader.getByRole("button", { name: "Add" });
const composeMenu = roomListHeader.getByRole("button", { name: "New conversation" });
await composeMenu.click();
await expect(page.getByRole("menu")).toMatchScreenshot("room-list-header-compose-menu.png");
@ -55,7 +55,7 @@ test.describe("Header section of the room list", () => {
await expect(roomListHeader).toMatchScreenshot("room-list-space-header.png");
await expect(roomListHeader.getByRole("heading", { name: "MySpace" })).toBeVisible();
await expect(roomListHeader.getByRole("button", { name: "Add" })).toBeVisible();
await expect(roomListHeader.getByRole("button", { name: "New conversation" })).toBeVisible();
const spaceMenu = roomListHeader.getByRole("button", { name: "Open space menu" });
await spaceMenu.click();

5
playwright/e2e/left-panel/room-list-panel/room-list.spec.ts
View File

@ -315,7 +315,10 @@ test.describe("Room list", () => {
});
test("should be a video room", { tag: "@screenshot" }, async ({ page, app, user }) => {
await page.getByRole("navigation", { name: "Room list" }).getByRole("button", { name: "Add" }).click();
await page
.getByRole("navigation", { name: "Room list" })
.getByRole("button", { name: "New conversation" })
.click();
await page.getByRole("menuitem", { name: "New video room" }).click();
await page.getByRole("textbox", { name: "Name" }).fill("video room");
await page.getByRole("button", { name: "Create video room" }).click();

2
playwright/e2e/room/create-room.spec.ts
View File

@ -45,7 +45,7 @@ test.describe("Create Room", () => {
);
test("should allow us to start a chat and show encryption state", async ({ page, user, app }) => {
await page.getByRole("button", { name: "Add", exact: true }).click();
await page.getByRole("button", { name: "New conversation", exact: true }).click();
await page.getByRole("menuitem", { name: "Start chat" }).click();
await page.getByTestId("invite-dialog-input").fill(user.userId);

5
playwright/e2e/voip/element-call.spec.ts
View File

@ -398,7 +398,10 @@ test.describe("Element Call", () => {
},
});
test("should be able to create and join a video room", async ({ page, user }) => {
await page.getByRole("navigation", { name: "Room list" }).getByRole("button", { name: "Add" }).click();
await page
.getByRole("navigation", { name: "Room list" })
.getByRole("button", { name: "New conversation" })
.click();
await page.getByRole("menuitem", { name: "New video room" }).click();
await page.getByRole("textbox", { name: "Name" }).fill("Test room");
await page.getByRole("button", { name: "Create video room" }).click();

5
playwright/pages/ElementAppPage.ts
View File

@ -53,7 +53,10 @@ export class ElementAppPage {
*/
public async openCreateRoomDialog(roomKindname: "New room" | "New video room" = "New room"): Promise<Locator> {
await this.page.getByRole("navigation", { name: "Room list" }).getByRole("button", { name: "Add" }).click();
await this.page
.getByRole("navigation", { name: "Room list" })
.getByRole("button", { name: "New conversation" })
.click();
await this.page.getByRole("menuitem", { name: roomKindname }).click();
return this.page.locator(".mx_CreateRoomDialog");
}

8
src/components/views/rooms/RoomListPanel/RoomListHeaderView.tsx
View File

@ -70,10 +70,10 @@ export function RoomListHeaderView(): JSX.Element {
<ComposeMenu vm={vm} />
) : (
<IconButton
aria-label={_t("action|start_chat")}
onClick={(e) => vm.createChatRoom(e.nativeEvent)}
tooltip={_t("action|new_conversation")}
>
<ComposeIcon color="var(--cpd-color-icon-secondary)" />
<ComposeIcon color="var(--cpd-color-icon-secondary)" aria-hidden />
</IconButton>
)}
</div>
@ -163,8 +163,8 @@ function ComposeMenu({ vm }: ComposeMenuProps): JSX.Element {
side="right"
align="start"
trigger={
<IconButton aria-label={_t("action|add")}>
<ComposeIcon color="var(--cpd-color-icon-secondary)" />
<IconButton tooltip={_t("action|new_conversation")}>
<ComposeIcon color="var(--cpd-color-icon-secondary)" aria-hidden />
</IconButton>
}
>

1
src/i18n/strings/en_EN.json
View File

@ -93,6 +93,7 @@
"maximise": "Maximise",
"mention": "Mention",
"minimise": "Minimise",
"new_conversation": "New conversation",
"new_room": "New room",
"new_video_room": "New video room",
"next": "Next",

12
test/unit-tests/components/views/rooms/RoomListPanel/RoomListHeaderView-test.tsx
View File

@ -57,7 +57,7 @@ describe("<RoomListHeaderView />", () => {
mocked(useRoomListHeaderViewModel).mockReturnValue(defaultValue);
const { asFragment } = render(<RoomListHeaderView />);
expect(screen.queryByRole("button", { name: "Add" })).toBeInTheDocument();
expect(screen.queryByRole("button", { name: "New conversation" })).toBeInTheDocument();
expect(asFragment()).toMatchSnapshot();
});
@ -66,10 +66,10 @@ describe("<RoomListHeaderView />", () => {
mocked(useRoomListHeaderViewModel).mockReturnValue({ ...defaultValue, displayComposeMenu: false });
const { asFragment } = render(<RoomListHeaderView />);
expect(screen.queryByRole("button", { name: "Add" })).toBeNull();
expect(screen.queryByRole("button", { name: "New conversation" })).toBeInTheDocument();
expect(asFragment()).toMatchSnapshot();
await user.click(screen.getByRole("button", { name: "Start chat" }));
await user.click(screen.getByRole("button", { name: "New conversation" }));
expect(defaultValue.createChatRoom).toHaveBeenCalled();
});
@ -77,7 +77,7 @@ describe("<RoomListHeaderView />", () => {
const user = userEvent.setup();
mocked(useRoomListHeaderViewModel).mockReturnValue(defaultValue);
render(<RoomListHeaderView />);
const openMenu = screen.getByRole("button", { name: "Add" });
const openMenu = screen.getByRole("button", { name: "New conversation" });
await user.click(openMenu);
await user.click(screen.getByRole("menuitem", { name: "Start chat" }));
@ -101,7 +101,7 @@ describe("<RoomListHeaderView />", () => {
});
render(<RoomListHeaderView />);
await user.click(screen.getByRole("button", { name: "Add" }));
await user.click(screen.getByRole("button", { name: "New conversation" }));
expect(screen.queryByRole("menuitem", { name: "New room" })).toBeNull();
expect(screen.queryByRole("menuitem", { name: "New video room" })).toBeNull();
@ -157,7 +157,7 @@ describe("<RoomListHeaderView />", () => {
});
render(<RoomListHeaderView />);
await user.click(screen.getByRole("button", { name: "Add" }));
await user.click(screen.getByRole("button", { name: "Open space menu" }));
expect(screen.queryByRole("menuitem", { name: "Invite" })).toBeNull();
expect(screen.queryByRole("menuitem", { name: "Space Setting" })).toBeNull();

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

@ -25,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-_r_k_"
id="radix-_r_q_"
role="button"
style="--cpd-icon-button-size: 20px;"
tabindex="0"
@ -63,11 +63,11 @@ exports[`<RoomListHeaderView /> compose menu should display the compose menu 1`]
aria-expanded="false"
aria-haspopup="menu"
aria-label="Room Options"
aria-labelledby="_r_s_"
aria-labelledby="_r_12_"
class="_icon-button_1pz9o_8"
data-kind="primary"
data-state="closed"
id="radix-_r_q_"
id="radix-_r_10_"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
@ -100,11 +100,11 @@ exports[`<RoomListHeaderView /> compose menu should display the compose menu 1`]
aria-disabled="false"
aria-expanded="false"
aria-haspopup="menu"
aria-label="Add"
aria-labelledby="_r_1d_"
class="_icon-button_1pz9o_8"
data-kind="primary"
data-state="closed"
id="radix-_r_15_"
id="radix-_r_1b_"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
@ -115,6 +115,7 @@ exports[`<RoomListHeaderView /> compose menu should display the compose menu 1`]
style="--cpd-icon-button-size: 100%;"
>
<svg
aria-hidden="true"
color="var(--cpd-color-icon-secondary)"
fill="currentColor"
height="1em"
@ -164,7 +165,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-_r_18_"
id="radix-_r_1k_"
role="button"
style="--cpd-icon-button-size: 20px;"
tabindex="0"
@ -202,11 +203,11 @@ exports[`<RoomListHeaderView /> compose menu should not display the compose menu
aria-expanded="false"
aria-haspopup="menu"
aria-label="Room Options"
aria-labelledby="_r_1g_"
aria-labelledby="_r_1s_"
class="_icon-button_1pz9o_8"
data-kind="primary"
data-state="closed"
id="radix-_r_1e_"
id="radix-_r_1q_"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
@ -236,7 +237,7 @@ exports[`<RoomListHeaderView /> compose menu should not display the compose menu
class="mx_RoomListHeaderView_ReleaseAnnouncementAnchor"
>
<button
aria-label="Start chat"
aria-labelledby="_r_25_"
class="_icon-button_1pz9o_8"
data-kind="primary"
role="button"
@ -248,6 +249,7 @@ exports[`<RoomListHeaderView /> compose menu should not display the compose menu
style="--cpd-icon-button-size: 100%;"
>
<svg
aria-hidden="true"
color="var(--cpd-color-icon-secondary)"
fill="currentColor"
height="1em"
@ -372,7 +374,7 @@ exports[`<RoomListHeaderView /> should render 'room options' button 1`] = `
aria-disabled="false"
aria-expanded="false"
aria-haspopup="menu"
aria-label="Add"
aria-labelledby="_r_j_"
class="_icon-button_1pz9o_8"
data-kind="primary"
data-state="closed"
@ -387,6 +389,7 @@ exports[`<RoomListHeaderView /> should render 'room options' button 1`] = `
style="--cpd-icon-button-size: 100%;"
>
<svg
aria-hidden="true"
color="var(--cpd-color-icon-secondary)"
fill="currentColor"
height="1em"
@ -436,7 +439,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-_r_3g_"
id="radix-_r_4e_"
role="button"
style="--cpd-icon-button-size: 20px;"
tabindex="0"
@ -474,11 +477,11 @@ exports[`<RoomListHeaderView /> space menu should display the space menu 1`] = `
aria-expanded="false"
aria-haspopup="menu"
aria-label="Room Options"
aria-labelledby="_r_3o_"
aria-labelledby="_r_4m_"
class="_icon-button_1pz9o_8"
data-kind="primary"
data-state="closed"
id="radix-_r_3m_"
id="radix-_r_4k_"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
@ -511,11 +514,11 @@ exports[`<RoomListHeaderView /> space menu should display the space menu 1`] = `
aria-disabled="false"
aria-expanded="false"
aria-haspopup="menu"
aria-label="Add"
aria-labelledby="_r_51_"
class="_icon-button_1pz9o_8"
data-kind="primary"
data-state="closed"
id="radix-_r_41_"
id="radix-_r_4v_"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
@ -526,6 +529,7 @@ exports[`<RoomListHeaderView /> space menu should display the space menu 1`] = `
style="--cpd-icon-button-size: 100%;"
>
<svg
aria-hidden="true"
color="var(--cpd-color-icon-secondary)"
fill="currentColor"
height="1em"
@ -581,11 +585,11 @@ exports[`<RoomListHeaderView /> space menu should not display the space menu 1`]
aria-expanded="false"
aria-haspopup="menu"
aria-label="Room Options"
aria-labelledby="_r_4a_"
aria-labelledby="_r_5e_"
class="_icon-button_1pz9o_8"
data-kind="primary"
data-state="closed"
id="radix-_r_48_"
id="radix-_r_5c_"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
@ -618,11 +622,11 @@ exports[`<RoomListHeaderView /> space menu should not display the space menu 1`]
aria-disabled="false"
aria-expanded="false"
aria-haspopup="menu"
aria-label="Add"
aria-labelledby="_r_5p_"
class="_icon-button_1pz9o_8"
data-kind="primary"
data-state="closed"
id="radix-_r_4j_"
id="radix-_r_5n_"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
@ -633,6 +637,7 @@ exports[`<RoomListHeaderView /> space menu should not display the space menu 1`]
style="--cpd-icon-button-size: 100%;"
>
<svg
aria-hidden="true"
color="var(--cpd-color-icon-secondary)"
fill="currentColor"
height="1em"