From 0a31f013354d0c70f4e7ea2435385a04b8ffb3e0 Mon Sep 17 00:00:00 2001 From: David Langley Date: Thu, 4 Sep 2025 15:45:00 +0100 Subject: [PATCH 1/7] Add tests for axe violations for the new room list --- playwright/e2e/left-panel/room-list-panel/room-list.spec.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/playwright/e2e/left-panel/room-list-panel/room-list.spec.ts b/playwright/e2e/left-panel/room-list-panel/room-list.spec.ts index 67910f61e80..0b6aa340293 100644 --- a/playwright/e2e/left-panel/room-list-panel/room-list.spec.ts +++ b/playwright/e2e/left-panel/room-list-panel/room-list.spec.ts @@ -41,7 +41,7 @@ test.describe("Room list", () => { } }); - test("should render the room list", { tag: "@screenshot" }, async ({ page, app, user }) => { + test("should render the room list", { tag: "@screenshot" }, async ({ page, app, user, axe }) => { const roomListView = getRoomList(page); await expect(roomListView.getByRole("option", { name: "Open room room29" })).toBeVisible(); await expect(roomListView).toMatchScreenshot("room-list.png"); @@ -54,6 +54,7 @@ test.describe("Room list", () => { // scrollListToBottom seems to leave the mouse hovered over the list, move it away. await page.getByRole("button", { name: "User menu" }).hover(); + await expect(axe).toHaveNoViolations(); await expect(roomListView).toMatchScreenshot("room-list-scrolled.png"); }); From d8a9d883ce4084cc85bca8793c86d6b0fef7dbc0 Mon Sep 17 00:00:00 2001 From: David Langley Date: Thu, 4 Sep 2025 16:01:46 +0100 Subject: [PATCH 2/7] axe doesn't like a ul/li with roles listbox/option. Changing to div/button as we have elsewhere like RoomListitemView. --- .../rooms/RoomListPanel/RoomListPrimaryFilters.tsx | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/src/components/views/rooms/RoomListPanel/RoomListPrimaryFilters.tsx b/src/components/views/rooms/RoomListPanel/RoomListPrimaryFilters.tsx index d094d9682f9..33e7976832b 100644 --- a/src/components/views/rooms/RoomListPanel/RoomListPrimaryFilters.tsx +++ b/src/components/views/rooms/RoomListPanel/RoomListPrimaryFilters.tsx @@ -52,7 +52,7 @@ export function RoomListPrimaryFilters({ vm }: RoomListPrimaryFiltersProps): JSX )} {filters.map((filter, i) => ( -
  • - filter.toggle()}> - {filter.name} - -
    • + filter.toggle()}> + {filter.name} + ))}     From a35f5cd6b0dd0a5746d96237915a344de445aa15 Mon Sep 17 00:00:00 2001 From: David Langley Date: Fri, 5 Sep 2025 10:06:47 +0100 Subject: [PATCH 3/7] Fix RoomListPrimaryFilters test --- .../RoomListPrimaryFilters-test.tsx | 2 +- .../RoomListPrimaryFilters-test.tsx.snap | 49 +++++++------------ 2 files changed, 18 insertions(+), 33 deletions(-) diff --git a/test/unit-tests/components/views/rooms/RoomListPanel/RoomListPrimaryFilters-test.tsx b/test/unit-tests/components/views/rooms/RoomListPanel/RoomListPrimaryFilters-test.tsx index 7128ecd1b8e..d7d4e8314f8 100644 --- a/test/unit-tests/components/views/rooms/RoomListPanel/RoomListPrimaryFilters-test.tsx +++ b/test/unit-tests/components/views/rooms/RoomListPanel/RoomListPrimaryFilters-test.tsx @@ -63,7 +63,7 @@ describe("", () => { render(); // Click on an inactive filter - await user.click(screen.getByRole("button", { name: "People" })); + await user.click(screen.getByRole("option", { name: "People" })); // Check that the toggle function was called expect(filterToggleMocks[0]).toHaveBeenCalledTimes(1); diff --git a/test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListPrimaryFilters-test.tsx.snap b/test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListPrimaryFilters-test.tsx.snap index b2a1602e10d..d50c98d62e5 100644 --- a/test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListPrimaryFilters-test.tsx.snap +++ b/test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListPrimaryFilters-test.tsx.snap @@ -7,56 +7,41 @@ exports[` should renders all filters correctly 1`] = ` data-testid="primary-filters" style="--mx-flex-display: flex; --mx-flex-direction: row-reverse; --mx-flex-align: start; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x); --mx-flex-wrap: nowrap;" > -
      -
    • - -
      • -
    • + -
      • -
    • + -
      • -
    + Unreads + + `; From 9fd2d1bec9ddf862e1716a559ed1e6e6c8a8bc27 Mon Sep 17 00:00:00 2001 From: David Baker Date: Tue, 9 Sep 2025 15:06:55 +0100 Subject: [PATCH 4/7] Justify the items in the primary filter container to get the dropdown button on the right again --- .../views/rooms/RoomListPanel/RoomListPrimaryFilters.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/views/rooms/RoomListPanel/RoomListPrimaryFilters.tsx b/src/components/views/rooms/RoomListPanel/RoomListPrimaryFilters.tsx index 33e7976832b..a14a39cdc1b 100644 --- a/src/components/views/rooms/RoomListPanel/RoomListPrimaryFilters.tsx +++ b/src/components/views/rooms/RoomListPanel/RoomListPrimaryFilters.tsx @@ -36,6 +36,7 @@ export function RoomListPrimaryFilters({ vm }: RoomListPrimaryFiltersProps): JSX data-testid="primary-filters" gap="var(--cpd-space-3x)" direction="row-reverse" + justify="space-between" > {displayChevron && ( Date: Tue, 9 Sep 2025 15:17:38 +0100 Subject: [PATCH 5/7] Update snapshot --- .../__snapshots__/RoomListPrimaryFilters-test.tsx.snap | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListPrimaryFilters-test.tsx.snap b/test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListPrimaryFilters-test.tsx.snap index d50c98d62e5..601a3eb325d 100644 --- a/test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListPrimaryFilters-test.tsx.snap +++ b/test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomListPrimaryFilters-test.tsx.snap @@ -5,7 +5,7 @@ exports[` should renders all filters correctly 1`] = `
    Date: Tue, 9 Sep 2025 16:31:56 +0100 Subject: [PATCH 6/7] Make the room list itself focusable As the comment said, there was no real reason it needed to be, except that there was because of axe. Probably having the children focusable would be better, but Virtuoso wraps them in more divs which doesn't satisfy axe's requirements since those inner divs are not the scrollable ones. I can't see a better option than this right now. --- src/components/utils/ListView.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/components/utils/ListView.tsx b/src/components/utils/ListView.tsx index b8425b366f9..235a706a550 100644 --- a/src/components/utils/ListView.tsx +++ b/src/components/utils/ListView.tsx @@ -285,7 +285,10 @@ export function ListView(props: IListViewProps Date: Tue, 9 Sep 2025 16:43:52 +0100 Subject: [PATCH 7/7] Update snapshot --- .../rooms/RoomListPanel/__snapshots__/RoomList-test.tsx.snap | 1 + 1 file changed, 1 insertion(+) diff --git a/test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomList-test.tsx.snap b/test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomList-test.tsx.snap index fcbaa9110e0..078950c3606 100644 --- a/test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomList-test.tsx.snap +++ b/test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomList-test.tsx.snap @@ -9,6 +9,7 @@ exports[` should render a room list 1`] = ` data-virtuoso-scroller="true" role="listbox" style="height: 100%; outline: none; overflow-y: auto; position: relative;" + tabindex="0" >