nikrozman/element-web
1
0
Fork 0
Code Issues Actions 3 Packages Projects Releases Wiki Activity

fix(room list): move aria-setsize and aria-posinset on room list cell

Browse Source
This commit is contained in:
Florian Duros
2025-03-07 11:48:24 +01:00
parent 14d062af46
commit e86256f845
4 changed files with 28 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/views/rooms/RoomListPanel/RoomList.tsx
View File

@@ -26,7 +26,14 @@ interface RoomListProps {
export function RoomList({ vm: { rooms, openRoom } }: RoomListProps): JSX.Element {
const roomRendererMemoized = useCallback(
({ key, index, style }: ListRowProps) => (
<RoomListCell room={rooms[index]} key={key} style={style} onClick={() => openRoom(rooms[index].roomId)} />
<RoomListCell
room={rooms[index]}
key={key}
style={style}
aria-setsize={rooms.length}
aria-posinset={index + 1}
onClick={() => openRoom(rooms[index].roomId)}
/>
),
[rooms, openRoom],
);
@@ -73,9 +80,6 @@ function useAccessibleList(rooms: Room[]): RefObject<HTMLDivElement> {
const list = ref.current?.querySelector('[role="listbox"]');
if (!list) return;
// The list is virtualized so the number of items in the dom is not the same as the number of rooms
list.setAttribute("aria-setsize", `${rooms.length}`);
// Determine if a node is a row node
const isRowNode = (node: HTMLElement): boolean => node.getAttribute("role") === "row";

2
test/unit-tests/components/views/rooms/RoomListPanel/RoomList-test.tsx
View File

@@ -44,8 +44,6 @@ describe("<RoomList />", () => {
it("should render a room list", async () => {
const { asFragment } = await renderList();
expect(asFragment()).toMatchSnapshot();
expect(screen.getByRole("listbox").getAttribute("aria-setsize")).toBe(`${vm.rooms.length}`);
});
it("should open the room", async () => {

21
test/unit-tests/components/views/rooms/RoomListPanel/__snapshots__/RoomList-test.tsx.snap
View File

@@ -12,7 +12,6 @@ exports[`<RoomList /> should render a room list 1`] = `
<div
aria-label="Room list"
aria-readonly="true"
aria-setsize="10"
class="ReactVirtualized__Grid ReactVirtualized__List mx_RoomList_List"
role="listbox"
style="box-sizing: border-box; direction: ltr; height: 1500px; position: relative; width: 1500px; will-change: transform; overflow-x: hidden; overflow-y: hidden;"
@@ -24,7 +23,9 @@ exports[`<RoomList /> should render a room list 1`] = `
>
<button
aria-label="Open room room0"
aria-posinset="1"
aria-selected="false"
aria-setsize="10"
class="mx_RoomListCell"
role="option"
style="height: 48px; left: 0px; position: absolute; top: 0px; width: 100%;"
@@ -71,7 +72,9 @@ exports[`<RoomList /> should render a room list 1`] = `
</button>
<button
aria-label="Open room room1"
aria-posinset="2"
aria-selected="false"
aria-setsize="10"
class="mx_RoomListCell"
role="option"
style="height: 48px; left: 0px; position: absolute; top: 48px; width: 100%;"
@@ -118,7 +121,9 @@ exports[`<RoomList /> should render a room list 1`] = `
</button>
<button
aria-label="Open room room2"
aria-posinset="3"
aria-selected="false"
aria-setsize="10"
class="mx_RoomListCell"
role="option"
style="height: 48px; left: 0px; position: absolute; top: 96px; width: 100%;"
@@ -165,7 +170,9 @@ exports[`<RoomList /> should render a room list 1`] = `
</button>
<button
aria-label="Open room room3"
aria-posinset="4"
aria-selected="false"
aria-setsize="10"
class="mx_RoomListCell"
role="option"
style="height: 48px; left: 0px; position: absolute; top: 144px; width: 100%;"
@@ -212,7 +219,9 @@ exports[`<RoomList /> should render a room list 1`] = `
</button>
<button
aria-label="Open room room4"
aria-posinset="5"
aria-selected="false"
aria-setsize="10"
class="mx_RoomListCell"
role="option"
style="height: 48px; left: 0px; position: absolute; top: 192px; width: 100%;"
@@ -259,7 +268,9 @@ exports[`<RoomList /> should render a room list 1`] = `
</button>
<button
aria-label="Open room room5"
aria-posinset="6"
aria-selected="false"
aria-setsize="10"
class="mx_RoomListCell"
role="option"
style="height: 48px; left: 0px; position: absolute; top: 240px; width: 100%;"
@@ -306,7 +317,9 @@ exports[`<RoomList /> should render a room list 1`] = `
</button>
<button
aria-label="Open room room6"
aria-posinset="7"
aria-selected="false"
aria-setsize="10"
class="mx_RoomListCell"
role="option"
style="height: 48px; left: 0px; position: absolute; top: 288px; width: 100%;"
@@ -353,7 +366,9 @@ exports[`<RoomList /> should render a room list 1`] = `
</button>
<button
aria-label="Open room room7"
aria-posinset="8"
aria-selected="false"
aria-setsize="10"
class="mx_RoomListCell"
role="option"
style="height: 48px; left: 0px; position: absolute; top: 336px; width: 100%;"
@@ -400,7 +415,9 @@ exports[`<RoomList /> should render a room list 1`] = `
</button>
<button
aria-label="Open room room8"
aria-posinset="9"
aria-selected="false"
aria-setsize="10"
class="mx_RoomListCell"
role="option"
style="height: 48px; left: 0px; position: absolute; top: 384px; width: 100%;"
@@ -447,7 +464,9 @@ exports[`<RoomList /> should render a room list 1`] = `
</button>
<button
aria-label="Open room room9"
aria-posinset="10"
aria-selected="false"
aria-setsize="10"
class="mx_RoomListCell"
role="option"
style="height: 48px; left: 0px; position: absolute; top: 432px; width: 100%;"

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

@@ -34,7 +34,6 @@ exports[`<RoomListPanel /> should not render the RoomListSearch component when U
<div
aria-label="Room list"
aria-readonly="true"
aria-setsize="0"
class="ReactVirtualized__Grid ReactVirtualized__List mx_RoomList_List"
role="listbox"
style="box-sizing: border-box; direction: ltr; height: 0px; position: relative; width: 0px; will-change: transform; overflow-x: hidden; overflow-y: hidden;"
@@ -185,7 +184,6 @@ exports[`<RoomListPanel /> should render the RoomListSearch component when UICom
<div
aria-label="Room list"
aria-readonly="true"
aria-setsize="0"
class="ReactVirtualized__Grid ReactVirtualized__List mx_RoomList_List"
role="listbox"
style="box-sizing: border-box; direction: ltr; height: 0px; position: relative; width: 0px; will-change: transform; overflow-x: hidden; overflow-y: hidden;"