Use nav for new room list and label sections (#30134)

* Use nav for new room list and label sections

The old room list had a nav element but it was missed in the new one,
so add it and albel the sections. Also remove the test ID and use
this instead.

* Update snapshots

* Use the function we define above

playwright/e2e/left-panel/room-list-panel/room-list-filter-sort.spec.ts

@@ -326,7 +326,9 @@ test.describe("Room list filters and sort", () => {
             async ({ page, app, user }) => {
                 const emptyRoomList = getEmptyRoomList(page);
                 await expect(emptyRoomList).toMatchScreenshot("default-empty-room-list.png");
-                await expect(page.getByTestId("room-list-panel")).toMatchScreenshot("room-panel-empty-room-list.png");
+                await expect(page.getByRole("navigation", { name: "Room list" })).toMatchScreenshot(
+                    "room-panel-empty-room-list.png",
+                );
             },
         );
 

playwright/e2e/left-panel/room-list-panel/room-list-panel.spec.ts

@@ -19,7 +19,7 @@ test.describe("Room list panel", () => {
      * @param page
      */
     function getRoomListView(page: Page) {
-        return page.getByTestId("room-list-panel");
+        return page.getByRole("navigation", { name: "Room list" });
     }
 
     test.beforeEach(async ({ page, app, user }) => {
@@ -44,7 +44,7 @@ test.describe("Room list panel", () => {
 
     test("should respond to small screen sizes", { tag: "@screenshot" }, async ({ page }) => {
         await page.setViewportSize({ width: 575, height: 600 });
-        const roomListPanel = page.getByTestId("room-list-panel");
+        const roomListPanel = getRoomListView(page);
         await expect(roomListPanel).toMatchScreenshot("room-list-panel-smallscreen.png");
     });
 });

playwright/e2e/left-panel/room-list-panel/room-list.spec.ts

@@ -278,7 +278,7 @@ test.describe("Room list", () => {
         });
 
         test("should be a video room", { tag: "@screenshot" }, async ({ page, app, user }) => {
-            await page.getByTestId("room-list-panel").getByRole("button", { name: "Add" }).click();
+            await page.getByRole("navigation", { name: "Room list" }).getByRole("button", { name: "Add" }).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();

src/components/structures/RoomView.tsx

@@ -315,7 +315,7 @@ function LocalRoomView(props: LocalRoomViewProps): ReactElement {
         <div className="mx_RoomView mx_RoomView--local">
             <ErrorBoundary>
                 <RoomHeader room={room} />
-                <main className="mx_RoomView_body" ref={props.roomView}>
+                <main className="mx_RoomView_body" ref={props.roomView} aria-label={_t("room|room_content")}>
                     <FileDropTarget parent={props.roomView.current} onFileDrop={props.onFileDrop} />
                     <div className="mx_RoomView_timeline">
                         <ScrollPanel className="mx_RoomView_messagePanel" resizeNotifier={props.resizeNotifier}>

src/components/views/rooms/RoomListPanel/RoomListPanel.tsx

@@ -13,6 +13,7 @@ import { RoomListSearch } from "./RoomListSearch";
 import { RoomListHeaderView } from "./RoomListHeaderView";
 import { RoomListView } from "./RoomListView";
 import { Flex } from "../../../utils/Flex";
+import { _t } from "../../../../languageHandler";
 
 type RoomListPanelProps = {
     /**
@@ -30,11 +31,11 @@ export const RoomListPanel: React.FC<RoomListPanelProps> = ({ activeSpace }) =>
 
     return (
         <Flex
-            as="section"
+            as="nav"
             className="mx_RoomListPanel"
-            data-testid="room-list-panel"
             direction="column"
             align="stretch"
+            aria-label={_t("room_list|list_title")}
         >
             {displayRoomSearch && <RoomListSearch activeSpace={activeSpace} />}
             <RoomListHeaderView />

src/i18n/strings/en_EN.json

@@ -2066,6 +2066,7 @@
         "read_topic": "Click to read topic",
         "rejecting": "Rejecting invite…",
         "rejoin_button": "Re-join",
+        "room_content": "Room content",
         "room_is_low_priority": "This is a low priority room",
         "search": {
             "all_rooms_button": "Search all rooms",

test/unit-tests/components/structures/__snapshots__/RoomView-test.tsx.snap

@@ -403,6 +403,7 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
       </div>
     </header>
     <main
+      aria-label="Room content"
       class="mx_RoomView_body"
     >
       <div
@@ -703,6 +704,7 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
       </div>
     </header>
     <main
+      aria-label="Room content"
       class="mx_RoomView_body"
     >
       <div
@@ -1080,6 +1082,7 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
       </div>
     </header>
     <main
+      aria-label="Room content"
       class="mx_RoomView_body"
     >
       <div