mirrors/element-web
1
0
Fork 0
mirror of https://github.com/vector-im/element-web.git synced 2025-12-08 19:01:43 +01:00
Code Issues Projects Releases Wiki Activity

Room list: display the menu option on the room list item when clicked/opened (#31380)

Browse Source 
* fix: display the menu option on the room list item when clicked/opened

Fix #31366
`onBlur` was called when the room is opened, the focus is moved to the
composr. The hover state was removed.
The hover state is diplayed when `ìsFocused=true` so the keyboard
navigation is not impacted

* test: update room list e2e tests

* test: update marked as unread state
This commit is contained in:
Florian Duros 2025-12-02 11:24:11 +01:00 committed by GitHub
parent 4a934b105b
commit 6228edcd67
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 9 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -299,9 +299,7 @@ test.describe("Room list", () => {
const publicRoom = roomListView.getByRole("option", { name: "low priority room" }); const publicRoom = roomListView.getByRole("option", { name: "low priority room" });
// Make room low priority // Make room low priority
await publicRoom.hover(); await publicRoom.click({ button: "right" });
const roomItemMenu = publicRoom.getByRole("button", { name: "More Options" });
await roomItemMenu.click();
await page.getByRole("menuitemcheckbox", { name: "Low priority" }).click(); await page.getByRole("menuitemcheckbox", { name: "Low priority" }).click();
// Should have low priority decoration // Should have low priority decoration
@ -309,8 +307,8 @@ test.describe("Room list", () => {
"This is a low priority room", "This is a low priority room",
); );
// focus the user menu to avoid to have hover decoration // focus the header to avoid to have hover decoration
await page.getByRole("button", { name: "User menu" }).focus(); await page.getByTestId("room-list-header").click();
await expect(publicRoom).toMatchScreenshot("room-list-item-low-priority.png"); await expect(publicRoom).toMatchScreenshot("room-list-item-low-priority.png");
}); });
@ -450,12 +448,11 @@ test.describe("Room list", () => {
await bot.joinRoom(roomId); await bot.joinRoom(roomId);
const room = roomListView.getByRole("option", { name: "mark as unread" }); const room = roomListView.getByRole("option", { name: "mark as unread" });
await room.hover(); await room.click({ button: "right" });
await room.getByRole("button", { name: "More Options" }).click();
await page.getByRole("menuitem", { name: "mark as unread" }).click(); await page.getByRole("menuitem", { name: "mark as unread" }).click();
// focus the user menu to avoid to have hover decoration // focus the header to avoid to have hover decoration
await page.getByRole("button", { name: "User menu" }).focus(); await page.getByTestId("room-list-header").click();
await expect(room).toMatchScreenshot("room-list-item-mark-as-unread.png"); await expect(room).toMatchScreenshot("room-list-item-mark-as-unread.png");
}); });

7
playwright/e2e/room_options/marked_unread.spec.ts
View File

@ -47,12 +47,11 @@ test.describe("Mark as Unread", () => {
await page.goto("/#/room/" + dummyRoomId); await page.goto("/#/room/" + dummyRoomId);
const roomTile = page.getByLabel(TEST_ROOM_NAME); const roomTile = page.getByLabel(TEST_ROOM_NAME);
await roomTile.focus(); await roomTile.click({ button: "right" });
await roomTile.getByRole("button", { name: "More Options" }).click();
await page.getByRole("menuitem", { name: "Mark as unread" }).click(); await page.getByRole("menuitem", { name: "Mark as unread" }).click();
// focus the user menu to avoid to have hover decoration // focus another room to make the notification decoration appear (room options are display on hover)
await page.getByRole("button", { name: "User menu" }).focus(); await page.getByRole("option", { name: "Open room Room of no consequence" }).click();
await expect(roomTile.getByTestId("notification-decoration")).toBeVisible(); await expect(roomTile.getByTestId("notification-decoration")).toBeVisible();
}); });

BIN
playwright/snapshots/left-panel/room-list-panel/room-list.spec.ts/room-list-item-low-priority-linux.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.6 KiB

After

Width:  |  Height:  |  Size: 2.6 KiB

1
src/components/views/rooms/RoomListPanel/RoomListItemView.tsx
View File

@ -98,7 +98,6 @@ export const RoomListItemView = memo(function RoomListItemView({
onFocus={(e: React.FocusEvent<HTMLButtonElement>) => onFocus(room, e)} onFocus={(e: React.FocusEvent<HTMLButtonElement>) => onFocus(room, e)}
onMouseOver={() => setHover(true)} onMouseOver={() => setHover(true)}
onMouseOut={() => setHover(false)} onMouseOut={() => setHover(false)}
onBlur={() => setHover(false)}
tabIndex={isFocused ? 0 : -1} tabIndex={isFocused ? 0 : -1}
{...props} {...props}
> >