nikrozman/element-web
1
0
Fork 0
Code Issues Actions 3 Packages 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
14 changed files with 72 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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"