Fix tests and lint

Fix html export when feature_jump_to_date is enabled
[create-pull-request] automated change (#30825 )
2025-12-05 01:10:40 +00:00 · 2025-09-19 15:50:51 +01:00 · 2025-09-19 15:04:11 +01:00 · 2025-09-19 06:19:18 +00:00 · 2025-09-18 06:19:01 +00:00 · 2025-09-17 13:08:13 +00:00
406 changed files with 7593 additions and 4486 deletions
--- a/.github/CODEOWNERS
+++ b/.github/CODEOWNERS
@@ -17,6 +17,11 @@
 /playwright/e2e/crypto/                                                 @element-hq/element-crypto-web-reviewers
 /playwright/e2e/settings/encryption-user-tab/                           @element-hq/element-crypto-web-reviewers

+
+/src/models/Call.ts             @element-hq/element-call-reviewers
+/src/call-types.ts              @element-hq/element-call-reviewers
+/src/components/views/voip      @element-hq/element-call-reviewers
+
 # Ignore translations as those will be updated by GHA for Localazy download
 /src/i18n/strings
 /src/i18n/strings/en_EN.json  @element-hq/element-web-reviewers
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -45,7 +45,7 @@ jobs:
        steps:
            - uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5

-            - uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
+            - uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5
              with:
                  # Disable cache on Windows as it is slower than not caching
                  # https://github.com/actions/setup-node/issues/975
--- a/.github/workflows/build_develop.yml
+++ b/.github/workflows/build_develop.yml
@@ -28,7 +28,7 @@ jobs:
        steps:
            - uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5

-            - uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
+            - uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5
              with:
                  cache: "yarn"
                  node-version: "lts/*"
--- a/.github/workflows/docs.yml
+++ b/.github/workflows/docs.yml
@@ -33,7 +33,7 @@ jobs:
                  repository: matrix-org/matrix-js-sdk
                  path: matrix-js-sdk

-            - uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
+            - uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5
              with:
                  cache: "yarn"
                  cache-dependency-path: element-web/yarn.lock
@@ -88,7 +88,7 @@ jobs:
              run: mdbook build

            - name: Upload artifact
-              uses: actions/upload-pages-artifact@56afc609e74202658d3ffba0e8f6dda462b719fa # v3
+              uses: actions/upload-pages-artifact@7b1f4a764d45c48632c6b24a0339c27f5614fb0b # v4
              with:
                  path: ./book

--- a/.github/workflows/end-to-end-tests.yaml
+++ b/.github/workflows/end-to-end-tests.yaml
@@ -54,7 +54,7 @@ jobs:
              with:
                  repository: element-hq/element-web

-            - uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
+            - uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5
              with:
                  cache: "yarn"
                  node-version: "lts/*"
@@ -89,7 +89,7 @@ jobs:

            - name: Calculate runner variables
              id: runner-vars
-              uses: actions/github-script@60a0d83039c74a4aee543508d2ffcb1c3799cdea # v7
+              uses: actions/github-script@ed597411d8f924073f98dfc5c65a23a2325f34cd # v8
              with:
                  script: |
                      const numRunners = parseInt(process.env.NUM_RUNNERS, 10);
@@ -140,7 +140,7 @@ jobs:
                  name: webapp
                  path: webapp

-            - uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
+            - uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5
              with:
                  cache: "yarn"
                  cache-dependency-path: yarn.lock
@@ -207,7 +207,7 @@ jobs:
                  persist-credentials: false
                  repository: element-hq/element-web

-            - uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
+            - uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5
              if: inputs.skip != true
              with:
                  cache: "yarn"
--- a/.github/workflows/issue_closed.yml
+++ b/.github/workflows/issue_closed.yml
@@ -10,7 +10,7 @@ jobs:
        name: Tidy closed issues
        runs-on: ubuntu-24.04
        steps:
-            - uses: actions/github-script@60a0d83039c74a4aee543508d2ffcb1c3799cdea # v7
+            - uses: actions/github-script@ed597411d8f924073f98dfc5c65a23a2325f34cd # v8
              id: main
              with:
                  # PAT needed as the GITHUB_TOKEN won't be able to see cross-references from other orgs (matrix-org)
@@ -142,7 +142,7 @@ jobs:
                          });
                        }
                      }
-            - uses: actions/github-script@60a0d83039c74a4aee543508d2ffcb1c3799cdea # v7
+            - uses: actions/github-script@ed597411d8f924073f98dfc5c65a23a2325f34cd # v8
              name: Close duplicate as Not Planned
              if: steps.main.outputs.closeAsNotPlanned
              with:
--- a/.github/workflows/pending-reviews.yaml
+++ b/.github/workflows/pending-reviews.yaml
@@ -16,7 +16,7 @@ jobs:
            URL: "https://github.com/pulls?q=is%3Apr+is%3Aopen+repo%3Amatrix-org%2Fmatrix-js-sdk+repo%3Amatrix-org%2Fmatrix-react-sdk+repo%3Aelement-hq%2Felement-web+repo%3Aelement-hq%2Felement-desktop+review-requested%3A%40me+sort%3Aupdated-desc+"
            RELEASE_BLOCKERS_URL: "https://github.com/pulls?q=is%3Aopen+repo%3Amatrix-org%2Fmatrix-js-sdk+repo%3Amatrix-org%2Fmatrix-react-sdk+repo%3Aelement-hq%2Felement-web+repo%3Aelement-hq%2Felement-desktop+sort%3Aupdated-desc+label%3AX-Release-Blocker+"
        steps:
-            - uses: actions/github-script@60a0d83039c74a4aee543508d2ffcb1c3799cdea # v7
+            - uses: actions/github-script@ed597411d8f924073f98dfc5c65a23a2325f34cd # v8
              env:
                  HS_URL: ${{ secrets.BETABOT_HS_URL }}
                  ROOM_ID: ${{ secrets.ROOM_ID }}
--- a/.github/workflows/pull_request_base_branch.yaml
+++ b/.github/workflows/pull_request_base_branch.yaml
@@ -8,7 +8,7 @@ jobs:
        name: Check PR base branch
        runs-on: ubuntu-24.04
        steps:
-            - uses: actions/github-script@60a0d83039c74a4aee543508d2ffcb1c3799cdea # v7
+            - uses: actions/github-script@ed597411d8f924073f98dfc5c65a23a2325f34cd # v8
              with:
                  script: |
                      const baseBranch = context.payload.pull_request.base.ref;
--- a/.github/workflows/shared-component-visual-tests.yaml
+++ b/.github/workflows/shared-component-visual-tests.yaml
@@ -26,7 +26,7 @@ jobs:
                  persist-credentials: false
                  repository: element-hq/element-web

-            - uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
+            - uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5
              with:
                  cache: "yarn"
                  node-version: "lts/*"
--- a/.github/workflows/static_analysis.yaml
+++ b/.github/workflows/static_analysis.yaml
@@ -25,7 +25,7 @@ jobs:
        steps:
            - uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5

-            - uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
+            - uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5
              with:
                  cache: "yarn"
                  node-version: "lts/*"
@@ -70,7 +70,7 @@ jobs:
        steps:
            - uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5

-            - uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
+            - uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5
              with:
                  cache: "yarn"
                  node-version: "lts/*"
@@ -88,7 +88,7 @@ jobs:
        steps:
            - uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5

-            - uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
+            - uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5
              with:
                  cache: "yarn"
                  node-version: "lts/*"
@@ -106,7 +106,7 @@ jobs:
        steps:
            - uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5

-            - uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
+            - uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5
              with:
                  cache: "yarn"
                  node-version: "lts/*"
@@ -124,7 +124,7 @@ jobs:
        steps:
            - uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5

-            - uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
+            - uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5
              with:
                  cache: "yarn"
                  node-version: "lts/*"
--- a/.github/workflows/tests.yml
+++ b/.github/workflows/tests.yml
@@ -44,7 +44,7 @@ jobs:
                  repository: ${{ inputs.matrix-js-sdk-sha && 'element-hq/element-web' || github.repository }}

            - name: Yarn cache
-              uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
+              uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5
              with:
                  node-version: "lts/*"
                  cache: "yarn"
--- a/.github/workflows/triage-labelled.yml
+++ b/.github/workflows/triage-labelled.yml
@@ -27,7 +27,7 @@ jobs:
            contains(github.event.issue.labels.*.name, 'A-Rich-Text-Editor') ||
            contains(github.event.issue.labels.*.name, 'A-Element-Call')
        steps:
-            - uses: actions/github-script@60a0d83039c74a4aee543508d2ffcb1c3799cdea # v7
+            - uses: actions/github-script@ed597411d8f924073f98dfc5c65a23a2325f34cd # v8
              with:
                  script: |
                      github.rest.issues.addLabels({
@@ -44,7 +44,7 @@ jobs:
            contains(github.event.issue.labels.*.name, 'good first issue') ||
            contains(github.event.issue.labels.*.name, 'Hacktoberfest')
        steps:
-            - uses: actions/github-script@60a0d83039c74a4aee543508d2ffcb1c3799cdea # v7
+            - uses: actions/github-script@ed597411d8f924073f98dfc5c65a23a2325f34cd # v8
              with:
                  script: |
                      github.rest.issues.addLabels({
--- a/.github/workflows/triage-stale.yml
+++ b/.github/workflows/triage-stale.yml
@@ -12,7 +12,7 @@ jobs:
            issues: write
            pull-requests: write
        steps:
-            - uses: actions/stale@5bef64f19d7facfb25b37b414482c7164d639639 # v9
+            - uses: actions/stale@3a9db7e6a41a89f618792c92c0e97cc736e1b13f # v10
              with:
                  operations-per-run: 100

--- a/.github/workflows/triage-unlabelled.yml
+++ b/.github/workflows/triage-unlabelled.yml
@@ -5,44 +5,25 @@ on:
        types: [unlabeled]
 permissions: {}
 jobs:
-    Move_Unabeled_Issue_On_Project_Board:
+    move_no_longer_needs_info_issues:
        name: Move no longer X-Needs-Info issues to Triaged
        runs-on: ubuntu-24.04
-        permissions:
-            repository-projects: read
        if: >
-            ${{
-            !contains(github.event.issue.labels.*.name, 'X-Needs-Info') }}
-        env:
-            BOARD_NAME: "Issue triage"
-            OWNER: ${{ github.repository_owner }}
-            REPO: ${{ github.event.repository.name }}
-            ISSUE: ${{ github.event.issue.number }}
+            !contains(github.event.issue.labels.*.name, 'X-Needs-Info')
        steps:
-            - name: Check if issue is already in "${{ env.BOARD_NAME }}"
-              run: |
-                  json=$(curl -s -H 'Content-Type: application/json' -H "Authorization: bearer ${{ secrets.GITHUB_TOKEN }}" -X POST -d '{"query": "query($issue: Int!, $owner: String!, $repo: String!) { repository(owner: $owner, name: $repo) { issue(number: $issue) { projectCards { nodes { project { name } isArchived } } } } } ", "variables" : "{ \"issue\": '${ISSUE}', \"owner\": \"'${OWNER}'\", \"repo\": \"'${REPO}'\" }" }' https://api.github.com/graphql)
-                  if echo $json | jq '.data.repository.issue.projectCards.nodes | length'; then
-                    if [[ $(echo $json | jq '.data.repository.issue.projectCards.nodes[0].project.name') =~ "${BOARD_NAME}" ]]; then
-                      if [[ $(echo $json | jq '.data.repository.issue.projectCards.nodes[0].isArchived') == 'true' ]]; then
-                        echo "Issue is already in Project '$BOARD_NAME', but is archived - skipping workflow";
-                        echo "SKIP_ACTION=true" >> $GITHUB_ENV
-                      else
-                        echo "Issue is already in Project '$BOARD_NAME', proceeding";
-                        echo "ALREADY_IN_BOARD=true" >> $GITHUB_ENV
-                      fi
-                    else
-                      echo "Issue is not in project '$BOARD_NAME', cancelling this workflow"
-                      echo "ALREADY_IN_BOARD=false" >> $GITHUB_ENV
-                    fi
-                  fi
-            - name: Move issue
-              uses: alex-page/github-project-automation-plus@303f24a24c67ce7adf565a07e96720faf126fe36
-              if: ${{ env.ALREADY_IN_BOARD == 'true' && env.SKIP_ACTION != 'true' }}
+            - id: set_fields
+              uses: nipe0324/update-project-v2-item-field@c4af58452d1c5a788c1ea4f20e073fa722ec4a6b #v2.0.2
              with:
-                  project: Issue triage
-                  column: Triaged
-                  repo-token: ${{ secrets.ELEMENT_BOT_TOKEN }}
+                  project-url: ${{ env.PROJECT_URL }}
+                  github-token: ${{ secrets.ELEMENT_BOT_TOKEN }}
+                  skip-update-script: |
+                      const isIssue = item.type === 'ISSUE'
+                      const status = item.fieldValues['Status']
+                      return !isIssue || status !== 'Needs info'
+                  field-name: Status
+                  field-value: "Triaged"
+        env:
+            PROJECT_URL: https://github.com/orgs/element-hq/projects/120

    remove_Z-Labs_label:
        name: Remove Z-Labs label when features behind labs flags are removed
@@ -62,7 +43,7 @@ jobs:
            contains(github.event.issue.labels.*.name, 'A-Element-Call')) &&
            contains(github.event.issue.labels.*.name, 'Z-Labs')
        steps:
-            - uses: actions/github-script@60a0d83039c74a4aee543508d2ffcb1c3799cdea # v7
+            - uses: actions/github-script@ed597411d8f924073f98dfc5c65a23a2325f34cd # v8
              with:
                  script: |
                      github.rest.issues.removeLabel({
--- a/.github/workflows/update-jitsi.yml
+++ b/.github/workflows/update-jitsi.yml
@@ -11,7 +11,7 @@ jobs:
        steps:
            - uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5

-            - uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
+            - uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5
              with:
                  cache: "yarn"
                  node-version: "lts/*"
--- a/.github/workflows/update-topics.yaml
+++ b/.github/workflows/update-topics.yaml
@@ -22,7 +22,7 @@ jobs:
        runs-on: ubuntu-24.04
        environment: Matrix
        steps:
-            - uses: actions/github-script@60a0d83039c74a4aee543508d2ffcb1c3799cdea # v7
+            - uses: actions/github-script@ed597411d8f924073f98dfc5c65a23a2325f34cd # v8
              env:
                  HS_URL: ${{ secrets.BETABOT_HS_URL }}
                  LOBBY_ROOM_ID: ${{ secrets.ROOM_ID }}
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -13,7 +13,7 @@ import { mergeConfig } from "vite";
 const config: StorybookConfig = {
    stories: ["../src/shared-components/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
    staticDirs: ["../webapp"],
-    addons: ["@storybook/addon-docs", "@storybook/addon-designs"],
+    addons: ["@storybook/addon-docs", "@storybook/addon-designs", "@storybook/addon-a11y"],
    framework: "@storybook/react-vite",
    core: {
        disableTelemetry: true,
--- a/.storybook/preview.tsx
+++ b/.storybook/preview.tsx
@@ -1,12 +1,11 @@
-import type { ArgTypes, Preview, Decorator } from "@storybook/react-vite";
-import { addons } from "storybook/preview-api";
+import type { ArgTypes, Preview, Decorator, ReactRenderer, StrictArgs } from "@storybook/react-vite";

 import "../res/css/shared.pcss";
 import "./preview.css";
 import React, { useLayoutEffect } from "react";
-import { FORCE_RE_RENDER } from "storybook/internal/core-events";
 import { setLanguage } from "../src/shared-components/utils/i18n";
 import { TooltipProvider } from "@vector-im/compound-web";
+import { StoryContext } from "storybook/internal/csf";

 export const globalTypes = {
    theme: {
@@ -59,29 +58,9 @@ const withThemeProvider: Decorator = (Story, context) => {
    );
 };

-const LanguageSwitcher: React.FC<{
-    language: string;
-}> = ({ language }) => {
-    useLayoutEffect(() => {
-        const changeLanguage = async (language: string) => {
-            await setLanguage(language);
-            // Force the component to re-render to apply the new language
-            addons.getChannel().emit(FORCE_RE_RENDER);
-        };
-        changeLanguage(language);
-    }, [language]);
-
-    return null;
-};
-
-export const withLanguageProvider: Decorator = (Story, context) => {
-    return (
-        <>
-            <LanguageSwitcher language={context.globals.language} />
-            <Story />
-        </>
-    );
-};
+async function languageLoader(context: StoryContext<ReactRenderer, StrictArgs>): Promise<void> {
+    await setLanguage(context.globals.language);
+}

 const withTooltipProvider: Decorator = (Story) => {
    return (
@@ -93,14 +72,22 @@ const withTooltipProvider: Decorator = (Story) => {

 const preview: Preview = {
    tags: ["autodocs"],
-    decorators: [withThemeProvider, withLanguageProvider, withTooltipProvider],
+    decorators: [withThemeProvider, withTooltipProvider],
    parameters: {
        options: {
            storySort: {
                method: "alphabetical",
            },
        },
+        a11y: {
+            /*
+             * Configure test behavior
+             * See: https://storybook.js.org/docs/next/writing-tests/accessibility-testing#test-behavior
+             */
+            test: "error",
+        },
    },
+    loaders: [languageLoader],
 };

 export default preview;
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,8 @@
+Changes in [1.11.112](https://github.com/element-hq/element-web/releases/tag/v1.11.112) (2025-09-16)
+====================================================================================================
+Fix [CVE-2025-59161](https://www.cve.org/CVERecord?id=CVE-2025-59161) / [GHSA-m6c8-98f4-75rr](https://github.com/element-hq/element-web/security/advisories/GHSA-m6c8-98f4-75rr)
+
+
 Changes in [1.11.111](https://github.com/element-hq/element-web/releases/tag/v1.11.111) (2025-09-10)
 ====================================================================================================
 ## ✨ Features
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -2,6 +2,11 @@

 Everyone is welcome to contribute code to Element Web, provided that they are willing to license their contributions to Element under a [Contributor License Agreement](https://cla-assistant.io/element-hq/element-web) (CLA). This ensures that their contribution will be made available under an OSI-approved open-source license, currently licensed under Affero General Public License v3 (AGPLv3) or General Public License v3 (GPLv3) at your choice.

+If you're contributing, or thinking about contributing, please come & chat to
+us in our development room, [#element-dev](https://matrix.to/#/#element-dev:matrix.org).
+This is the best place to ask questions about the code, how to work on the project
+or whether a change is likely to be accepted.
+
 ## How to contribute

 The preferred and easiest way to contribute changes to the project is to fork
--- a/6
+++ b/6
@@ -1,7 +1,7 @@
-# syntax=docker.io/docker/dockerfile:1.17-labs@sha256:9187104f31e3a002a8a6a3209ea1f937fb7486c093cbbde1e14b0fa0d7e4f1b5
+# syntax=docker.io/docker/dockerfile:1.18-labs@sha256:79cdc14e1c220efb546ad14a8ebc816e3277cd72d27195ced5bebdd226dd1025

 # Builder
-FROM --platform=$BUILDPLATFORM node:22-bullseye@sha256:9e34ba52e1f3c31ed9bd4d0bcf784f5909db17cda61c220e29c8d7a8ebfb402e AS builder
+FROM --platform=$BUILDPLATFORM node:22-bullseye@sha256:f8c398a3ad2612293e8827915c056ed0f5cc708b0f676274bb6c732e3c10f93d AS builder

 # Support custom branch of the js-sdk. This also helps us build images of element-web develop.
 ARG USE_CUSTOM_SDKS=false
@@ -19,7 +19,7 @@ RUN /src/scripts/docker-package.sh
 RUN cp /src/config.sample.json /src/webapp/config.json

 # App
-FROM nginxinc/nginx-unprivileged:alpine-slim@sha256:ea6c4b8b568824ea94cd1fabd47e1c4e7c0c04744f344a3793f7e9c8ac3a3636
+FROM nginxinc/nginx-unprivileged:alpine-slim@sha256:14b127ed799301a21a1798516443c675237120c76b9a738d43c5e4747de4b1c9

 # Need root user to install packages & manipulate the usr directory
 USER root
--- a/docs/config.md
+++ b/docs/config.md
@@ -585,6 +585,8 @@ Currently, the following UI feature flags are supported:
 - `UIFeature.BulkUnverifiedSessionsReminder` - Display popup reminders to verify or remove unverified sessions. Defaults
  to true.
 - `UIFeature.locationSharing` - Whether or not location sharing menus will be shown.
+- `UIFeature.allowCreatingPublicRooms` - Whether or not public rooms can be created.
+- `UIFeature.allowCreatingPublicSpaces` - Whether or not public spaces can be created.

 ## Undocumented / developer options

--- a/docs/e2ee.md
+++ b/docs/e2ee.md
@@ -38,45 +38,20 @@ When `force_disable` is true:
 Note: If the server is configured to forcibly enable encryption for some or all rooms,
 this behaviour will be overridden.

-# Secure backup
+# Setting up recovery

 By default, Element strongly encourages (but does not require) users to set up
-Secure Backup so that cross-signing identity key and message keys can be
-recovered in case of a disaster where you lose access to all active devices.
+recovery so that you can access history on your new devices as well as retain access to your message history and cryptographic identity when you lose all of your devices.

-## Requiring secure backup
+## Removal of old settings

-To require Secure Backup to be configured before Element can be used, set the
-following on your homeserver's `/.well-known/matrix/client` config:
+Support for the configuration options `secure_backup_required` and `secure_backup_setup_methods`
+in the `/.well-known/matrix/client` config has been removed.

-```json
-{
-    "io.element.e2ee": {
-        "secure_backup_required": true
-    }
-}
-```
-
-## Preferring setup methods
-
-By default, Element offers users a choice of a random key or user-chosen
-passphrase when setting up Secure Backup. If a homeserver admin would like to
-only offer one of these, you can signal this via the
-`/.well-known/matrix/client` config, for example:
-
-```json
-{
-    "io.element.e2ee": {
-        "secure_backup_setup_methods": ["passphrase"]
-    }
-}
-```
-
-The field `secure_backup_setup_methods` is an array listing the methods the
-client should display. Supported values currently include `key` and
-`passphrase`. If the `secure_backup_setup_methods` field is not present or
-exists but does not contain any supported methods, Element will fallback to the
-default value of: `["key", "passphrase"]`.
+Setting up recovery is now always recommended to all users by showing a one-off toast and a
+permanent red dot on the _Encryption_ tab in the _Settings_ dialog. When creating a new
+recovery key, the UI only supports auto-generated keys. Using an existing (custom) passphrase
+still works, but is not exposed in the UI when setting up recovery.

 # Compatibility

--- a/jest.config.ts
+++ b/jest.config.ts
@@ -41,7 +41,7 @@ const config: Config = {
        "recorderWorkletFactory": "<rootDir>/__mocks__/empty.js",
        "^fetch-mock$": "<rootDir>/node_modules/fetch-mock",
    },
-    transformIgnorePatterns: ["/node_modules/(?!(mime|matrix-js-sdk)).+$"],
+    transformIgnorePatterns: ["/node_modules/(?!(mime|matrix-js-sdk|uuid|p-retry|is-network-error)).+$"],
    collectCoverageFrom: [
        "<rootDir>/src/**/*.{js,ts,tsx}",
        // getSessionLock is piped into a different JS context via stringification, and the coverage functionality is
--- a/knip.ts
+++ b/knip.ts
@@ -2,7 +2,6 @@ import { KnipConfig } from "knip";

 export default {
    entry: [
-        "src/vector/index.ts",
        "src/serviceworker/index.ts",
        "src/workers/*.worker.ts",
        "src/utils/exportUtils/exportJS.js",
@@ -12,8 +11,6 @@ export default {
        "res/decoder-ring/**",
        "res/jitsi_external_api.min.js",
        "docs/**",
-        // Used by jest
-        "__mocks__/maplibre-gl.js",
    ],
    project: ["**/*.{js,ts,jsx,tsx}"],
    ignore: [
@@ -53,6 +50,7 @@ export default {
    ignoreBinaries: [
        // Used in scripts & workflows
        "jq",
+        "wait-on",
    ],
    ignoreExportsUsedInFile: true,
 } satisfies KnipConfig;
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
    "name": "element-web",
-    "version": "1.11.111",
+    "version": "1.11.112",
    "description": "Element: the future of secure communication",
    "author": "New Vector Ltd.",
    "repository": {
@@ -75,8 +75,8 @@
    "resolutions": {
        "**/pretty-format/react-is": "19.1.1",
        "@playwright/test": "1.54.2",
-        "@types/react": "19.1.10",
-        "@types/react-dom": "19.1.7",
+        "@types/react": "19.1.13",
+        "@types/react-dom": "19.1.9",
        "oidc-client-ts": "3.3.0",
        "jwt-decode": "4.0.0",
        "caniuse-lite": "1.0.30001724",
@@ -134,7 +134,7 @@
        "maplibre-gl": "^5.0.0",
        "matrix-encrypt-attachment": "^1.0.3",
        "matrix-events-sdk": "0.0.1",
-        "matrix-js-sdk": "38.1.0",
+        "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#develop",
        "matrix-widget-api": "^1.10.0",
        "memoize-one": "^6.0.0",
        "mime": "^4.0.4",
@@ -142,7 +142,7 @@
        "opus-recorder": "^8.0.3",
        "pako": "^2.0.3",
        "png-chunks-extract": "^1.0.0",
-        "posthog-js": "1.260.1",
+        "posthog-js": "1.265.1",
        "qrcode": "1.5.4",
        "re-resizable": "6.11.2",
        "react": "^19.0.0",
@@ -158,8 +158,8 @@
        "sanitize-html": "2.17.0",
        "tar-js": "^0.3.0",
        "temporal-polyfill": "^0.3.0",
-        "ua-parser-js": "^1.0.2",
-        "uuid": "^11.0.0",
+        "ua-parser-js": "1.0.40",
+        "uuid": "^13.0.0",
        "what-input": "^5.2.10"
    },
    "devDependencies": {
@@ -184,13 +184,14 @@
        "@babel/preset-typescript": "^7.12.7",
        "@babel/runtime": "^7.12.5",
        "@casualbot/jest-sonar-reporter": "2.2.7",
-        "@element-hq/element-call-embedded": "0.14.1",
+        "@element-hq/element-call-embedded": "0.15.0",
        "@element-hq/element-web-playwright-common": "^1.4.6",
        "@peculiar/webcrypto": "^1.4.3",
        "@playwright/test": "^1.50.1",
        "@principalstudio/html-webpack-inject-preload": "^1.2.7",
        "@rrweb/types": "^2.0.0-alpha.18",
        "@sentry/webpack-plugin": "^4.0.0",
+        "@storybook/addon-a11y": "^9.0.18",
        "@storybook/addon-designs": "^10.0.1",
        "@storybook/addon-docs": "^9.0.12",
        "@storybook/icons": "^1.4.0",
@@ -222,16 +223,15 @@
        "@types/node-fetch": "^2.6.2",
        "@types/pako": "^2.0.0",
        "@types/qrcode": "^1.3.5",
-        "@types/react": "19.1.10",
+        "@types/react": "19.1.13",
        "@types/react-beautiful-dnd": "^13.0.0",
-        "@types/react-dom": "19.1.7",
+        "@types/react-dom": "19.1.9",
        "@types/react-transition-group": "^4.4.0",
        "@types/sanitize-html": "2.16.0",
        "@types/sdp-transform": "^2.4.10",
        "@types/semver": "^7.5.8",
        "@types/tar-js": "^0.3.5",
        "@types/ua-parser-js": "^0.7.36",
-        "@types/uuid": "^10.0.0",
        "@typescript-eslint/eslint-plugin": "^8.19.0",
        "@typescript-eslint/parser": "^8.19.0",
        "babel-jest": "^29.0.0",
--- a/patches/@matrix-org+react-sdk-module-api+2.5.0.patch
+++ b/patches/@matrix-org+react-sdk-module-api+2.5.0.patch
@@ -11,3 +11,42 @@ index 917a7fc..a2710c6 100644
         didOkOrSubmit: boolean;
         model: M;
     }>;
+diff --git a/node_modules/@matrix-org/react-sdk-module-api/lib/lifecycles/CryptoSetupExtensions.js b/node_modules/@matrix-org/react-sdk-module-api/lib/lifecycles/CryptoSetupExtensions.js
+index 5d422ed..b823add 100644
+--- a/node_modules/@matrix-org/react-sdk-module-api/lib/lifecycles/CryptoSetupExtensions.js
+++ b/node_modules/@matrix-org/react-sdk-module-api/lib/lifecycles/CryptoSetupExtensions.js
+@@ -124,34 +124,28 @@ var DefaultCryptoSetupExtensions = /*#__PURE__*/function (_CryptoSetupExtension)
+   (0, _createClass2["default"])(DefaultCryptoSetupExtensions, [{
+     key: "examineLoginResponse",
+     value: function examineLoginResponse(response, credentials) {
+-      console.log("Default empty examineLoginResponse() => void");
+     }
+   }, {
+     key: "persistCredentials",
+     value: function persistCredentials(credentials) {
+-      console.log("Default empty persistCredentials() => void");
+     }
+   }, {
+     key: "getSecretStorageKey",
+     value: function getSecretStorageKey() {
+-      console.log("Default empty getSecretStorageKey() => null");
+       return null;
+     }
+   }, {
+     key: "createSecretStorageKey",
+     value: function createSecretStorageKey() {
+-      console.log("Default empty createSecretStorageKey() => null");
+       return null;
+     }
+   }, {
+     key: "catchAccessSecretStorageError",
+     value: function catchAccessSecretStorageError(e) {
+-      console.log("Default catchAccessSecretStorageError() => void");
+     }
+   }, {
+     key: "setupEncryptionNeeded",
+     value: function setupEncryptionNeeded(args) {
+-      console.log("Default setupEncryptionNeeded() => false");
+       return false;
+     }
+   }, {
--- a/playwright/e2e/accessibility/keyboard-navigation.spec.ts
+++ b/playwright/e2e/accessibility/keyboard-navigation.spec.ts
@@ -29,7 +29,7 @@ test.describe("Landmark navigation tests", () => {

        // Pressing Control+F6 again will focus room search
        await page.keyboard.press("ControlOrMeta+F6");
-        await expect(page.locator(".mx_RoomSearch")).toBeFocused();
+        await expect(page.locator(".mx_RoomListSearch_search")).toBeFocused();

        // Pressing Control+F6 again will focus the message composer
        await page.keyboard.press("ControlOrMeta+F6");
@@ -44,7 +44,7 @@ test.describe("Landmark navigation tests", () => {
        await expect(page.locator(".mx_HomePage")).toBeFocused();

        await page.keyboard.press("ControlOrMeta+Shift+F6");
-        await expect(page.locator(".mx_RoomSearch")).toBeFocused();
+        await expect(page.locator(".mx_RoomListSearch_search")).toBeFocused();

        await page.keyboard.press("ControlOrMeta+Shift+F6");
        await expect(page.locator(".mx_SpaceButton_active")).toBeFocused();
@@ -75,11 +75,11 @@ test.describe("Landmark navigation tests", () => {

        // Pressing Control+F6 again will focus room search
        await page.keyboard.press("ControlOrMeta+F6");
-        await expect(page.locator(".mx_RoomSearch")).toBeFocused();
+        await expect(page.locator(".mx_RoomListSearch_search")).toBeFocused();

        // Pressing Control+F6 again will focus the room tile in the room list
        await page.keyboard.press("ControlOrMeta+F6");
-        await expect(page.locator(".mx_RoomTile_selected")).toBeFocused();
+        await expect(page.locator(".mx_RoomListItemView_selected")).toBeFocused();

        // Pressing Control+F6 again will focus the message composer
        await page.keyboard.press("ControlOrMeta+F6");
@@ -94,10 +94,10 @@ test.describe("Landmark navigation tests", () => {
        await expect(page.locator(".mx_BasicMessageComposer_input")).toBeFocused();

        await page.keyboard.press("ControlOrMeta+Shift+F6");
-        await expect(page.locator(".mx_RoomTile_selected")).toBeFocused();
+        await expect(page.locator(".mx_RoomListItemView_selected")).toBeFocused();

        await page.keyboard.press("ControlOrMeta+Shift+F6");
-        await expect(page.locator(".mx_RoomSearch")).toBeFocused();
+        await expect(page.locator(".mx_RoomListSearch_search")).toBeFocused();

        await page.keyboard.press("ControlOrMeta+Shift+F6");
        await expect(page.locator(".mx_SpaceButton_active")).toBeFocused();
@@ -131,11 +131,11 @@ test.describe("Landmark navigation tests", () => {

        // Pressing Control+F6 again will focus room search
        await page.keyboard.press("ControlOrMeta+F6");
-        await expect(page.locator(".mx_RoomSearch")).toBeFocused();
+        await expect(page.locator(".mx_RoomListSearch_search")).toBeFocused();

        // Pressing Control+F6 again will focus the room tile in the room list
        await page.keyboard.press("ControlOrMeta+F6");
-        await expect(page.locator(".mx_RoomTile")).toBeFocused();
+        await expect(page.locator(".mx_RoomListItemView")).toBeFocused();

        // Pressing Control+F6 again will focus the home section
        await page.keyboard.press("ControlOrMeta+F6");
@@ -150,10 +150,10 @@ test.describe("Landmark navigation tests", () => {
        await expect(page.locator(".mx_HomePage")).toBeFocused();

        await page.keyboard.press("ControlOrMeta+Shift+F6");
-        await expect(page.locator(".mx_RoomTile")).toBeFocused();
+        await expect(page.locator(".mx_RoomListItemView")).toBeFocused();

        await page.keyboard.press("ControlOrMeta+Shift+F6");
-        await expect(page.locator(".mx_RoomSearch")).toBeFocused();
+        await expect(page.locator(".mx_RoomListSearch_search")).toBeFocused();

        await page.keyboard.press("ControlOrMeta+Shift+F6");
        await expect(page.locator(".mx_SpaceButton_active")).toBeFocused();
--- a/playwright/e2e/composer/CIDER.spec.ts
+++ b/playwright/e2e/composer/CIDER.spec.ts
@@ -14,6 +14,9 @@ const CtrlOrMeta = process.platform === "darwin" ? "Meta" : "Control";
 test.describe("Composer", () => {
    test.use({
        displayName: "Janet",
+        botCreateOpts: {
+            displayName: "Bob",
+        },
    });

    test.use({
@@ -94,5 +97,25 @@ test.describe("Composer", () => {
                ).toBeVisible();
            });
        });
+
+        test("can send mention", { tag: "@screenshot" }, async ({ page, bot, app }) => {
+            // Set up a private room so we have another user to mention
+            await app.client.createRoom({
+                is_direct: true,
+                invite: [bot.credentials.userId],
+            });
+            await app.viewRoomByName("Bob");
+
+            const composer = page.getByRole("textbox", { name: "Send an unencrypted message…" });
+            await composer.pressSequentially("@bob");
+
+            // Note that we include the user ID here as the room tile is also an 'option' role
+            // with text 'Bob'
+            await page.getByRole("option", { name: `Bob ${bot.credentials.userId}` }).click();
+            await expect(composer.getByText("Bob")).toBeVisible();
+            await expect(composer).toMatchScreenshot("mention.png");
+            await composer.press("Enter");
+            await expect(page.locator(".mx_EventTile_body", { hasText: "Bob" })).toBeVisible();
+        });
    });
 });
--- a/playwright/e2e/create-room/create-room.spec.ts
+++ b/playwright/e2e/create-room/create-room.spec.ts
@@ -1,34 +0,0 @@
-/*
-Copyright 2024 New Vector Ltd.
-Copyright 2022, 2023 The Matrix.org Foundation C.I.C.
-
-SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
-Please see LICENSE files in the repository root for full details.
-*/
-
-import { test, expect } from "../../element-web-test";
-
-test.describe("Create Room", () => {
-    test.use({ displayName: "Jim" });
-
-    test("should allow us to create a public room with name, topic & address set", async ({ page, user, app }) => {
-        const name = "Test room 1";
-        const topic = "This room is dedicated to this test and this test only!";
-
-        const dialog = await app.openCreateRoomDialog();
-        // Fill name & topic
-        await dialog.getByRole("textbox", { name: "Name" }).fill(name);
-        await dialog.getByRole("textbox", { name: "Topic" }).fill(topic);
-        // Change room to public
-        await dialog.getByRole("button", { name: "Room visibility" }).click();
-        await dialog.getByRole("option", { name: "Public room" }).click();
-        // Fill room address
-        await dialog.getByRole("textbox", { name: "Room address" }).fill("test-room-1");
-        // Submit
-        await dialog.getByRole("button", { name: "Create room" }).click();
-
-        await expect(page).toHaveURL(new RegExp(`/#/room/#test-room-1:${user.homeServer}`));
-        const header = page.locator(".mx_RoomHeader");
-        await expect(header).toContainText(name);
-    });
-});
--- a/playwright/e2e/crypto/backups-mas.spec.ts
+++ b/playwright/e2e/crypto/backups-mas.spec.ts
@@ -49,7 +49,7 @@ test.describe("Encryption state after registration", () => {
            "Pa$sW0rD!",
        );

-        await page.getByRole("button", { name: "Add room" }).click();
+        await page.getByRole("navigation", { name: "Room list" }).getByRole("button", { name: "Add" }).click();
        await page.getByRole("menuitem", { name: "New room" }).click();
        await page.getByRole("textbox", { name: "Name" }).fill("test room");
        await page.getByRole("button", { name: "Create room" }).click();
@@ -78,7 +78,7 @@ test.describe("Key backup reset from elsewhere", () => {
        await page.getByRole("button", { name: "Continue" }).click();
        await registerAccountMas(page, mailpitClient, testUsername, `${testUsername}@email.com`, testPassword);

-        await page.getByRole("button", { name: "Add room" }).click();
+        await page.getByRole("navigation", { name: "Room list" }).getByRole("button", { name: "Add" }).click();
        await page.getByRole("menuitem", { name: "New room" }).click();
        await page.getByRole("textbox", { name: "Name" }).fill("test room");
        await page.getByRole("button", { name: "Create room" }).click();
--- a/playwright/e2e/crypto/crypto.spec.ts
+++ b/playwright/e2e/crypto/crypto.spec.ts
@@ -21,7 +21,8 @@ const checkDMRoom = async (page: Page) => {
 };

 const startDMWithBob = async (page: Page, bob: Bot) => {
-    await page.locator(".mx_LegacyRoomList").getByRole("button", { name: "Start chat" }).click();
+    await page.getByRole("navigation", { name: "Room list" }).getByRole("button", { name: "Add" }).click();
+    await page.getByRole("menuitem", { name: "Start chat" }).click();
    await page.getByTestId("invite-dialog-input").fill(bob.credentials.userId);
    await page.locator(".mx_InviteDialog_tile_nameStack_name").getByText("Bob").click();
    await expect(
@@ -154,8 +155,8 @@ test.describe("Cryptography", function () {
            await app.client.bootstrapCrossSigning(aliceCredentials);
            await startDMWithBob(page, bob);
            // send first message
-            await page.getByRole("textbox", { name: "Send an unencrypted message…" }).fill("Hey!");
-            await page.getByRole("textbox", { name: "Send an unencrypted message…" }).press("Enter");
+            await page.getByRole("textbox", { name: "Send a message…" }).fill("Hey!");
+            await page.getByRole("textbox", { name: "Send a message…" }).press("Enter");
            await checkDMRoom(page);
            const bobRoomId = await bobJoin(page, bob);
            // We no longer show the grey badge in the composer, check that it is not there.
--- a/playwright/e2e/crypto/decryption-failure-messages.spec.ts
+++ b/playwright/e2e/crypto/decryption-failure-messages.spec.ts
@@ -143,10 +143,7 @@ test.describe("Cryptography", function () {
                );

                // Alice accepts the invite
-                await expect(
-                    page.getByRole("group", { name: "Invites" }).locator(".mx_RoomSublist_tiles").getByRole("treeitem"),
-                ).toHaveCount(1);
-                await page.getByRole("treeitem", { name: "Test room" }).click();
+                await page.getByRole("option", { name: "Test room" }).click();
                await page.locator(".mx_RoomView").getByRole("button", { name: "Accept" }).click();

                // Bob sends an encrypted event and an undecryptable event
@@ -280,10 +277,7 @@ test.describe("Cryptography", function () {
                );

                // Alice accepts the invite
-                await expect(
-                    page.getByRole("group", { name: "Invites" }).locator(".mx_RoomSublist_tiles").getByRole("treeitem"),
-                ).toHaveCount(1);
-                await page.getByRole("treeitem", { name: "Test room" }).click();
+                await page.getByRole("option", { name: "Test room" }).click();
                await page.locator(".mx_RoomView").getByRole("button", { name: "Accept" }).click();

                // wait until we're joined and see the timeline
--- a/playwright/e2e/crypto/dehydration.spec.ts
+++ b/playwright/e2e/crypto/dehydration.spec.ts
@@ -38,7 +38,7 @@ test.describe("Dehydration", () => {
        // Reset the identity key
        const settings = await app.settings.openUserSettings("Encryption");
        await settings.getByRole("button", { name: "Verify this device" }).click();
-        await page.getByRole("button", { name: "Proceed with reset" }).click();
+        await page.getByRole("button", { name: "Can't confirm?" }).click();
        await page.getByRole("button", { name: "Continue" }).click();

        // Set up recovery
@@ -106,7 +106,7 @@ test.describe("Dehydration", () => {
        await logIntoElement(page, credentials);

        // Oh no, we forgot our recovery key - reset our identity
-        await page.locator(".mx_AuthPage").getByRole("button", { name: "Reset all" }).click();
+        await page.locator(".mx_AuthPage").getByRole("button", { name: "Can't confirm" }).click();
        await expect(
            page.getByRole("heading", { name: "Are you sure you want to reset your identity?" }),
        ).toBeVisible();
--- a/playwright/e2e/crypto/device-verification.spec.ts
+++ b/playwright/e2e/crypto/device-verification.spec.ts
@@ -36,13 +36,13 @@ test.describe("Device verification", { tag: "@no-webkit" }, () => {
        expectedBackupVersion = res.expectedBackupVersion;
    });

-    // Click the "Verify with another device" button, and have the bot client auto-accept it.
+    // Click the "Use another device" button, and have the bot client auto-accept it.
    async function initiateAliceVerificationRequest(page: Page): Promise<JSHandle<VerificationRequest>> {
        // alice bot waits for verification request
        const promiseVerificationRequest = waitForVerificationRequest(aliceBotClient);

-        // Click on "Verify with another device"
-        await page.locator(".mx_AuthPage").getByRole("button", { name: "Verify with another device" }).click();
+        // Click on "Use another device"
+        await page.locator(".mx_AuthPage").getByRole("button", { name: "Use another device" }).click();

        // alice bot responds yes to verification request from alice
        return promiseVerificationRequest;
@@ -203,7 +203,7 @@ test.describe("Device verification", { tag: "@no-webkit" }, () => {

    /** Helper for the three tests above which verify by recovery key */
    async function enterRecoveryKeyAndCheckVerified(page: Page, app: ElementAppPage, recoveryKey: string) {
-        await page.getByRole("button", { name: "Verify with Recovery Key or Phrase" }).click();
+        await page.getByRole("button", { name: "Use recovery key" }).click();

        // Enter the recovery key
        const dialog = page.locator(".mx_Dialog");
--- a/playwright/e2e/crypto/event-shields.spec.ts
+++ b/playwright/e2e/crypto/event-shields.spec.ts
@@ -14,7 +14,7 @@ import {
    createSecondBotDevice,
    createSharedRoomWithUser,
    enableKeyBackup,
-    logIntoElement,
+    logIntoElementAndVerify,
    logOutOfElement,
    verify,
    waitForDevices,
@@ -195,7 +195,7 @@ test.describe("Cryptography", function () {
                window.localStorage.clear();
            });
            await page.reload();
-            await logIntoElement(page, aliceCredentials, securityKey);
+            await logIntoElementAndVerify(page, aliceCredentials, securityKey);

            /* go back to the test room and find Bob's message again */
            await app.viewRoomById(testRoomId);
--- a/playwright/e2e/crypto/toasts.spec.ts
+++ b/playwright/e2e/crypto/toasts.spec.ts
@@ -8,7 +8,7 @@
 import { type GeneratedSecretStorageKey } from "matrix-js-sdk/src/crypto-api";

 import { test, expect } from "../../element-web-test";
-import { createBot, deleteCachedSecrets, disableKeyBackup, logIntoElement } from "./utils";
+import { createBot, deleteCachedSecrets, disableKeyBackup, logIntoElementAndVerify } from "./utils";
 import { type Bot } from "../../pages/bot";

 test.describe("Key storage out of sync toast", () => {
@@ -18,12 +18,12 @@ test.describe("Key storage out of sync toast", () => {
        const res = await createBot(page, homeserver, credentials);
        recoveryKey = res.recoveryKey;

-        await logIntoElement(page, credentials, recoveryKey.encodedPrivateKey);
+        await logIntoElementAndVerify(page, credentials, recoveryKey.encodedPrivateKey);

        await deleteCachedSecrets(page);

        // We won't be prompted for crypto setup unless we have an e2e room, so make one
-        await page.getByRole("button", { name: "Add room" }).click();
+        await page.getByRole("navigation", { name: "Room list" }).getByRole("button", { name: "Add" }).click();
        await page.getByRole("menuitem", { name: "New room" }).click();
        await page.getByRole("textbox", { name: "Name" }).fill("Test room");
        await page.getByRole("button", { name: "Create room" }).click();
@@ -65,10 +65,10 @@ test.describe("'Turn on key storage' toast", () => {
        const recoveryKey = res.recoveryKey;
        botClient = res.botClient;

-        await logIntoElement(page, credentials, recoveryKey.encodedPrivateKey);
+        await logIntoElementAndVerify(page, credentials, recoveryKey.encodedPrivateKey);

        // We won't be prompted for crypto setup unless we have an e2e room, so make one
-        await page.getByRole("button", { name: "Add room" }).click();
+        await page.getByRole("navigation", { name: "Room list" }).getByRole("button", { name: "Add" }).click();
        await page.getByRole("menuitem", { name: "New room" }).click();
        await page.getByRole("textbox", { name: "Name" }).fill("Test room");
        await page.getByRole("button", { name: "Create room" }).click();
--- a/playwright/e2e/crypto/utils.ts
+++ b/playwright/e2e/crypto/utils.ts
@@ -206,32 +206,42 @@ export async function checkDeviceIsConnectedKeyBackup(

 /**
 * Fill in the login form in element with the given creds.
- *
- * If a `securityKey` is given, verifies the new device using the key.
 */
-export async function logIntoElement(page: Page, credentials: Credentials, securityKey?: string) {
+export async function logIntoElement(page: Page, credentials: Credentials) {
    await page.goto("/#/login");

    await page.getByRole("textbox", { name: "Username" }).fill(credentials.userId);
    await page.getByPlaceholder("Password").fill(credentials.password);
    await page.getByRole("button", { name: "Sign in" }).click();
+}

-    // if a securityKey was given, verify the new device
-    if (securityKey !== undefined) {
-        await page.locator(".mx_AuthPage").getByRole("button", { name: "Verify with Recovery Key" }).click();
+/**
+ * Fill in the login form in Element with the given creds, and then complete the `CompleteSecurity` step, using the
+ * given recovery key. (Normally this will verify the new device using the secrets from 4S.)
+ *
+ * Afterwards, waits for the application to redirect to the home page.
+ */
+export async function logIntoElementAndVerify(page: Page, credentials: Credentials, recoveryKey: string) {
+    await logIntoElement(page, credentials);

-        const useSecurityKey = page.locator(".mx_Dialog").getByRole("button", { name: "use your Recovery Key" });
-        // If the user has set a recovery *passphrase*, they'll be prompted for that first and have to click
-        // through to enter the recovery key which is what we have here. If they haven't, they'll be prompted
-        // for a recovery key straight away. We click the button if it's there so this works in both cases.
-        if (await useSecurityKey.isVisible()) {
-            await useSecurityKey.click();
-        }
-        // Fill in the recovery key
-        await page.locator(".mx_Dialog").getByTitle("Recovery key").fill(securityKey);
-        await page.getByRole("button", { name: "Continue", disabled: false }).click();
-        await page.getByRole("button", { name: "Done" }).click();
+    await page.locator(".mx_AuthPage").getByRole("button", { name: "Use recovery key" }).click();
+
+    const useSecurityKey = page.locator(".mx_Dialog").getByRole("button", { name: "Use recovery key" });
+    // If the user has set a recovery *passphrase*, they'll be prompted for that first and have to click
+    // through to enter the recovery key which is what we have here. If they haven't, they'll be prompted
+    // for a recovery key straight away. We click the button if it's there so this works in both cases.
+    if (await useSecurityKey.isVisible()) {
+        await useSecurityKey.click();
    }
+
+    // Fill in the recovery key
+    await page.locator(".mx_Dialog").getByTitle("Recovery key").fill(recoveryKey);
+    await page.getByRole("button", { name: "Continue", disabled: false }).click();
+    await page.getByRole("button", { name: "Done" }).click();
+
+    // The application should now redirect to `/#/home`. Wait for that to happen, otherwise if a test immediately does
+    // a `viewRoomById` or similar, it could race.
+    await page.waitForURL("/#/home");
 }

 /**
@@ -262,7 +272,7 @@ export async function logOutOfElement(page: Page, discardKeys: boolean = false)
 export async function verifySession(app: ElementAppPage, securityKey: string) {
    const settings = await app.settings.openUserSettings("Encryption");
    await settings.getByRole("button", { name: "Verify this device" }).click();
-    await app.page.getByRole("button", { name: "Verify with Recovery Key" }).click();
+    await app.page.getByRole("button", { name: "Use recovery key" }).click();
    await app.page.locator(".mx_Dialog").getByTitle("Recovery key").fill(securityKey);
    await app.page.getByRole("button", { name: "Continue", disabled: false }).click();
    await app.page.getByRole("button", { name: "Done" }).click();
@@ -428,8 +438,8 @@ export async function sendMessageInCurrentRoom(page: Page, message: string): Pro
 * @param isEncrypted - Whether the room should be encrypted
 */
 export async function createRoom(page: Page, roomName: string, isEncrypted: boolean): Promise<void> {
-    await page.getByRole("button", { name: "Add room" }).click();
-    await page.locator(".mx_IconizedContextMenu").getByRole("menuitem", { name: "New room" }).click();
+    await page.getByRole("navigation", { name: "Room list" }).getByRole("button", { name: "Add" }).click();
+    await page.getByRole("menuitem", { name: "New room" }).click();

    const dialog = page.locator(".mx_Dialog");

--- a/playwright/e2e/devtools/devtools.spec.ts
+++ b/playwright/e2e/devtools/devtools.spec.ts
@@ -0,0 +1,33 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { test, expect } from "../../element-web-test";
+
+test.describe("Devtools", () => {
+    test.use({
+        displayName: "Alice",
+    });
+
+    test("should render the devtools", { tag: "@screenshot" }, async ({ page, homeserver, user, app, axe }) => {
+        await app.client.createRoom({ name: "Test Room" });
+        await app.viewRoomByName("Test Room");
+
+        const composer = app.getComposer().locator("[contenteditable]");
+        await composer.fill("/devtools");
+        await composer.press("Enter");
+        const dialog = page.locator(".mx_Dialog");
+        await dialog.getByLabel("Developer mode").check();
+
+        axe.disableRules("color-contrast"); // XXX: Inheriting colour contrast issues from room view.
+        await expect(axe).toHaveNoViolations();
+        await expect(dialog).toMatchScreenshot("devtools-dialog.png", {
+            css: `.mx_CopyableText {
+                display: none;
+            }`,
+        });
+    });
+});
--- a/playwright/e2e/devtools/upgraderoom.spec.ts
+++ b/playwright/e2e/devtools/upgraderoom.spec.ts
@@ -0,0 +1,38 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { SettingLevel } from "../../../src/settings/SettingLevel";
+import { test, expect } from "../../element-web-test";
+
+test.describe("Room upgrade dialog", () => {
+    test.use({
+        displayName: "Alice",
+    });
+
+    test(
+        "should render the room upgrade dialog",
+        { tag: "@screenshot" },
+        async ({ page, homeserver, user, app, axe }) => {
+            // Enable developer mode
+            await app.settings.setValue("developerMode", null, SettingLevel.ACCOUNT, true);
+
+            await app.client.createRoom({ name: "Test Room" });
+            await app.viewRoomByName("Test Room");
+
+            const composer = app.getComposer().locator("[contenteditable]");
+            // Pick a room version that is likely to be supported by all our target homeservers.
+            await composer.fill("/upgraderoom 5");
+            await composer.press("Enter");
+            const dialog = page.locator(".mx_Dialog");
+            await dialog.getByLabel("Automatically invite members from this room to the new one").check();
+
+            axe.disableRules("color-contrast"); // XXX: Inheriting colour contrast issues from room view.
+            await expect(axe).toHaveNoViolations();
+            await expect(dialog).toMatchScreenshot("upgrade-room.png");
+        },
+    );
+});
--- a/playwright/e2e/invite/decline-and-block-invite-dialog.spec.ts
+++ b/playwright/e2e/invite/decline-and-block-invite-dialog.spec.ts
@@ -0,0 +1,28 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { test, expect } from "../../element-web-test";
+
+test.describe("Decline and block invite dialog", function () {
+    test.use({
+        displayName: "Hanako",
+    });
+
+    test(
+        "should show decline and block dialog for a room",
+        { tag: "@screenshot" },
+        async ({ page, app, user, bot, axe }) => {
+            await bot.createRoom({ name: "Test Room", invite: [user.userId] });
+            await app.viewRoomByName("Test Room");
+            await page.getByRole("button", { name: "Decline and block" }).click();
+
+            axe.disableRules("color-contrast"); // XXX: Inheriting colour contrast issues from room view.
+            await expect(axe).toHaveNoViolations();
+            await expect(page.locator(".mx_Dialog")).toMatchScreenshot("decline-and-block-invite-empty.png");
+        },
+    );
+});
--- a/playwright/e2e/invite/invite-dialog.spec.ts
+++ b/playwright/e2e/invite/invite-dialog.spec.ts
@@ -77,7 +77,8 @@ test.describe("Invite dialog", function () {
        "should support inviting a user to Direct Messages",
        { tag: "@screenshot" },
        async ({ page, app, user, bot }) => {
-            await page.locator(".mx_LegacyRoomList").getByRole("button", { name: "Start chat" }).click();
+            await page.getByRole("navigation", { name: "Room list" }).getByRole("button", { name: "Add" }).click();
+            await page.getByRole("menuitem", { name: "Start chat" }).click();

            const other = page.locator(".mx_InviteDialog_other");
            // Assert that the header is rendered
--- a/playwright/e2e/knock/knock-into-room.spec.ts
+++ b/playwright/e2e/knock/knock-into-room.spec.ts
@@ -59,7 +59,7 @@ test.describe("Knock Into Room", () => {

        // Knocked room should appear in Rooms
        await expect(
-            page.getByRole("group", { name: "Rooms" }).getByRole("treeitem", { name: "Cybersecurity" }),
+            page.getByTestId("room-list").getByRole("option", { name: "Open room Cybersecurity" }),
        ).toBeVisible();

        // bot waits for knock request from Alice
@@ -77,7 +77,7 @@ test.describe("Knock Into Room", () => {
        await bot.inviteUser(room.roomId, user.userId);

        await expect(
-            page.getByRole("group", { name: "Invites" }).getByRole("treeitem", { name: "Cybersecurity" }),
+            page.getByTestId("room-list").getByRole("option", { name: "Open room Cybersecurity" }),
        ).toBeVisible();

        // Alice have to accept invitation in order to join the room.
@@ -85,7 +85,7 @@ test.describe("Knock Into Room", () => {
        await page.locator(".mx_RoomView").getByRole("button", { name: "Accept" }).click();

        await expect(
-            page.getByRole("group", { name: "Rooms" }).getByRole("treeitem", { name: "Cybersecurity" }),
+            page.getByTestId("room-list").getByRole("option", { name: "Open room Cybersecurity" }),
        ).toBeVisible();

        await expect(page.getByText("Alice joined the room")).toBeVisible();
@@ -136,7 +136,7 @@ test.describe("Knock Into Room", () => {

        // Knocked room should appear in Rooms
        await expect(
-            page.getByRole("group", { name: "Rooms" }).getByRole("treeitem", { name: "Cybersecurity" }),
+            page.getByTestId("room-list").getByRole("option", { name: "Open room Cybersecurity" }),
        ).toBeVisible();

        // bot waits for knock request from Alice
@@ -154,7 +154,7 @@ test.describe("Knock Into Room", () => {
        await bot.inviteUser(room.roomId, user.userId);

        await expect(
-            page.getByRole("group", { name: "Invites" }).getByRole("treeitem", { name: "Cybersecurity" }),
+            page.getByTestId("room-list").getByRole("option", { name: "Open room Cybersecurity" }),
        ).toBeVisible();

        // Alice have to accept invitation in order to join the room.
@@ -162,7 +162,7 @@ test.describe("Knock Into Room", () => {
        await page.locator(".mx_RoomView").getByRole("button", { name: "Accept" }).click();

        await expect(
-            page.getByRole("group", { name: "Rooms" }).getByRole("treeitem", { name: "Cybersecurity" }),
+            page.getByTestId("room-list").getByRole("option", { name: "Open room Cybersecurity" }),
        ).toBeVisible();

        await expect(page.getByText("Alice joined the room")).toBeVisible();
@@ -215,14 +215,14 @@ test.describe("Knock Into Room", () => {
        await expect(roomPreviewBar.getByRole("heading", { name: "Request to join sent" })).toBeVisible();

        // Knocked room should appear in Rooms
-        page.getByRole("group", { name: "Rooms" }).getByRole("treeitem", { name: "Cybersecurity" });
+        page.getByTestId("room-list").getByRole("option", { name: "Open room Cybersecurity" });

        await roomPreviewBar.getByRole("button", { name: "Cancel request" }).click();
        await expect(roomPreviewBar.getByRole("heading", { name: "Ask to join Cybersecurity?" })).toBeVisible();
        await expect(roomPreviewBar.getByRole("button", { name: "Request access" })).toBeVisible();

        await expect(
-            page.getByRole("group", { name: "Rooms" }).getByRole("treeitem", { name: "Cybersecurity" }),
+            page.getByTestId("room-list").getByRole("option", { name: "Open room Cybersecurity" }),
        ).not.toBeVisible();
    });

@@ -244,7 +244,7 @@ test.describe("Knock Into Room", () => {

        // Knocked room should appear in Rooms
        await expect(
-            page.getByRole("group", { name: "Rooms" }).getByRole("treeitem", { name: "Cybersecurity" }),
+            page.getByTestId("room-list").getByRole("option", { name: "Open room Cybersecurity" }),
        ).toBeVisible();

        // bot waits for knock request from Alice
@@ -262,13 +262,10 @@ test.describe("Knock Into Room", () => {
        await bot.kick(room.roomId, user.userId);

        // Room should stay in Rooms and have red badge when knock is denied
-        await expect(
-            page.getByRole("group", { name: "Rooms" }).getByRole("treeitem", { name: "Cybersecurity", exact: true }),
-        ).not.toBeVisible();
        await expect(
            page
-                .getByRole("group", { name: "Rooms" })
-                .getByRole("treeitem", { name: "Cybersecurity 1 unread mention." }),
+                .getByTestId("room-list")
+                .getByRole("option", { name: "Open room Cybersecurity with 1 unread mention." }),
        ).toBeVisible();

        await expect(roomPreviewBar.getByRole("heading", { name: "You have been denied access" })).toBeVisible();
--- a/playwright/e2e/left-panel/left-panel.spec.ts
+++ b/playwright/e2e/left-panel/left-panel.spec.ts
@@ -17,7 +17,7 @@ test.describe("LeftPanel", () => {
        // create rooms and check room names are correct
        for (const name of ["Apple", "Pineapple", "Orange"]) {
            await app.client.createRoom({ name });
-            await expect(page.getByRole("treeitem", { name })).toBeVisible();
+            await expect(page.getByRole("option", { name: `Open room ${name}` })).toBeVisible();
        }
    });
 });
--- 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");
        });

--- a/playwright/e2e/location/location.spec.ts
+++ b/playwright/e2e/location/location.spec.ts
@@ -1,5 +1,5 @@
 /*
-Copyright 2024 New Vector Ltd.
+Copyright 2024, 2025 New Vector Ltd.
 Copyright 2022 The Matrix.org Foundation C.I.C.

 SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
@@ -57,4 +57,26 @@ test.describe("Location sharing", { tag: "@no-firefox" }, () => {

        await expect(page.locator(".mx_Marker")).toBeVisible();
    });
+
+    test(
+        "is prompted for and can consent to live location sharing",
+        { tag: "@screenshot" },
+        async ({ page, user, app, axe }) => {
+            await app.viewRoomById(await app.client.createRoom({}));
+
+            const composerOptions = await app.openMessageComposerOptions();
+            await composerOptions.getByRole("menuitem", { name: "Location", exact: true }).click();
+            const menu = page.locator(".mx_LocationShareMenu");
+
+            await menu.getByRole("button", { name: "My live location" }).click();
+            await menu.getByLabel("Enable live location sharing").check();
+
+            axe.disableRules([
+                "color-contrast", // XXX: Inheriting colour contrast issues from room view.
+                "region", // XXX: ContextMenu managed=false does not provide a role.
+            ]);
+            await expect(axe).toHaveNoViolations();
+            await expect(menu).toMatchScreenshot("location-live-share-dialog.png");
+        },
+    );
 });
--- a/playwright/e2e/login/login-consent.spec.ts
+++ b/playwright/e2e/login/login-consent.spec.ts
@@ -186,7 +186,7 @@ test.describe("Login", () => {
                await page.goto("/");
                await login(page, homeserver, credentials);

-                await expect(page.getByRole("heading", { name: "Verify this device", level: 1 })).toBeVisible();
+                await expect(page.getByRole("heading", { name: "Confirm your identity", level: 2 })).toBeVisible();

                await expect(page.getByRole("button", { name: "Skip verification for now" })).toBeVisible();
            });
@@ -219,7 +219,7 @@ test.describe("Login", () => {
                    await page.goto("/");
                    await login(page, homeserver, credentials);

-                    await expect(page.getByRole("heading", { name: "Verify this device", level: 1 })).toBeVisible();
+                    await expect(page.getByRole("heading", { name: "Confirm your identity", level: 2 })).toBeVisible();

                    await expect(page.getByRole("button", { name: "Skip verification for now" })).toBeVisible();
                });
@@ -254,10 +254,10 @@ test.describe("Login", () => {
                    await page.goto("/");
                    await login(page, homeserver, credentials);

-                    const h1 = page.getByRole("heading", { name: "Verify this device", level: 1 });
-                    await expect(h1).toBeVisible();
+                    const h2 = page.getByRole("heading", { name: "Confirm your identity", level: 2 });
+                    await expect(h2).toBeVisible();

-                    await expect(h1.locator(".mx_CompleteSecurity_skip")).toHaveCount(0);
+                    await expect(h2.locator(".mx_CompleteSecurity_skip")).toHaveCount(0);
                });

                test("Continues to show verification prompt after cancelling device verification", async ({
@@ -274,18 +274,18 @@ test.describe("Login", () => {
                    // Load the page and see that we are asked to verify
                    await page.goto("/#/welcome");
                    await login(page, homeserver, credentials);
-                    let h1 = page.getByRole("heading", { name: "Verify this device", level: 1 });
-                    await expect(h1).toBeVisible();
+                    let h2 = page.getByRole("heading", { name: "Confirm your identity", level: 2 });
+                    await expect(h2).toBeVisible();

-                    // Click "Verify with another device"
-                    await page.getByRole("button", { name: "Verify with another device" }).click();
+                    // Click "Use another device"
+                    await page.getByRole("button", { name: "Use another device" }).click();

                    // Cancel the new dialog
                    await page.getByRole("button", { name: "Close dialog" }).click();

                    // Check that we are still being asked to verify
-                    h1 = page.getByRole("heading", { name: "Verify this device", level: 1 });
-                    await expect(h1).toBeVisible();
+                    h2 = page.getByRole("heading", { name: "Confirm your identity", level: 2 });
+                    await expect(h2).toBeVisible();
                });
            });

@@ -303,18 +303,18 @@ test.describe("Login", () => {
                await page.goto("/");
                await login(page, homeserver, credentials);

-                await expect(page.getByRole("heading", { name: "Verify this device", level: 1 })).toBeVisible();
+                await expect(page.getByRole("heading", { name: "Confirm your identity", level: 2 })).toBeVisible();

                // Start the reset process
-                await page.getByRole("button", { name: "Proceed with reset" }).click();
+                await page.getByRole("button", { name: "Can't confirm?" }).click();

                // First try cancelling and restarting
                await page.getByRole("button", { name: "Cancel" }).click();
-                await page.getByRole("button", { name: "Proceed with reset" }).click();
+                await page.getByRole("button", { name: "Can't confirm?" }).click();

                // Then click outside the dialog and restart
                await page.getByRole("link", { name: "Powered by Matrix" }).click({ force: true });
-                await page.getByRole("button", { name: "Proceed with reset" }).click();
+                await page.getByRole("button", { name: "Can't confirm?" }).click();

                // Finally we actually continue
                await page.getByRole("button", { name: "Continue" }).click();
--- a/playwright/e2e/oidc/oidc-native.spec.ts
+++ b/playwright/e2e/oidc/oidc-native.spec.ts
@@ -129,8 +129,8 @@ test.describe("OIDC Native", { tag: ["@no-firefox", "@no-webkit"] }, () => {
        await page.getByRole("button", { name: "Continue" }).click();
        await page.getByRole("button", { name: "Continue" }).click();

-        // We should be in (we see an error because we have no recovery key).
-        await expect(page.getByText("Unable to verify this device")).toBeVisible();
+        // We should be in
+        await expect(page.getByText("Confirm your identity")).toBeVisible();
    });

    test.describe("with force_verification on", () => {
@@ -162,7 +162,7 @@ test.describe("OIDC Native", { tag: ["@no-firefox", "@no-webkit"] }, () => {
            await page.getByRole("button", { name: "Continue" }).click();

            // We should be being warned that we need to verify (but we can't)
-            await expect(page.getByText("Unable to verify this device")).toBeVisible();
+            await expect(page.getByText("Confirm your identity")).toBeVisible();

            // And there should be no way to close this prompt
            await expect(page.getByRole("button", { name: "Skip verification for now" })).not.toBeVisible();
@@ -210,7 +210,7 @@ test.describe("OIDC Native", { tag: ["@no-firefox", "@no-webkit"] }, () => {
                await expect(page.getByRole("button", { name: "Skip verification for now" })).not.toBeVisible();

                // When we start verifying with another device
-                await page.getByRole("button", { name: "Verify with another device" }).click();
+                await page.getByRole("button", { name: "Use another device" }).click();

                // And then cancel it
                await page.getByRole("button", { name: "Close dialog" }).click();
@@ -227,7 +227,7 @@ test.describe("OIDC Native", { tag: ["@no-firefox", "@no-webkit"] }, () => {
 * Perform interactive emoji verification for a new device.
 */
 async function verifyUsingOtherDevice(deviceToVerifyPage: Page, alreadyVerifiedDevicePage: Page) {
-    await deviceToVerifyPage.getByRole("button", { name: "Verify with another device" }).click();
+    await deviceToVerifyPage.getByRole("button", { name: "Use another device" }).click();
    await alreadyVerifiedDevicePage.getByRole("button", { name: "Verify session" }).click();
    await alreadyVerifiedDevicePage.getByRole("button", { name: "Start" }).click();
    await alreadyVerifiedDevicePage.getByRole("button", { name: "They match" }).click();
--- a/playwright/e2e/read-receipts/index.ts
+++ b/playwright/e2e/read-receipts/index.ts
@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */

-import type { JSHandle, Page } from "@playwright/test";
+import type { JSHandle, Locator, Page } from "@playwright/test";
 import type { MatrixEvent, Room, IndexedDBStore, ReceiptType } from "matrix-js-sdk/src/matrix";
 import { test as base, expect } from "../../element-web-test";
 import { type Bot } from "../../pages/bot";
@@ -428,7 +428,7 @@ class Helpers {
    }

    getRoomListTile(label: string) {
-        return this.page.getByRole("treeitem", { name: new RegExp("^" + label) });
+        return this.page.getByRole("option", { name: new RegExp("^Open room " + label) });
    }

    /**
@@ -446,8 +446,8 @@ class Helpers {
     */
    async assertRead(room: RoomRef) {
        const tile = this.getRoomListTile(room.name);
-        await expect(tile.locator(".mx_NotificationBadge_dot")).not.toBeVisible();
-        await expect(tile.locator(".mx_NotificationBadge_count")).not.toBeVisible();
+        await expect(tile.getByTestId("notification-decoration")).not.toBeVisible();
+        await expect(tile).not.toHaveAccessibleName(/with \d* unread message/);
    }

    /**
@@ -463,15 +463,18 @@ class Helpers {
    /**
     * Assert a given room is marked as unread (via the room list tile)
     * @param room - the name of the room to check
-     * @param count - the numeric count to assert, or if "." specified then a bold/dot (no count) state is asserted
+     * @param count - the numeric count to assert
     */
-    async assertUnread(room: RoomRef, count: number | ".") {
+    async assertUnread(room: RoomRef, count: number) {
        const tile = this.getRoomListTile(room.name);
-        if (count === ".") {
-            await expect(tile.locator(".mx_NotificationBadge_dot")).toBeVisible();
-        } else {
-            await expect(tile.locator(".mx_NotificationBadge_count")).toHaveText(count.toString());
-        }
+        await expect(tile).toBeVisible();
+        await expect(tile).toHaveAccessibleName(/with \d* unread message/);
+    }
+
+    async unreadCountForRoomTile(tile: Locator): Promise<number> {
+        const accessibleName = await tile.getAttribute("aria-label");
+        const match = accessibleName?.match(/(\d+)\s+unread message/);
+        return match ? parseInt(match[1], 10) : 0;
    }

    /**
@@ -487,7 +490,7 @@ class Helpers {
        // .toBeLessThan doesn't have a retry mechanism, so we use .poll
        await expect
            .poll(async () => {
-                return parseInt(await tile.locator(".mx_NotificationBadge_count").textContent(), 10);
+                return this.unreadCountForRoomTile(tile);
            })
            .toBeLessThan(lessThan);
    }
@@ -505,7 +508,7 @@ class Helpers {
        // .toBeGreaterThan doesn't have a retry mechanism, so we use .poll
        await expect
            .poll(async () => {
-                return parseInt(await tile.locator(".mx_NotificationBadge_count").textContent(), 10);
+                return this.unreadCountForRoomTile(tile);
            })
            .toBeGreaterThan(greaterThan);
    }
@@ -596,24 +599,15 @@ class Helpers {
        await button.click();
    }

-    /**
-     * Toggle the `Show rooms with unread messages first` option for the room list
-     */
-    async toggleRoomUnreadOrder() {
-        await this.toggleRoomListMenu();
-        await this.page.getByText("Show rooms with unread messages first").click();
-        // Close contextual menu
-        await this.page.locator(".mx_ContextualMenu_background").click();
-    }
-
    /**
     * Assert that the room list is ordered as expected
     * @param rooms
     */
    async assertRoomListOrder(rooms: Array<{ name: string }>) {
-        const roomList = this.page.locator(".mx_RoomTile_title");
+        const roomListContainer = this.page.getByTestId("room-list");
+        const roomTiles = roomListContainer.getByRole("option");
        for (const [i, room] of rooms.entries()) {
-            await expect(roomList.nth(i)).toHaveText(room.name);
+            await expect(roomTiles.nth(i)).toHaveAccessibleName(new RegExp(`${room.name}`));
        }
    }
 }
--- a/playwright/e2e/read-receipts/read-receipts.spec.ts
+++ b/playwright/e2e/read-receipts/read-receipts.spec.ts
@@ -112,7 +112,7 @@ test.describe("Read receipts", { tag: "@mergequeue" }, () => {
        const main3 = await sendMessage(bot);

        // (So the room starts off unread)
-        await expect(page.getByLabel(`${otherRoomName} 3 unread messages.`)).toBeVisible();
+        await expect(page.getByLabel(`${otherRoomName} with 3 unread messages.`)).toBeVisible();

        // When we send a threaded receipt for the last event in main
        // And an unthreaded receipt for an earlier event
@@ -147,13 +147,13 @@ test.describe("Read receipts", { tag: "@mergequeue" }, () => {
        await sendMessage(bot);

        // (The room starts off unread)
-        await expect(page.getByLabel(`${otherRoomName} 3 unread messages.`)).toBeVisible();
+        await expect(page.getByLabel(`${otherRoomName} with 3 unread messages.`)).toBeVisible();

        // When we send a threaded receipt for the second-last event in main
        await sendThreadedReadReceipt(app, main2);

        // Then the room has only one unread
-        await expect(page.getByLabel(`${otherRoomName} 1 unread message.`)).toBeVisible();
+        await expect(page.getByLabel(`${otherRoomName} with 1 unread message.`)).toBeVisible();
    });

    test("Considers room read if there is only a main thread and we have a main receipt", async ({
@@ -166,7 +166,7 @@ test.describe("Read receipts", { tag: "@mergequeue" }, () => {
        await sendMessage(bot);
        const main3 = await sendMessage(bot);
        // (The room starts off unread)
-        await expect(page.getByLabel(`${otherRoomName} 3 unread messages.`)).toBeVisible();
+        await expect(page.getByLabel(`${otherRoomName} with 3 unread messages.`)).toBeVisible();

        // When we send a threaded receipt for the last event in main
        await sendThreadedReadReceipt(app, main3);
@@ -186,7 +186,7 @@ test.describe("Read receipts", { tag: "@mergequeue" }, () => {
        const thread1a = await botSendThreadMessage(bot, main1.event_id);
        await botSendThreadMessage(bot, main1.event_id);
        // 1 unread on the main thread, 2 in the new thread that aren't shown
-        await expect(page.getByLabel(`${otherRoomName} 1 unread message.`)).toBeVisible();
+        await expect(page.getByLabel(`${otherRoomName} with 1 unread message.`)).toBeVisible();

        // When we send receipts for main, and the second-last in the thread
        await sendThreadedReadReceipt(app, main1);
@@ -203,7 +203,7 @@ test.describe("Read receipts", { tag: "@mergequeue" }, () => {
        await botSendThreadMessage(bot, main1.event_id);
        const thread1b = await botSendThreadMessage(bot, main1.event_id);
        // 1 unread on the main thread, 2 in the new thread which don't show
-        await expect(page.getByLabel(`${otherRoomName} 1 unread message.`)).toBeVisible();
+        await expect(page.getByLabel(`${otherRoomName} with 1 unread message.`)).toBeVisible();

        // When we send receipts for main, and the last in the thread
        await sendThreadedReadReceipt(app, main1);
@@ -226,7 +226,7 @@ test.describe("Read receipts", { tag: "@mergequeue" }, () => {
        const thread1a = await botSendThreadMessage(bot, main1.event_id);
        await botSendThreadMessage(bot, main1.event_id);
        // 1 unread on the main thread, 2 in the new thread which don't count
-        await expect(page.getByLabel(`${otherRoomName} 1 unread message.`)).toBeVisible();
+        await expect(page.getByLabel(`${otherRoomName} with 1 unread message.`)).toBeVisible();

        // When we send an unthreaded receipt for the second-last in the thread
        await sendUnthreadedReadReceipt(app, thread1a);
@@ -251,7 +251,7 @@ test.describe("Read receipts", { tag: "@mergequeue" }, () => {
        const thread1b = await botSendThreadMessage(bot, main1.event_id);
        await sendMessage(bot);
        // 2 unreads on the main thread, 2 in the new thread which don't count
-        await expect(page.getByLabel(`${otherRoomName} 2 unread messages.`)).toBeVisible();
+        await expect(page.getByLabel(`${otherRoomName} with 2 unread messages.`)).toBeVisible();

        // When we send an unthreaded receipt for the last in the thread
        await sendUnthreadedReadReceipt(app, thread1b);
@@ -259,7 +259,7 @@ test.describe("Read receipts", { tag: "@mergequeue" }, () => {
        // Then the room has only one unread - the one in the
        // main thread, because it is later than the unthreaded
        // receipt.
-        await expect(page.getByLabel(`${otherRoomName} 1 unread message.`)).toBeVisible();
+        await expect(page.getByLabel(`${otherRoomName} with 1 unread message.`)).toBeVisible();
    });

    /**
@@ -291,7 +291,9 @@ test.describe("Read receipts", { tag: "@mergequeue" }, () => {
        const uriEncodedLastMessageId = encodeURIComponent(lastMessageId);

        // wait until all messages have been received
-        await expect(page.getByLabel(`${otherRoomName} ${sendMessageResponses.length} unread messages.`)).toBeVisible();
+        await expect(
+            page.getByLabel(`${otherRoomName} with ${sendMessageResponses.length} unread messages.`),
+        ).toBeVisible();

        // switch to the room with the messages
        await page.goto(`/#/room/${otherRoomId}`);
--- a/playwright/e2e/read-receipts/room-list-order.spec.ts
+++ b/playwright/e2e/read-receipts/room-list-order.spec.ts
@@ -12,7 +12,7 @@ import { test } from ".";

 test.describe("Read receipts", { tag: "@mergequeue" }, () => {
    test.describe("Room list order", () => {
-        test("Rooms with unread messages appear at the top of room list if 'unread first' is selected", async ({
+        test("Rooms with unread messages appear at the top of room list with default 'activity' ordering", async ({
            roomAlpha: room1,
            roomBeta: room2,
            util,
@@ -22,15 +22,18 @@ test.describe("Read receipts", { tag: "@mergequeue" }, () => {
            await util.goTo(room2);

            // Display the unread first room
-            await util.toggleRoomUnreadOrder();
            await util.receiveMessages(room1, ["Msg1"]);
            await page.reload();

+            // switch rooms so they can re-order in the list
+            await util.goTo(room1);
+
            // Room 1 has an unread message and should be displayed first
+            // (as the default is to sort by activity)
            await util.assertRoomListOrder([room1, room2]);
        });

-        test("Rooms with unread threads appear at the top of room list if 'unread first' is selected", async ({
+        test("Rooms with unread threads appear at the top of room list with default 'activity' order", async ({
            roomAlpha: room1,
            roomBeta: room2,
            util,
@@ -42,7 +45,6 @@ test.describe("Read receipts", { tag: "@mergequeue" }, () => {
            await util.assertRead(room1);

            // Display the unread first room
-            await util.toggleRoomUnreadOrder();
            await util.receiveMessages(room1, [msg.threadedOff("Msg1", "Resp1")]);
            await util.saveAndReload();

--- a/playwright/e2e/release-announcement/index.ts
+++ b/playwright/e2e/release-announcement/index.ts
@@ -30,9 +30,8 @@ export class Helpers {
    /**
     * Get the release announcement with the given name.
     * @param name
-     * @private
     */
-    private getReleaseAnnouncement(name: string) {
+    public getReleaseAnnouncement(name: string) {
        return this.page.getByRole("dialog", { name });
    }

@@ -55,16 +54,6 @@ export class Helpers {
    assertReleaseAnnouncementIsNotVisible(name: string) {
        return expect(this.getReleaseAnnouncement(name)).not.toBeVisible();
    }
-
-    /**
-     * Mark the release announcement with the given name as read.
-     * If the release announcement is not visible, this will throw an error.
-     * @param name
-     */
-    async markReleaseAnnouncementAsRead(name: string) {
-        const dialog = this.getReleaseAnnouncement(name);
-        await dialog.getByRole("button", { name: "Ok" }).click();
-    }
 }

 export { expect };
--- a/playwright/e2e/release-announcement/releaseAnnouncement.spec.ts
+++ b/playwright/e2e/release-announcement/releaseAnnouncement.spec.ts
@@ -22,25 +22,28 @@ test.describe("Release announcement", () => {
            await app.viewRoomById(roomId);
            await use({ roomId });
        },
+        labsFlags: ["feature_new_room_list"],
    });

    test(
-        "should display the pinned messages release announcement",
+        "should display the new room list release announcement",
        { tag: "@screenshot" },
        async ({ page, app, room, util }) => {
-            await app.toggleRoomInfoPanel();
+            // dismiss the toast so the announcement appears
+            await page.getByRole("button", { name: "Dismiss" }).click();

-            const name = "All new pinned messages";
+            const name = "Chats has a new look!";

            // The release announcement should be displayed
            await util.assertReleaseAnnouncementIsVisible(name);
            // Hide the release announcement
-            await util.markReleaseAnnouncementAsRead(name);
+            const dialog = util.getReleaseAnnouncement(name);
+            await dialog.getByRole("button", { name: "Next" }).click();
+
            await util.assertReleaseAnnouncementIsNotVisible(name);

            await page.reload();
-            await app.toggleRoomInfoPanel();
-            await expect(page.getByRole("menuitem", { name: "Pinned messages" })).toBeVisible();
+            await expect(page.getByRole("button", { name: "Room options" })).toBeVisible();
            // Check that once the release announcement has been marked as viewed, it does not appear again
            await util.assertReleaseAnnouncementIsNotVisible(name);
        },
--- a/playwright/e2e/room/create-room.spec.ts
+++ b/playwright/e2e/room/create-room.spec.ts
@@ -0,0 +1,113 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2022, 2023 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { SettingLevel } from "../../../src/settings/SettingLevel";
+import { UIFeature } from "../../../src/settings/UIFeature";
+import { test, expect } from "../../element-web-test";
+
+const name = "Test room";
+const topic = "A decently explanatory topic for a test room.";
+
+test.describe("Create Room", () => {
+    test.use({ displayName: "Jim" });
+
+    test(
+        "should create a public room with name, topic & address set",
+        { tag: "@screenshot" },
+        async ({ page, user, app, axe }) => {
+            const dialog = await app.openCreateRoomDialog();
+            // Fill name & topic
+            await dialog.getByRole("textbox", { name: "Name" }).fill(name);
+            await dialog.getByRole("textbox", { name: "Topic" }).fill(topic);
+            // Change room to public
+            await dialog.getByRole("button", { name: "Room visibility" }).click();
+            await dialog.getByRole("option", { name: "Public room" }).click();
+            // Fill room address
+            await dialog.getByRole("textbox", { name: "Room address" }).fill("test-create-room-standard");
+
+            axe.disableRules("color-contrast"); // XXX: Inheriting colour contrast issues from room view.
+            await expect(axe).toHaveNoViolations();
+            // Snapshot it
+            await expect(dialog).toMatchScreenshot("create-room.png");
+
+            // Submit
+            await dialog.getByRole("button", { name: "Create room" }).click();
+
+            await expect(page).toHaveURL(new RegExp(`/#/room/#test-create-room-standard:${user.homeServer}`));
+            const header = page.locator(".mx_RoomHeader");
+            await expect(header).toContainText(name);
+        },
+    );
+
+    test("should allow us to start a chat and show encryption state", async ({ page, user, app }) => {
+        await page.getByRole("button", { name: "Add", exact: true }).click();
+        await page.getByRole("menuitem", { name: "Start chat" }).click();
+
+        await page.getByTestId("invite-dialog-input").fill(user.userId);
+
+        await page.getByRole("button", { name: "Go" }).click();
+
+        await expect(page.getByText("Encryption enabled")).toBeVisible();
+        await expect(page.getByText("Send your first message to")).toBeVisible();
+
+        const composer = page.getByRole("region", { name: "Message composer" });
+        await expect(composer.getByRole("textbox", { name: "Send a message…" })).toBeVisible();
+    });
+
+    test("should create a video room", { tag: "@screenshot" }, async ({ page, user, app }) => {
+        await app.settings.setValue("feature_video_rooms", null, SettingLevel.DEVICE, true);
+
+        const dialog = await app.openCreateRoomDialog("New video room");
+        // Fill name & topic
+        await dialog.getByRole("textbox", { name: "Name" }).fill(name);
+        await dialog.getByRole("textbox", { name: "Topic" }).fill(topic);
+        // Change room to public
+        await dialog.getByRole("button", { name: "Room visibility" }).click();
+        await dialog.getByRole("option", { name: "Public room" }).click();
+        // Fill room address
+        await dialog.getByRole("textbox", { name: "Room address" }).fill("test-create-room-video");
+        // Snapshot it
+        await expect(dialog).toMatchScreenshot("create-video-room.png");
+
+        // Submit
+        await dialog.getByRole("button", { name: "Create video room" }).click();
+
+        await expect(page).toHaveURL(new RegExp(`/#/room/#test-create-room-video:${user.homeServer}`));
+        const header = page.locator(".mx_RoomHeader");
+        await expect(header).toContainText(name);
+    });
+
+    test.describe("Should hide public room option if not allowed", () => {
+        test.use({
+            config: {
+                setting_defaults: {
+                    [UIFeature.AllowCreatingPublicRooms]: false,
+                },
+            },
+        });
+
+        test("should disallow creating public rooms", { tag: "@screenshot" }, async ({ page, user, app, axe }) => {
+            const dialog = await app.openCreateRoomDialog();
+            // Fill name & topic
+            await dialog.getByRole("textbox", { name: "Name" }).fill(name);
+            await dialog.getByRole("textbox", { name: "Topic" }).fill(topic);
+
+            axe.disableRules("color-contrast"); // XXX: Inheriting colour contrast issues from room view.
+            await expect(axe).toHaveNoViolations();
+            // Snapshot it
+            await expect(dialog).toMatchScreenshot("create-room-no-public.png");
+
+            // Submit
+            await dialog.getByRole("button", { name: "Create room" }).click();
+
+            await expect(page).toHaveURL(new RegExp(`/#/room/!.+`));
+            const header = page.locator(".mx_RoomHeader");
+            await expect(header).toContainText(name);
+        });
+    });
+});
--- a/playwright/e2e/room/room-header.spec.ts
+++ b/playwright/e2e/room/room-header.spec.ts
@@ -15,6 +15,11 @@ import { type ElementAppPage } from "../../pages/ElementAppPage";
 test.describe("Room Header", () => {
    test.use({
        displayName: "Sakura",
+        config: {
+            features: {
+                feature_new_room_list: false,
+            },
+        },
    });

    test.describe("with feature_notifications enabled", () => {
@@ -23,7 +28,7 @@ test.describe("Room Header", () => {
        });
        test("should render default buttons properly", { tag: "@screenshot" }, async ({ page, app, user }) => {
            await app.client.createRoom({ name: "Test Room" });
-            await app.viewRoomByName("Test Room");
+            await app.viewRoomByNameOnOldRoomList("Test Room");

            const header = page.locator(".mx_RoomHeader");

@@ -61,7 +66,7 @@ test.describe("Room Header", () => {
                    "officia deserunt mollit anim id est laborum.";

                await app.client.createRoom({ name: LONG_ROOM_NAME });
-                await app.viewRoomByName(LONG_ROOM_NAME);
+                await app.viewRoomByNameOnOldRoomList(LONG_ROOM_NAME);

                const header = page.locator(".mx_RoomHeader");
                // Wait until the room name is set
@@ -86,7 +91,7 @@ test.describe("Room Header", () => {

        test("should render room header icon correctly", { tag: "@screenshot" }, async ({ page, app, user }) => {
            await app.client.createRoom({ name: "Test Room", visibility: "public" as Visibility });
-            await app.viewRoomByName("Test Room");
+            await app.viewRoomByNameOnOldRoomList("Test Room");

            const header = page.locator(".mx_RoomHeader");

@@ -106,7 +111,7 @@ test.describe("Room Header", () => {

            await page.getByRole("button", { name: "Create video room" }).click();

-            await app.viewRoomByName("Test video room");
+            await app.viewRoomByNameOnOldRoomList("Test video room");
        };

        test.describe("and with feature_notifications enabled", () => {
--- a/playwright/e2e/room_options/marked_unread.spec.ts
+++ b/playwright/e2e/room_options/marked_unread.spec.ts
@@ -34,7 +34,7 @@ test.describe("Mark as Unread", () => {
        await bot.sendMessage(roomId, "I am a robot. Beep.");

        // Regular notification on new message
-        await expect(page.getByLabel(TEST_ROOM_NAME + " 1 unread message.")).toBeVisible();
+        await expect(page.getByLabel(`Open room ${TEST_ROOM_NAME} with 1 unread message.`)).toBeVisible();
        await expect(page).toHaveTitle("Element [1]");

        await page.goto("/#/room/" + roomId);
@@ -48,9 +48,12 @@ test.describe("Mark as Unread", () => {

        const roomTile = page.getByLabel(TEST_ROOM_NAME);
        await roomTile.focus();
-        await roomTile.getByRole("button", { name: "Room options" }).click();
+        await roomTile.getByRole("button", { name: "More Options" }).click();
        await page.getByRole("menuitem", { name: "Mark as unread" }).click();

-        await expect(page.getByLabel(TEST_ROOM_NAME + " Unread messages.")).toBeVisible();
+        // focus the user menu to avoid to have hover decoration
+        await page.getByRole("button", { name: "User menu" }).focus();
+
+        await expect(roomTile.getByTestId("notification-decoration")).toBeVisible();
    });
 });
--- a/playwright/e2e/settings/encryption-user-tab/encryption-tab.spec.ts
+++ b/playwright/e2e/settings/encryption-user-tab/encryption-tab.spec.ts
@@ -160,15 +160,15 @@ test.describe("Encryption tab", () => {

            // We will reset our identity
            await settings.getByRole("button", { name: "Verify this device" }).click();
-            await page.getByRole("button", { name: "Proceed with reset" }).click();
+            await page.getByRole("button", { name: "Can't confirm?" }).click();

            // First try cancelling and restarting
            await page.getByRole("button", { name: "Cancel" }).click();
-            await page.getByRole("button", { name: "Proceed with reset" }).click();
+            await page.getByRole("button", { name: "Can't confirm?" }).click();

            // Then click outside the dialog and restart
            await page.locator("li").filter({ hasText: "Encryption" }).click({ force: true });
-            await page.getByRole("button", { name: "Proceed with reset" }).click();
+            await page.getByRole("button", { name: "Can't confirm?" }).click();

            // Finally we actually continue
            await page.getByRole("button", { name: "Continue" }).click();
--- a/playwright/e2e/settings/encryption-user-tab/index.ts
+++ b/playwright/e2e/settings/encryption-user-tab/index.ts
@@ -43,7 +43,7 @@ class Helpers {
     */
    async verifyDevice(recoveryKey: GeneratedSecretStorageKey) {
        // Select the security phrase
-        await this.page.getByRole("button", { name: "Verify with Recovery Key" }).click();
+        await this.page.getByRole("button", { name: "Use recovery key" }).click();
        await this.enterRecoveryKey(recoveryKey);
        await this.page.getByRole("button", { name: "Done" }).click();
    }
@@ -104,7 +104,10 @@ class Helpers {

        const clipboardContent = await this.app.getClipboard();
        await dialog.getByRole("textbox").fill(clipboardContent);
-        await dialog.getByRole("button", { name: confirmButtonLabel }).click();
+        const button = dialog.getByRole("button", { name: confirmButtonLabel });
+        await button.click();
+        // Button should disable immediately after clicking.
+        await expect(button).toBeDisabled();
        await expect(this.getEncryptionRecoverySection()).toMatchScreenshot("default-recovery.png");
    }
 }
--- a/playwright/e2e/settings/notifications/notifications-settings-2-tab.spec.ts
+++ b/playwright/e2e/settings/notifications/notifications-settings-2-tab.spec.ts
@@ -0,0 +1,28 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { test, expect } from "../../../element-web-test";
+import { SettingLevel } from "../../../../src/settings/SettingLevel";
+
+test.describe("Notifications 2 tab", () => {
+    test.use({
+        displayName: "Alice",
+    });
+
+    test("should display notification settings", { tag: "@screenshot" }, async ({ page, app, user, axe }) => {
+        await app.settings.setValue("feature_notification_settings2", null, SettingLevel.DEVICE, true);
+        await page.setViewportSize({ width: 1024, height: 2000 });
+        const settings = await app.settings.openUserSettings("Notifications");
+
+        axe.disableRules("color-contrast"); // XXX: Inheriting colour contrast issues from room view.
+        await expect(axe).toHaveNoViolations();
+        await expect(settings).toMatchScreenshot("standard-notifications-2-settings.png", {
+            // Mask the mxid.
+            mask: [settings.locator("#mx_NotificationSettings2_MentionCheckbox span")],
+        });
+    });
+});
--- a/playwright/e2e/settings/notifications/notifications-settings-tab.spec.ts
+++ b/playwright/e2e/settings/notifications/notifications-settings-tab.spec.ts
@@ -0,0 +1,25 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { test, expect } from "../../../element-web-test";
+
+test.describe("Notifications tab", () => {
+    test.use({
+        displayName: "Alice",
+    });
+
+    test("should display notification settings", { tag: "@screenshot" }, async ({ page, app, user, axe }) => {
+        await page.setViewportSize({ width: 1024, height: 1400 });
+        const settings = await app.settings.openUserSettings("Notifications");
+        await settings.getByLabel("Enable notifications for this account").check();
+        await settings.getByLabel("Enable notifications for this device").check();
+
+        axe.disableRules("color-contrast"); // XXX: Inheriting colour contrast issues from room view.
+        await expect(axe).toHaveNoViolations();
+        await expect(settings).toMatchScreenshot("standard-notification-settings.png");
+    });
+});
--- a/playwright/e2e/settings/room-settings/roles-permissions-room-settings-tab.spec.ts
+++ b/playwright/e2e/settings/room-settings/roles-permissions-room-settings-tab.spec.ts
@@ -8,7 +8,7 @@

 import { type Locator } from "@playwright/test";

-import { test, expect } from "../../element-web-test";
+import { test, expect } from "../../../element-web-test";

 test.describe("Roles & Permissions room settings tab", () => {
    const roomName = "Test room";
--- a/playwright/e2e/settings/room-settings/room-security-tab.spec.ts
+++ b/playwright/e2e/settings/room-settings/room-security-tab.spec.ts
@@ -0,0 +1,121 @@
+/*
+ * Copyright 2025 New Vector Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import { type Locator } from "@playwright/test";
+
+import { test, expect } from "../../../element-web-test";
+
+test.describe("Roles & Permissions room settings tab", () => {
+    const roomName = "Test room";
+
+    test.use({
+        displayName: "Alice",
+    });
+
+    let settings: Locator;
+
+    test.beforeEach(async ({ user, app }) => {
+        await app.client.createRoom({
+            name: roomName,
+            power_level_content_override: {
+                events: {
+                    // Set the join rules as lower than the history vis to test an edge case.
+                    ["m.room.join_rules"]: 80,
+                    ["m.room.history_visibility"]: 100,
+                },
+            },
+        });
+        await app.viewRoomByName(roomName);
+        settings = await app.settings.openRoomSettings("Security & Privacy");
+    });
+
+    test(
+        "should be able to toggle on encryption in a room",
+        { tag: "@screenshot" },
+        async ({ page, app, user, axe }) => {
+            await page.setViewportSize({ width: 1024, height: 1400 });
+            const encryptedToggle = settings.getByLabel("Encrypted");
+            await encryptedToggle.click();
+
+            // Accept the dialog.
+            await page.getByRole("button", { name: "Ok " }).click();
+
+            await expect(encryptedToggle).toBeChecked();
+            await expect(encryptedToggle).toBeDisabled();
+
+            await settings.getByLabel("Only send messages to verified users.").check();
+
+            axe.disableRules("color-contrast"); // XXX: Inheriting colour contrast issues from room view.
+            await expect(axe).toHaveNoViolations();
+            await expect(settings).toMatchScreenshot("room-security-settings.png");
+        },
+    );
+
+    test(
+        "should automatically adjust history visibility when a room is changed from public to private",
+        { tag: "@screenshot" },
+        async ({ page, app, user, axe }) => {
+            await page.setViewportSize({ width: 1024, height: 1400 });
+
+            const settingsGroupAccess = page.getByRole("group", { name: "Access" });
+            const settingsGroupHistory = page.getByRole("group", { name: "Who can read history?" });
+
+            await settingsGroupAccess.getByText("Public").click();
+            await settingsGroupHistory.getByText("Anyone").click();
+
+            // Test that we have the warning appear.
+            axe.disableRules("color-contrast"); // XXX: Inheriting colour contrast issues from room view.
+            await expect(axe).toHaveNoViolations();
+            await expect(settings).toMatchScreenshot("room-security-settings-world-readable.png");
+
+            await settingsGroupAccess.getByText("Private (invite only)").click();
+            // Element should have automatically set the room to "sharing" history visibility
+            await expect(
+                settingsGroupHistory.getByText("Members only (since the point in time of selecting this option)"),
+            ).toBeChecked();
+        },
+    );
+
+    test(
+        "should disallow changing from public to private if the user cannot alter history",
+        { tag: "@screenshot" },
+        async ({ page, app, user, bot }) => {
+            await page.setViewportSize({ width: 1024, height: 1400 });
+
+            const settingsGroupAccess = page.getByRole("group", { name: "Access" });
+            const settingsGroupHistory = page.getByRole("group", { name: "Who can read history?" });
+
+            await settingsGroupAccess.getByText("Public").click();
+            await settingsGroupHistory.getByText("Anyone").click();
+
+            // De-op ourselves
+            await app.settings.switchTab("Roles & Permissions");
+
+            // Wait for the permissions list to be visible
+            await expect(settings.getByRole("heading", { name: "Permissions" })).toBeVisible();
+
+            const ourComboBox = settings.getByRole("combobox", { name: user.userId });
+            await ourComboBox.selectOption("Custom level");
+            const ourPl = settings.getByRole("spinbutton", { name: user.userId });
+            await ourPl.fill("80");
+            await ourPl.blur(); // Shows a warning on
+
+            // Accept the de-op
+            await page.getByRole("button", { name: "Continue" }).click();
+            await settings.getByRole("button", { name: "Apply", disabled: false }).click();
+
+            await app.settings.switchTab("Security & Privacy");
+
+            await settingsGroupAccess.getByText("Private (invite only)").click();
+            // Element should have automatically set the room to "sharing" history visibility
+            const errorDialog = page.getByRole("heading", { name: "Cannot make room private" });
+            await expect(errorDialog).toBeVisible();
+            await errorDialog.getByLabel("OK");
+            await expect(settingsGroupHistory.getByText("Anyone")).toBeChecked();
+        },
+    );
+});
--- a/playwright/e2e/settings/room-settings/room-video-tab.spec.ts
+++ b/playwright/e2e/settings/room-settings/room-video-tab.spec.ts
@@ -0,0 +1,42 @@
+/*
+ * Copyright 2025 New Vector Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import { type Locator } from "@playwright/test";
+
+import { test, expect } from "../../../element-web-test";
+import { SettingLevel } from "../../../../src/settings/SettingLevel";
+
+test.describe("Voice & Video room settings tab", () => {
+    const roomName = "Test room";
+
+    test.use({
+        displayName: "Alice",
+    });
+
+    let settings: Locator;
+
+    test.beforeEach(async ({ user, app, page }) => {
+        // Execute client actions before setting, as the setting will force a reload.
+        await app.client.createRoom({ name: roomName });
+        await app.settings.setValue("feature_group_calls", null, SettingLevel.DEVICE, true);
+        await app.viewRoomByName(roomName);
+        settings = await app.settings.openRoomSettings("Voice & Video");
+    });
+
+    test(
+        "should be able to toggle on Element Call in the room",
+        { tag: "@screenshot" },
+        async ({ page, app, user, axe }) => {
+            await page.setViewportSize({ width: 1024, height: 1400 });
+            const callToggle = settings.getByLabel("Enable Element Call as an additional calling option in this room");
+            await callToggle.check();
+            axe.disableRules("color-contrast"); // XXX: Inheriting colour contrast issues from room view.
+            await expect(axe).toHaveNoViolations();
+            await expect(settings).toMatchScreenshot("room-video-settings.png");
+        },
+    );
+});
--- a/playwright/e2e/settings/security-user-settings-tab.spec.ts
+++ b/playwright/e2e/settings/security-user-settings-tab.spec.ts
@@ -41,6 +41,18 @@ test.describe("Security user settings tab", () => {
            });
        });

+        test("should render the security tab", { tag: "@screenshot" }, async ({ app, page, user }) => {
+            await page.setViewportSize({ width: 1024, height: 1400 });
+            const tab = await app.settings.openUserSettings("Security");
+            await expect(tab).toMatchScreenshot("security-settings-tab.png", {
+                mask: [
+                    // Contains IM name.
+                    tab.locator("#mx_SetIntegrationManager_BodyText"),
+                    tab.locator("#mx_SetIntegrationManager_ManagerName"),
+                ],
+            });
+        });
+
        test("should be able to set an ID server", async ({ app, context, user, page }) => {
            const tab = await app.settings.openUserSettings("Security");

--- a/playwright/e2e/sliding-sync/sliding-sync.spec.ts
+++ b/playwright/e2e/sliding-sync/sliding-sync.spec.ts
@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */

-import { type Page, type Request } from "@playwright/test";
+import { type Locator, type Page, type Request } from "@playwright/test";

 import { test as base, expect } from "../../element-web-test";
 import type { ElementAppPage } from "../../pages/ElementAppPage";
@@ -38,7 +38,7 @@ const test = base.extend<{

 test.describe("Sliding Sync", () => {
    const checkOrder = async (wantOrder: string[], page: Page) => {
-        await expect(page.getByRole("group", { name: "Rooms" }).locator(".mx_RoomTile_title")).toHaveText(wantOrder);
+        await expect(page.getByTestId("room-list").locator(".mx_RoomListItemView_text")).toHaveText(wantOrder);
    };

    const bumpRoom = async (roomId: string, app: ElementAppPage) => {
@@ -50,6 +50,18 @@ test.describe("Sliding Sync", () => {
        });
    };

+    function getPrimaryFilters(page: Page): Locator {
+        return page.getByTestId("primary-filters");
+    }
+
+    function getRoomOptionsMenu(page: Page): Locator {
+        return page.getByRole("button", { name: "Room Options" });
+    }
+
+    function getFilterExpandButton(page: Page): Locator {
+        return getPrimaryFilters(page).getByRole("button", { name: "Expand filter list" });
+    }
+
    test.use({
        config: {
            features: {
@@ -69,20 +81,15 @@ test.describe("Sliding Sync", () => {
        // create rooms and check room names are correct
        for (const fruit of ["Apple", "Pineapple", "Orange"]) {
            await app.client.createRoom({ name: fruit });
-            await expect(page.getByRole("treeitem", { name: fruit })).toBeVisible();
+            await expect(page.getByRole("option", { name: `Open room ${fruit}` })).toBeVisible();
        }
-
+        const roomList = page.getByTestId("room-list");
        // Check count, 3 fruits + 1 testRoom = 4
-        await expect(page.locator(".mx_RoomSublist_tiles").getByRole("treeitem")).toHaveCount(4);
+        await expect(roomList.getByRole("option")).toHaveCount(4);
        await checkOrder(["Orange", "Pineapple", "Apple", "Test Room"], page);

-        const locator = page.getByRole("group", { name: "Rooms" }).locator(".mx_RoomSublist_headerContainer");
-        await locator.hover();
-        await locator.getByRole("button", { name: "List options" }).click();
-
-        // force click as the radio button's size is zero
-        await page.getByRole("menuitemradio", { name: "A-Z" }).dispatchEvent("click");
-        await expect(page.locator(".mx_StyledRadioButton_checked").getByText("A-Z")).toBeVisible();
+        await getRoomOptionsMenu(page).click();
+        await page.getByRole("menuitemradio", { name: "A-Z" }).click();

        await checkOrder(["Apple", "Orange", "Pineapple", "Test Room"], page);
    });
@@ -93,11 +100,11 @@ test.describe("Sliding Sync", () => {
        for (const fruit of ["Apple", "Pineapple", "Orange"]) {
            const id = await app.client.createRoom({ name: fruit });
            roomIds.push(id);
-            await expect(page.getByRole("treeitem", { name: fruit })).toBeVisible();
+            await expect(page.getByRole("option", { name: `Open room ${fruit}` })).toBeVisible();
        }

        // Select the Test Room
-        await page.getByRole("treeitem", { name: "Test Room" }).click();
+        await page.getByRole("option", { name: "Open room Test Room" }).click();
        const [apple, pineapple, orange] = roomIds;
        await checkOrder(["Orange", "Pineapple", "Apple", "Test Room"], page);
        await bumpRoom(apple, app);
@@ -116,7 +123,7 @@ test.describe("Sliding Sync", () => {
        for (const fruit of ["Apple", "Pineapple", "Orange"]) {
            const id = await app.client.createRoom({ name: fruit });
            roomIds.push(id);
-            await expect(page.getByRole("treeitem", { name: fruit })).toBeVisible();
+            await expect(page.getByRole("option", { name: `Open room ${fruit}` })).toBeVisible();
        }

        // Given a list of Orange, Pineapple, Apple - if Pineapple is active and a message is sent in Apple, the list should
@@ -124,7 +131,7 @@ test.describe("Sliding Sync", () => {
        // be Apple, Orange Pineapple - only when you click on a different room do things reshuffle.

        // Select the Pineapple room
-        await page.getByRole("treeitem", { name: "Pineapple" }).click();
+        await page.getByRole("option", { name: "Open room Pineapple" }).click();
        await checkOrder(["Orange", "Pineapple", "Apple", "Test Room"], page);

        // Move Apple
@@ -132,7 +139,7 @@ test.describe("Sliding Sync", () => {
        await checkOrder(["Apple", "Pineapple", "Orange", "Test Room"], page);

        // Select the Test Room
-        await page.getByRole("treeitem", { name: "Test Room" }).click();
+        await page.getByRole("option", { name: "Open room Test Room" }).click();

        // the rooms reshuffle to match reality
        await checkOrder(["Apple", "Orange", "Pineapple", "Test Room"], page);
@@ -142,25 +149,20 @@ test.describe("Sliding Sync", () => {
        // send a message in the test room: unread notification count should increment
        await bob.sendMessage(testRoom.roomId, "Hello World");

-        const treeItemLocator1 = page.getByRole("treeitem", { name: "Test Room 1 unread message." });
-        await expect(treeItemLocator1.locator(".mx_NotificationBadge_count")).toHaveText("1");
-        // await expect(page.locator(".mx_NotificationBadge")).not.toHaveClass("mx_NotificationBadge_highlighted");
-        await expect(treeItemLocator1.locator(".mx_NotificationBadge")).not.toHaveClass(
-            /mx_NotificationBadge_highlighted/,
-        );
+        const itemLocator1 = page.getByRole("option", { name: "Open room David Langley with 1 unread message." });
+        await expect(itemLocator1.getByTestId("notification-decoration")).toHaveText("1");

        // send an @mention: highlight count (red) should be 2.
        await bob.sendMessage(testRoom.roomId, `Hello ${user.displayName}`);
-        const treeItemLocator2 = page.getByRole("treeitem", {
-            name: "Test Room 2 unread messages including mentions.",
+        const itemLocator2 = page.getByRole("treeitem", {
+            name: "Open room Test Room 2 unread messages including mentions.",
        });
-        await expect(treeItemLocator2.locator(".mx_NotificationBadge_count")).toHaveText("2");
-        await expect(treeItemLocator2.locator(".mx_NotificationBadge")).toHaveClass(/mx_NotificationBadge_highlighted/);
+        await expect(itemLocator2.getByTestId("notification-decoration")).toHaveText("2");

        // click on the room, the notif counts should disappear
-        await page.getByRole("treeitem", { name: "Test Room 2 unread messages including mentions." }).click();
+        await page.getByRole("option", { name: "Open room Test Room 2 unread messages including mentions." }).click();
        await expect(
-            page.getByRole("treeitem", { name: "Test Room" }).locator("mx_NotificationBadge_count"),
+            page.getByRole("option", { name: "Open room Test Room" }).getByTestId("notification-decoration"),
        ).not.toBeAttached();
    });

@@ -175,7 +177,9 @@ test.describe("Sliding Sync", () => {
        // wait for this message to arrive, tell by the room list resorting
        await checkOrder(["Test Room", "Dummy"], page);

-        await expect(page.getByRole("treeitem", { name: "Test Room" }).locator(".mx_NotificationBadge")).toBeAttached();
+        await expect(
+            page.getByRole("option", { name: "Open room Test Room" }).getByTestId("notification-decoration"),
+        ).toBeAttached();
    });

    test("should update user settings promptly", async ({ page, app }) => {
@@ -193,7 +197,7 @@ test.describe("Sliding Sync", () => {
        for (const fruit of ["Apple", "Pineapple", "Orange"]) {
            const id = await app.client.createRoom({ name: fruit });
            roomIds.push(id);
-            await expect(page.getByRole("treeitem", { name: fruit })).toBeVisible();
+            await expect(page.getByRole("option", { name: `Open room ${fruit}` })).toBeVisible();
        }
        const [roomAId, roomPId] = roomIds;

@@ -206,7 +210,7 @@ test.describe("Sliding Sync", () => {
        // Select the Test Room and wait for playwright to get the request
        const [request] = await Promise.all([
            page.waitForRequest(matchRoomSubRequest(roomAId)),
-            page.getByRole("treeitem", { name: "Apple", exact: true }).click(),
+            page.getByRole("option", { name: "Open room Apple", exact: true }).click(),
        ]);
        const roomSubscriptions = request.postDataJSON().room_subscriptions;
        expect(roomSubscriptions, "room_subscriptions is object").toBeDefined();
@@ -214,7 +218,7 @@ test.describe("Sliding Sync", () => {
        // Switch to another room and wait for playwright to get the request
        await Promise.all([
            page.waitForRequest(matchRoomSubRequest(roomPId)),
-            page.getByRole("treeitem", { name: "Pineapple", exact: true }).click(),
+            page.getByRole("option", { name: "Open room Pineapple", exact: true }).click(),
        ]);
    });

@@ -240,34 +244,29 @@ test.describe("Sliding Sync", () => {
            { roomNames, clientUserId },
        );

-        await expect(
-            page.getByRole("group", { name: "Invites" }).locator(".mx_RoomSublist_tiles").getByRole("treeitem"),
-        ).toHaveCount(3);
+        await getFilterExpandButton(page).click();
+        const primaryFilters = getPrimaryFilters(page);
+        await primaryFilters.getByRole("option", { name: "Invites" }).click();
+
+        await expect(page.getByTestId("room-list").getByRole("option")).toHaveCount(3);

        // Select the room to join
-        await page.getByRole("treeitem", { name: "Room to Join" }).click();
+        await page.getByRole("option", { name: "Open room Room to Join" }).click();

        // Accept the invite
        await page.locator(".mx_RoomView").getByRole("button", { name: "Accept" }).click();

-        await checkOrder(["Room to Join", "Test Room"], page);
+        await checkOrder(["Room to Rescind", "Room to Reject"], page);

        // Select the room to reject
-        await page.getByRole("treeitem", { name: "Room to Reject" }).click();
+        await page.getByRole("option", { name: "Open room Room to Reject" }).click();

        // Decline the invite
        await page.locator(".mx_RoomView").getByRole("button", { name: "Decline", exact: true }).click();

-        await expect(
-            page.getByRole("group", { name: "Invites" }).locator(".mx_RoomSublist_tiles").getByRole("treeitem"),
-        ).toHaveCount(2);
+        await expect(page.getByTestId("room-list").getByRole("option")).toHaveCount(1);

-        // check the lists are correct
-        await checkOrder(["Room to Join", "Test Room"], page);
-
-        const titleLocator = page.getByRole("group", { name: "Invites" }).locator(".mx_RoomTile_title");
-        await expect(titleLocator).toHaveCount(1);
-        await expect(titleLocator).toHaveText("Room to Rescind");
+        await expect(page.getByRole("option", { name: "Open room Room to Rescind" })).toBeVisible();

        // now rescind the invite
        await bot.evaluate(
@@ -277,10 +276,14 @@ test.describe("Sliding Sync", () => {
            { roomRescind, clientUserId },
        );

+        await page.getByRole("option", { name: "Open room Room to Rescind" }).click();
+
+        await page.locator(".mx_RoomView").getByRole("button", { name: "Forget this room", exact: true }).click();
+
+        await primaryFilters.getByRole("option", { name: "Invites" }).click();
+
        // Wait for the rescind to take effect and check the joined list once more
-        await expect(
-            page.getByRole("group", { name: "Rooms" }).locator(".mx_RoomSublist_tiles").getByRole("treeitem"),
-        ).toHaveCount(2);
+        await expect(page.getByTestId("room-list").getByRole("option")).toHaveCount(2);

        await checkOrder(["Room to Join", "Test Room"], page);
    });
@@ -293,19 +296,27 @@ test.describe("Sliding Sync", () => {
        await app.client.evaluate(async (client, roomId) => {
            await client.setRoomTag(roomId, "m.favourite", { order: 0.5 });
        }, roomId);
-        await expect(page.getByRole("group", { name: "Favourites" }).getByText("Favourite DM")).toBeVisible();
-        await expect(page.getByRole("group", { name: "People" }).getByText("Favourite DM")).not.toBeAttached();
+
+        await getFilterExpandButton(page).click();
+        const primaryFilters = getPrimaryFilters(page);
+        await primaryFilters.getByRole("option", { name: "Favourites" }).click();
+
+        await expect(page.getByRole("option", { name: "Favourite DM" })).toBeVisible();
+
+        await primaryFilters.getByRole("option", { name: "People" }).click();
+
+        await expect(page.getByRole("option", { name: "Favourite DM" })).not.toBeAttached();
    });

    // Regression test for a bug in SS mode, but would be useful to have in non-SS mode too.
    // This ensures we are setting RoomViewStore state correctly.
    test("should clear the reply to field when swapping rooms", async ({ page, app, testRoom }) => {
        await app.client.createRoom({ name: "Other Room" });
-        await expect(page.getByRole("treeitem", { name: "Other Room" })).toBeVisible();
+        await expect(page.getByRole("option", { name: "Open room Other Room" })).toBeVisible();
        await app.client.sendMessage(testRoom.roomId, "Hello world");

        // select the room
-        await page.getByRole("treeitem", { name: "Test Room" }).click();
+        await page.getByRole("option", { name: "Open room Test Room" }).click();

        await expect(page.locator(".mx_ReplyPreview")).not.toBeAttached();

@@ -318,13 +329,13 @@ test.describe("Sliding Sync", () => {
        await expect(page.locator(".mx_ReplyPreview")).toBeVisible();

        // now click Other Room
-        await page.getByRole("treeitem", { name: "Other Room" }).click();
+        await page.getByRole("option", { name: "Open room Other Room" }).click();

        // ensure the reply-to disappears
        await expect(page.locator(".mx_ReplyPreview")).not.toBeAttached();

        // click back
-        await page.getByRole("treeitem", { name: "Test Room" }).click();
+        await page.getByRole("option", { name: "Open room Test Room" }).click();

        // ensure the reply-to reappears
        await expect(page.locator(".mx_ReplyPreview")).toBeVisible();
@@ -338,7 +349,7 @@ test.describe("Sliding Sync", () => {
        await app.client.sendMessage(testRoom.roomId, "Reply to me");

        // select the room
-        await page.getByRole("treeitem", { name: "Test Room" }).click();
+        await page.getByRole("option", { name: "Open room Test Room" }).click();
        await expect(page.locator(".mx_ReplyPreview")).not.toBeAttached();

        // click reply-to on the Reply to me message
--- a/playwright/e2e/spaces/spaces.spec.ts
+++ b/playwright/e2e/spaces/spaces.spec.ts
@@ -11,6 +11,7 @@ import { test, expect } from "../../element-web-test";
 import type { Preset, ICreateRoomOpts } from "matrix-js-sdk/src/matrix";
 import { type ElementAppPage } from "../../pages/ElementAppPage";
 import { isDendrite } from "../../plugins/homeserver/dendrite";
+import { UIFeature } from "../../../src/settings/UIFeature";

 async function openSpaceCreateMenu(page: Page): Promise<Locator> {
    await page.getByRole("button", { name: "Create a space" }).click();
@@ -95,9 +96,9 @@ test.describe("Spaces", () => {
            await page.getByRole("button", { name: "Go to my first room" }).click();

            // Assert rooms exist in the room list
-            await expect(page.getByRole("treeitem", { name: "General" })).toBeVisible();
-            await expect(page.getByRole("treeitem", { name: "Random" })).toBeVisible();
-            await expect(page.getByRole("treeitem", { name: "Jokes" })).toBeVisible();
+            await expect(page.getByRole("option", { name: "General" })).toBeVisible();
+            await expect(page.getByRole("option", { name: "Random" })).toBeVisible();
+            await expect(page.getByRole("option", { name: "Jokes" })).toBeVisible();
        },
    );

@@ -126,10 +127,10 @@ test.describe("Spaces", () => {
        await page.getByRole("button", { name: "Skip for now" }).click();

        // Assert rooms exist in the room list
-        const roomList = page.getByRole("tree", { name: "Rooms" });
-        await expect(roomList.getByRole("treeitem", { name: "General", exact: true })).toBeVisible();
-        await expect(roomList.getByRole("treeitem", { name: "Random", exact: true })).toBeVisible();
-        await expect(roomList.getByRole("treeitem", { name: "Projects", exact: true })).toBeVisible();
+        const roomList = page.getByRole("listbox", { name: "Room list", exact: true });
+        await expect(roomList.getByRole("option", { name: "General" })).toBeVisible();
+        await expect(roomList.getByRole("option", { name: "Random" })).toBeVisible();
+        await expect(roomList.getByRole("option", { name: "Projects" })).toBeVisible();

        // Assert rooms exist in the space explorer
        await expect(
@@ -199,7 +200,7 @@ test.describe("Spaces", () => {

            await page.getByRole("button", { name: "Skip for now" }).click();

-            await page.getByRole("button", { name: "Add room" }).click();
+            await page.getByRole("main").getByRole("button", { name: "Add" }).click();
            await page.getByRole("menuitem", { name: "Add existing room" }).click();

            await page.getByRole("checkbox", { name: "Sample Room" }).click();
@@ -376,4 +377,68 @@ test.describe("Spaces", () => {
        await app.viewSpaceByName("Root Space");
        await expect(page.locator(".mx_SpaceRoomView")).toMatchScreenshot("space-room-view.png");
    });
+
+    test("should render spaces visibility settings", { tag: "@screenshot" }, async ({ page, app, user, axe }) => {
+        await app.client.createSpace({
+            name: "My Space",
+        });
+        await app.viewSpaceByName("My space");
+        await page.getByLabel("Settings", { exact: true }).click();
+        await app.settings.switchTab("Visibility");
+
+        axe.disableRules("color-contrast"); // XXX: Inheriting colour contrast issues from room view.
+        await expect(axe).toHaveNoViolations();
+        await expect(page.locator("#mx_tabpanel_SPACE_VISIBILITY_TAB")).toMatchScreenshot(
+            "space-visibility-settings.png",
+        );
+    });
+
+    test.describe("Should hide public spaces option if not allowed", () => {
+        test.use({
+            config: {
+                setting_defaults: {
+                    [UIFeature.AllowCreatingPublicSpaces]: false,
+                },
+            },
+        });
+
+        test("should disallow creating public rooms", { tag: "@screenshot" }, async ({ page, user, app }) => {
+            const menu = await openSpaceCreateMenu(page);
+            await menu
+                .locator('.mx_SpaceBasicSettings_avatarContainer input[type="file"]')
+                .setInputFiles("playwright/sample-files/riot.png");
+            await menu.getByRole("textbox", { name: "Name" }).fill("This is a private space");
+            await expect(menu.getByRole("textbox", { name: "Address" })).not.toBeVisible();
+            await menu
+                .getByRole("textbox", { name: "Description" })
+                .fill("This is a private space because we can't make public ones");
+            await menu.getByRole("button", { name: "Create" }).click();
+
+            await page.getByRole("button", { name: "Me and my teammates" }).click();
+
+            // Create the default General & Random rooms, as well as a custom "Projects" room
+            await expect(page.getByPlaceholder("General")).toBeVisible();
+            await expect(page.getByPlaceholder("Random")).toBeVisible();
+            await page.getByPlaceholder("Support").fill("Projects");
+            await page.getByRole("button", { name: "Continue" }).click();
+            await page.getByRole("button", { name: "Skip for now" }).click();
+
+            // Assert rooms exist in the room list
+            const roomList = page.getByRole("listbox", { name: "Room list", exact: true });
+            await expect(roomList.getByRole("option", { name: "General" })).toBeVisible();
+            await expect(roomList.getByRole("option", { name: "Random" })).toBeVisible();
+            await expect(roomList.getByRole("option", { name: "Projects" })).toBeVisible();
+
+            // Assert rooms exist in the space explorer
+            await expect(
+                page.locator(".mx_SpaceHierarchy_list .mx_SpaceHierarchy_roomTile", { hasText: "General" }),
+            ).toBeVisible();
+            await expect(
+                page.locator(".mx_SpaceHierarchy_list .mx_SpaceHierarchy_roomTile", { hasText: "Random" }),
+            ).toBeVisible();
+            await expect(
+                page.locator(".mx_SpaceHierarchy_list .mx_SpaceHierarchy_roomTile", { hasText: "Projects" }),
+            ).toBeVisible();
+        });
+    });
 });
--- a/playwright/e2e/spaces/threads-activity-centre/index.ts
+++ b/playwright/e2e/spaces/threads-activity-centre/index.ts
@@ -377,7 +377,7 @@ export class Helpers {
     * Expand the space panel
     */
    expandSpacePanel() {
-        return this.page.getByRole("button", { name: "Expand" }).click();
+        return this.page.getByRole("navigation", { name: "Spaces" }).getByRole("button", { name: "Expand" }).click();
    }

    /**
--- a/playwright/e2e/spotlight/spotlight.spec.ts
+++ b/playwright/e2e/spotlight/spotlight.spec.ts
@@ -30,13 +30,13 @@ async function startDM(app: ElementAppPage, page: Page, name: string): Promise<v
    await result.first().click();

    // send first message to start DM
-    const locator = page.getByRole("textbox", { name: "Send an unencrypted message…" });
+    const locator = page.getByRole("textbox", { name: "Send a message…" });
    await expect(locator).toBeFocused();
    await locator.fill("Hey!");
    await locator.press("Enter");
    // The DM room is created at this point, this can take a little bit of time
    await expect(page.locator(".mx_EventTile_body").getByText("Hey!")).toBeAttached({ timeout: 3000 });
-    await expect(page.getByRole("group", { name: "People" }).getByText(name)).toBeAttached();
+    await expect(page.getByTestId("room-list").getByRole("option", { name: `Open room ${name}` })).toBeVisible();
 }

 type RoomRef = { name: string; roomId: string };
@@ -260,13 +260,15 @@ test.describe("Spotlight", () => {

        // Send first message to actually start DM
        await expect(roomHeaderName(page)).toHaveText(bot2.credentials.displayName);
-        const locator = page.getByRole("textbox", { name: "Send an unencrypted message…" });
+        const locator = page.getByRole("textbox", { name: "Send a message…" });
        await locator.fill("Hey!");
        await locator.press("Enter");

        // Assert DM exists by checking for the first message and the room being in the room list
        await expect(page.locator(".mx_EventTile_body").filter({ hasText: "Hey!" })).toBeAttached({ timeout: 3000 });
-        await expect(page.getByRole("group", { name: "People" })).toContainText(bot2.credentials.displayName);
+        await expect(
+            page.getByTestId("room-list").getByRole("option", { name: `Open room ${bot2.credentials.displayName}` }),
+        ).toBeVisible();

        // Invite BotBob into existing DM with ByteBot
        const dmRooms = await app.client.evaluate((client, userId) => {
@@ -279,7 +281,9 @@ test.describe("Spotlight", () => {
        const groupDmName = await app.client.evaluate((client, id) => client.getRoom(id).name, dmRooms[0]);
        await app.client.inviteUser(dmRooms[0], bot1.credentials.userId);
        await expect(roomHeaderName(page).first()).toContainText(groupDmName);
-        await expect(page.getByRole("group", { name: "People" }).first()).toContainText(groupDmName);
+        await expect(
+            page.getByTestId("room-list").getByRole("option", { name: `Open room ${groupDmName}` }),
+        ).toBeVisible();

        // Search for BotBob by id, should return group DM and user
        spotlight = await app.openSpotlight();
--- a/playwright/e2e/timeline/media-preview-settings.spec.ts
+++ b/playwright/e2e/timeline/media-preview-settings.spec.ts
@@ -50,9 +50,12 @@ test.describe("Media preview settings", () => {
                }
            `,
        });
-        await expect(
-            page.getByRole("tree", { name: "Rooms" }).getByRole("treeitem", { name: "Test room" }),
-        ).toMatchScreenshot("invite-room-tree-no-avatar.png");
+
+        const testRoomTile = page
+            .getByRole("listbox", { name: "Room list" })
+            .getByRole("option", { name: "Test room" });
+        await expect(testRoomTile).toBeVisible();
+        await expect(testRoomTile).toMatchScreenshot("invite-room-tree-no-avatar.png");

        // And then go back to being visible
        settings = await app.settings.openUserSettings("Preferences");
@@ -70,9 +73,7 @@ test.describe("Media preview settings", () => {
                }
            `,
        });
-        await expect(
-            page.getByRole("tree", { name: "Rooms" }).getByRole("treeitem", { name: "Test room" }),
-        ).toMatchScreenshot("invite-room-tree-with-avatar.png");
+        await expect(testRoomTile).toMatchScreenshot("invite-room-tree-with-avatar.png");
    });

    test("should be able to hide media in rooms globally", async ({ page, app, room, user }) => {
--- a/playwright/e2e/voip/pstn.spec.ts
+++ b/playwright/e2e/voip/pstn.spec.ts
@@ -24,7 +24,7 @@ test.describe("PSTN", () => {
        await toasts.rejectToast("Notifications");
        await toasts.assertNoToasts();

-        await expect(page.locator(".mx_LeftPanel_filterContainer")).toMatchScreenshot("dialpad-trigger.png");
+        await expect(page.locator(".mx_RoomListSearch")).toMatchScreenshot("dialpad-trigger.png");
        await page.getByLabel("Open dial pad").click();
        await expect(page.locator(".mx_Dialog")).toMatchScreenshot("dialpad.png");
    });
--- a/playwright/e2e/widgets/permissions-dialog.spec.ts
+++ b/playwright/e2e/widgets/permissions-dialog.spec.ts
@@ -0,0 +1,98 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { test, expect } from "../../element-web-test";
+
+const DEMO_WIDGET_ID = "demo-widget-id";
+const DEMO_WIDGET_NAME = "Demo Widget";
+const DEMO_WIDGET_TYPE = "demo";
+const ROOM_NAME = "Demo";
+
+const DEMO_WIDGET_HTML = `
+    <html lang="en">
+        <head>
+            <title>Demo Widget</title>
+            <script>
+                let sendEventCount = 0
+                window.onmessage = ev => {
+                    if (ev.data.action === 'capabilities') {
+                        window.parent.postMessage(Object.assign({
+                            response: {
+                                capabilities: [
+                                    "org.matrix.msc2762.timeline:*",
+                                    "org.matrix.msc2762.receive.state_event:m.room.topic",
+                                    "org.matrix.msc2762.send.event:net.widget_echo"
+                                ]
+                            },
+                        }, ev.data), '*');
+                    }
+                };
+            </script>
+        </head>
+    </html>
+`;
+
+test.describe("Widger permissions dialog", () => {
+    test.use({
+        displayName: "Mike",
+    });
+
+    let demoWidgetUrl: string;
+    test.beforeEach(async ({ webserver }) => {
+        demoWidgetUrl = webserver.start(DEMO_WIDGET_HTML);
+    });
+
+    test(
+        "should be updated if user is re-invited into the room with updated state event",
+        { tag: "@screenshot" },
+        async ({ page, app, user, axe }) => {
+            const roomId = await app.client.createRoom({
+                name: ROOM_NAME,
+            });
+
+            // setup widget via state event
+            await app.client.sendStateEvent(
+                roomId,
+                "im.vector.modular.widgets",
+                {
+                    id: DEMO_WIDGET_ID,
+                    creatorUserId: "somebody",
+                    type: DEMO_WIDGET_TYPE,
+                    name: DEMO_WIDGET_NAME,
+                    url: demoWidgetUrl,
+                },
+                DEMO_WIDGET_ID,
+            );
+
+            // set initial layout
+            await app.client.sendStateEvent(
+                roomId,
+                "io.element.widgets.layout",
+                {
+                    widgets: {
+                        [DEMO_WIDGET_ID]: {
+                            container: "top",
+                            index: 1,
+                            width: 100,
+                            height: 0,
+                        },
+                    },
+                },
+                "",
+            );
+
+            // open the room
+            await app.viewRoomByName(ROOM_NAME);
+
+            axe.disableRules("color-contrast"); // XXX: Inheriting colour contrast issues from room view.
+            await expect(axe).toHaveNoViolations();
+            await expect(page.locator(".mx_WidgetCapabilitiesPromptDialog")).toMatchScreenshot(
+                "widget-capabilites-prompt.png",
+            );
+        },
+    );
+});
--- a/playwright/pages/ElementAppPage.ts
+++ b/playwright/pages/ElementAppPage.ts
@@ -51,9 +51,10 @@ export class ElementAppPage {
    /**
     * Open room creation dialog.
     */
-    public async openCreateRoomDialog(): Promise<Locator> {
-        await this.page.getByRole("button", { name: "Add room", exact: true }).click();
-        await this.page.getByRole("menuitem", { name: "New room", exact: true }).click();
+
+    public async openCreateRoomDialog(roomKindname: "New room" | "New video room" = "New room"): Promise<Locator> {
+        await this.page.getByRole("navigation", { name: "Room list" }).getByRole("button", { name: "Add" }).click();
+        await this.page.getByRole("menuitem", { name: roomKindname }).click();
        return this.page.locator(".mx_CreateRoomDialog");
    }

@@ -70,12 +71,23 @@ export class ElementAppPage {

    /**
     * Opens the given room by name. The room must be visible in the
+     * room list and the room may contain unread messages.
+     *
+     * @param name The exact room name to find and click on/open.
+     */
+    public async viewRoomByName(name: string): Promise<void> {
+        // We get the room list by test-id which is a listbox and matching title=name
+        return this.page.getByTestId("room-list").locator(`[title="${name}"]`).first().click();
+    }
+
+    /**
+     * Opens the given room on the old room list by name. The room must be visible in the
     * room list, but the room list may be folded horizontally, and the
     * room may contain unread messages.
     *
     * @param name The exact room name to find and click on/open.
     */
-    public async viewRoomByName(name: string): Promise<void> {
+    public async viewRoomByNameOnOldRoomList(name: string): Promise<void> {
        // We look for the room inside the room list, which is a tree called Rooms.
        //
        // There are 3 cases:
--- a/playwright/pages/settings.ts
+++ b/playwright/pages/settings.ts
@@ -43,7 +43,7 @@ export class Settings {
     * @param {*} value The new value of the setting, may be null.
     * @return {Promise} Resolves when the setting has been changed.
     */
-    public async setValue(settingName: string, roomId: string, level: SettingLevel, value: any): Promise<void> {
+    public async setValue(settingName: string, roomId: string | null, level: SettingLevel, value: any): Promise<void> {
        return this.page.evaluate<
            Promise<void>,
            {
--- a/playwright/shared-component-snapshots/avatar-avatarwithdetails--default-linux.png
+++ b/playwright/shared-component-snapshots/avatar-avatarwithdetails--default-linux.png
--- a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--dark-theme--bubble-layout-linux.png
+++ b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--dark-theme--bubble-layout-linux.png
--- a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--dark-theme--group-layout-linux.png
+++ b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--dark-theme--group-layout-linux.png
--- a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--dark-theme--irc-layout-linux.png
+++ b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--dark-theme--irc-layout-linux.png
--- a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--high-contrast--bubble-layout-linux.png
+++ b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--high-contrast--bubble-layout-linux.png
--- a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--high-contrast--group-layout-linux.png
+++ b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--high-contrast--group-layout-linux.png
--- a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--high-contrast--irc-layout-linux.png
+++ b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--high-contrast--irc-layout-linux.png
--- a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--bubble-layout-linux.png
+++ b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--bubble-layout-linux.png
--- a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--group-layout-linux.png
+++ b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--group-layout-linux.png
--- a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--irc-layout-linux.png
+++ b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--irc-layout-linux.png
--- a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--monospace-font--bubble-layout-linux.png
+++ b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--monospace-font--bubble-layout-linux.png
--- a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--monospace-font--group-layout-linux.png
+++ b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--monospace-font--group-layout-linux.png
--- a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--monospace-font--irc-layout-linux.png
+++ b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player--light-theme--monospace-font--irc-layout-linux.png
--- a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-bubble-layout-linux.png
+++ b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-bubble-layout-linux.png
--- a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-chain-bubble-layout-linux.png
+++ b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-chain-bubble-layout-linux.png
--- a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-chain-group-layout-linux.png
+++ b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-chain-group-layout-linux.png
--- a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-chain-irc-layout-linux.png
+++ b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-chain-irc-layout-linux.png
--- a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-group-layout-linux.png
+++ b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-group-layout-linux.png
--- a/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-irc-layout-linux.png
+++ b/playwright/snapshots/audio-player/audio-player.spec.ts/Selected-EventTile-of-audio-player-with-a-reply-irc-layout-linux.png
--- a/playwright/snapshots/composer/CIDER.spec.ts/mention-linux.png
+++ b/playwright/snapshots/composer/CIDER.spec.ts/mention-linux.png
--- a/playwright/snapshots/crypto/toasts.spec.ts/key-storage-out-of-sync-toast-linux.png
+++ b/playwright/snapshots/crypto/toasts.spec.ts/key-storage-out-of-sync-toast-linux.png
--- a/playwright/snapshots/devtools/devtools.spec.ts/devtools-dialog-linux.png
+++ b/playwright/snapshots/devtools/devtools.spec.ts/devtools-dialog-linux.png
--- a/playwright/snapshots/devtools/upgraderoom.spec.ts/upgrade-room-linux.png
+++ b/playwright/snapshots/devtools/upgraderoom.spec.ts/upgrade-room-linux.png
--- a/playwright/snapshots/invite/decline-and-block-invite-dialog.spec.ts/decline-and-block-invite-empty-linux.png
+++ b/playwright/snapshots/invite/decline-and-block-invite-dialog.spec.ts/decline-and-block-invite-empty-linux.png
--- a/playwright/snapshots/left-panel/room-list-panel/room-list-filter-sort.spec.ts/Favourite-empty-room-list-linux.png
+++ b/playwright/snapshots/left-panel/room-list-panel/room-list-filter-sort.spec.ts/Favourite-empty-room-list-linux.png
--- a/playwright/snapshots/location/location.spec.ts/location-live-share-dialog-linux.png
+++ b/playwright/snapshots/location/location.spec.ts/location-live-share-dialog-linux.png
--- a/playwright/snapshots/messages/messages.spec.ts/basic-message-ltr-ltrdisplayname-linux.png
+++ b/playwright/snapshots/messages/messages.spec.ts/basic-message-ltr-ltrdisplayname-linux.png
--- a/Show More
+++ b/Show More