Fix tests and lint

Co-authored-by: t3chguy <2403652+t3chguy@users.noreply.github.com>

.github/CODEOWNERS

@@ -17,9 +17,15 @@
 /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
-# Ignore the synapse plugin as this is updated by GHA for docker image updating
+# Ignore the synapse & mas plugins as this is updated by GHA for docker image updating
 /playwright/testcontainers/synapse.ts
+/playwright/testcontainers/mas.ts
 

.github/PULL_REQUEST_TEMPLATE.md

@@ -2,6 +2,7 @@
 
 ## Checklist
 
+- [ ] I have read through [review guidelines](../docs/review.md) and [CONTRIBUTING.md](../CONTRIBUTING.md).
 - [ ] Tests written for new code (and old code if feasible).
 - [ ] New or updated `public`/`exported` symbols have accurate [TSDoc](https://tsdoc.org/) documentation.
 - [ ] Linter and other CI checks pass.

.github/workflows/build.yml

@@ -43,9 +43,9 @@ jobs:
             run:
                 shell: bash
         steps:
-            - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
+            - 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

.github/workflows/build_debian.yaml

@@ -14,7 +14,7 @@ jobs:
             R2_URL: ${{ vars.CF_R2_S3_API }}
             VERSION: ${{ github.ref_name }}
         steps:
-            - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
+            - uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
 
             - name: Download package
               run: |

.github/workflows/build_develop.yml

@@ -26,9 +26,9 @@ jobs:
             R2_URL: ${{ vars.CF_R2_S3_API }}
             R2_PUBLIC_URL: "https://element-web-develop.element.io"
         steps:
-            - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
+            - uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
 
-            - uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
+            - uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5
               with:
                   cache: "yarn"
                   node-version: "lts/*"

.github/workflows/deploy.yml

@@ -34,7 +34,7 @@ jobs:
         env:
             SITE: ${{ inputs.site || 'staging.element.io' }}
         steps:
-            - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
+            - uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
 
             - name: Load GPG key
               run: |

.github/workflows/docker.yaml

@@ -20,7 +20,7 @@ jobs:
         env:
             TEST_TAG: vectorim/element-web:test
         steps:
-            - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
+            - uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
               with:
                   fetch-depth: 0 # needed for docker-package to be able to calculate the version
 

.github/workflows/docs.yml

@@ -17,23 +17,23 @@ jobs:
         runs-on: ubuntu-24.04
         steps:
             - name: Fetch element-desktop
-              uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
+              uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
               with:
                   repository: element-hq/element-desktop
                   path: element-desktop
 
             - name: Fetch element-web
-              uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
+              uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
               with:
                   path: element-web
 
             - name: Fetch matrix-js-sdk
-              uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
+              uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
               with:
                   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
 

.github/workflows/end-to-end-tests-netlify.yaml

@@ -25,7 +25,7 @@ jobs:
             actions: read
         steps:
             - name: Download HTML report
-              uses: actions/download-artifact@d3f86a106a0bac45b974a628896c90dbdf5c8093 # v4
+              uses: actions/download-artifact@634f93cb2916e3fdff6788551b99b062d0335ce0 # v5
               with:
                   github-token: ${{ secrets.GITHUB_TOKEN }}
                   run-id: ${{ github.event.workflow_run.id }}

.github/workflows/end-to-end-tests.yaml

@@ -50,11 +50,11 @@ jobs:
             runners-matrix: ${{ steps.runner-vars.outputs.matrix }}
         steps:
             - name: Checkout code
-              uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
+              uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
               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);
@@ -129,18 +129,18 @@ jobs:
                     - runAllTests: false
                       project: Pinecone
         steps:
-            - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
+            - uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
               with:
                   persist-credentials: false
                   repository: element-hq/element-web
 
             - name: 📥 Download artifact
-              uses: actions/download-artifact@d3f86a106a0bac45b974a628896c90dbdf5c8093 # v4
+              uses: actions/download-artifact@634f93cb2916e3fdff6788551b99b062d0335ce0 # v5
               with:
                   name: webapp
                   path: webapp
 
-            - uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
+            - uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5
               with:
                   cache: "yarn"
                   cache-dependency-path: yarn.lock
@@ -154,7 +154,7 @@ jobs:
               run: echo "version=$(yarn list --pattern @playwright/test --depth=0 --json --non-interactive --no-progress | jq -r '.data.trees[].name')" >> $GITHUB_OUTPUT
 
             - name: Cache playwright binaries
-              uses: actions/cache@5a3ec84eff668545956fd18022155c47e93e2684 # v4
+              uses: actions/cache@0400d5f644dc74513175e3cd8d07132dd4860809 # v4
               id: playwright-cache
               with:
                   path: ~/.cache/ms-playwright
@@ -201,13 +201,13 @@ jobs:
         if: always()
         runs-on: ubuntu-24.04
         steps:
-            - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
+            - uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
               if: inputs.skip != true
               with:
                   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"
@@ -219,7 +219,7 @@ jobs:
 
             - name: Download blob reports from GitHub Actions Artifacts
               if: inputs.skip != true
-              uses: actions/download-artifact@d3f86a106a0bac45b974a628896c90dbdf5c8093 # v4
+              uses: actions/download-artifact@634f93cb2916e3fdff6788551b99b062d0335ce0 # v5
               with:
                   pattern: all-blob-reports-*
                   path: all-blob-reports

.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:

.github/workflows/netlify.yaml

@@ -28,7 +28,7 @@ jobs:
                       Exercise caution. Use test accounts.
 
             - name: 📥 Download artifact
-              uses: actions/download-artifact@d3f86a106a0bac45b974a628896c90dbdf5c8093 # v4
+              uses: actions/download-artifact@634f93cb2916e3fdff6788551b99b062d0335ce0 # v5
               with:
                   github-token: ${{ secrets.GITHUB_TOKEN }}
                   run-id: ${{ github.event.workflow_run.id }}

.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 }}

.github/workflows/playwright-image-updates.yaml

@@ -10,7 +10,7 @@ jobs:
         permissions:
             pull-requests: write
         steps:
-            - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
+            - uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
 
             - name: Update synapse image
               run: |
@@ -21,6 +21,15 @@ jobs:
               env:
                   IMAGE: ghcr.io/element-hq/synapse:develop
 
+            - name: Update MAS image
+              run: |
+                  docker pull "$IMAGE"
+                  INSPECT=$(docker inspect --format='{{index .RepoDigests 0}}' "$IMAGE")
+                  DIGEST=${INSPECT#*@}
+                  sed -i "s/const TAG.*/const TAG = \"main@$DIGEST\";/" playwright/testcontainers/mas.ts
+              env:
+                  IMAGE: ghcr.io/element-hq/matrix-authentication-service:main
+
             - name: Create Pull Request
               id: cpr
               uses: peter-evans/create-pull-request@271a8d0340265f705b14b6d32b9829c1cb33d45e # v7

.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;

.github/workflows/release_prepare.yml

@@ -41,7 +41,7 @@ jobs:
             REPOS: matrix-js-sdk element-web element-desktop
         steps:
             - name: Checkout Element Desktop
-              uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
+              uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
               if: inputs.element-desktop
               with:
                   repository: element-hq/element-desktop
@@ -51,7 +51,7 @@ jobs:
                   fetch-tags: true
                   token: ${{ secrets.ELEMENT_BOT_TOKEN }}
             - name: Checkout Element Web
-              uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
+              uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
               if: inputs.element-web
               with:
                   repository: element-hq/element-web
@@ -61,7 +61,7 @@ jobs:
                   fetch-tags: true
                   token: ${{ secrets.ELEMENT_BOT_TOKEN }}
             - name: Checkout Matrix JS SDK
-              uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
+              uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
               if: inputs.matrix-js-sdk
               with:
                   repository: matrix-org/matrix-js-sdk

.github/workflows/shared-component-visual-tests-netlify.yaml

@@ -27,7 +27,7 @@ jobs:
               run: "sudo apt-get install -y tree"
 
             - name: Download Diffs
-              uses: actions/download-artifact@d3f86a106a0bac45b974a628896c90dbdf5c8093 # v4
+              uses: actions/download-artifact@634f93cb2916e3fdff6788551b99b062d0335ce0 # v5
               with:
                   github-token: ${{ secrets.GITHUB_TOKEN }}
                   run-id: ${{ github.event.workflow_run.id }}

.github/workflows/shared-component-visual-tests.yaml

@@ -21,12 +21,12 @@ jobs:
             issues: read
             pull-requests: read
         steps:
-            - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
+            - uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
               with:
                   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/*"
@@ -39,7 +39,7 @@ jobs:
               run: echo "version=$(yarn list --pattern @playwright/test --depth=0 --json --non-interactive --no-progress | jq -r '.data.trees[].name')" >> $GITHUB_OUTPUT
 
             - name: Cache playwright binaries
-              uses: actions/cache@5a3ec84eff668545956fd18022155c47e93e2684 # v4
+              uses: actions/cache@0400d5f644dc74513175e3cd8d07132dd4860809 # v4
               id: playwright-cache
               with:
                   path: ~/.cache/ms-playwright

.github/workflows/static_analysis.yaml

@@ -23,9 +23,9 @@ jobs:
         name: "Typescript Syntax Check"
         runs-on: ubuntu-24.04
         steps:
-            - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
+            - uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
 
-            - uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
+            - uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5
               with:
                   cache: "yarn"
                   node-version: "lts/*"
@@ -52,12 +52,13 @@ jobs:
                 error|misconfigured
                 welcome_to_element
                 devtools|settings|elementCallUrl
+                labs|sliding_sync_description
 
     rethemendex_lint:
         name: "Rethemendex Check"
         runs-on: ubuntu-24.04
         steps:
-            - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
+            - uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
 
             - run: ./res/css/rethemendex.sh
 
@@ -67,9 +68,9 @@ jobs:
         name: "ESLint"
         runs-on: ubuntu-24.04
         steps:
-            - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
+            - uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
 
-            - uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
+            - uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5
               with:
                   cache: "yarn"
                   node-version: "lts/*"
@@ -85,9 +86,9 @@ jobs:
         name: "Style Lint"
         runs-on: ubuntu-24.04
         steps:
-            - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
+            - uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
 
-            - uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
+            - uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5
               with:
                   cache: "yarn"
                   node-version: "lts/*"
@@ -103,9 +104,9 @@ jobs:
         name: "Workflow Lint"
         runs-on: ubuntu-24.04
         steps:
-            - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
+            - uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
 
-            - uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
+            - uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5
               with:
                   cache: "yarn"
                   node-version: "lts/*"
@@ -121,9 +122,9 @@ jobs:
         name: "Analyse Dead Code"
         runs-on: ubuntu-24.04
         steps:
-            - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
+            - uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
 
-            - uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
+            - uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5
               with:
                   cache: "yarn"
                   node-version: "lts/*"

.github/workflows/tests.yml

@@ -39,12 +39,12 @@ jobs:
                 runner: [1, 2]
         steps:
             - name: Checkout code
-              uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
+              uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
               with:
                   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"
@@ -55,7 +55,7 @@ jobs:
                   JS_SDK_GITHUB_BASE_REF: ${{ inputs.matrix-js-sdk-sha }}
 
             - name: Jest Cache
-              uses: actions/cache@5a3ec84eff668545956fd18022155c47e93e2684 # v4
+              uses: actions/cache@0400d5f644dc74513175e3cd8d07132dd4860809 # v4
               with:
                   path: /tmp/jest_cache
                   key: ${{ hashFiles('**/yarn.lock') }}

.github/workflows/triage-assigned.yml

@@ -15,7 +15,7 @@ jobs:
             contains(github.event.issue.assignees.*.login, 'dbkr') ||
             contains(github.event.issue.assignees.*.login, 'MidhunSureshR')
         steps:
-            - uses: actions/add-to-project@main
+            - uses: actions/add-to-project@244f685bbc3b7adfa8466e08b698b5577571133e # v1.0.2
               with:
                   project-url: https://github.com/orgs/element-hq/projects/67
                   github-token: ${{ secrets.ELEMENT_BOT_TOKEN }}

.github/workflows/triage-incoming.yml

@@ -10,7 +10,7 @@ jobs:
     automate-project-columns:
         runs-on: ubuntu-24.04
         steps:
-            - uses: actions/add-to-project@main
+            - uses: actions/add-to-project@244f685bbc3b7adfa8466e08b698b5577571133e # v1.0.2
               with:
                   project-url: https://github.com/orgs/element-hq/projects/120
                   github-token: ${{ secrets.ELEMENT_BOT_TOKEN }}

.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({
@@ -112,7 +112,7 @@ jobs:
              contains(github.event.issue.labels.*.name, 'O-Frequent') ||
              contains(github.event.issue.labels.*.name, 'A11y'))
         steps:
-            - uses: actions/add-to-project@main
+            - uses: actions/add-to-project@244f685bbc3b7adfa8466e08b698b5577571133e # v1.0.2
               with:
                   project-url: https://github.com/orgs/element-hq/projects/18
                   github-token: ${{ secrets.ELEMENT_BOT_TOKEN }}
@@ -123,7 +123,7 @@ jobs:
         if: >
             contains(github.event.issue.labels.*.name, 'X-Needs-Product')
         steps:
-            - uses: actions/add-to-project@main
+            - uses: actions/add-to-project@244f685bbc3b7adfa8466e08b698b5577571133e # v1.0.2
               with:
                   project-url: https://github.com/orgs/element-hq/projects/28
                   github-token: ${{ secrets.ELEMENT_BOT_TOKEN }}
@@ -134,7 +134,7 @@ jobs:
         if: >
             contains(github.event.issue.labels.*.name, 'A-New-Search-Experience')
         steps:
-            - uses: actions/add-to-project@main
+            - uses: actions/add-to-project@244f685bbc3b7adfa8466e08b698b5577571133e # v1.0.2
               with:
                   project-url: https://github.com/orgs/element-hq/projects/48
                   github-token: ${{ secrets.ELEMENT_BOT_TOKEN }}
@@ -145,7 +145,7 @@ jobs:
         if: >
             contains(github.event.issue.labels.*.name, 'Team: VoIP')
         steps:
-            - uses: actions/add-to-project@main
+            - uses: actions/add-to-project@244f685bbc3b7adfa8466e08b698b5577571133e # v1.0.2
               with:
                   project-url: https://github.com/orgs/element-hq/projects/41
                   github-token: ${{ secrets.ELEMENT_BOT_TOKEN }}
@@ -156,7 +156,7 @@ jobs:
         if: >
             contains(github.event.issue.labels.*.name, 'Team: Crypto')
         steps:
-            - uses: actions/add-to-project@main
+            - uses: actions/add-to-project@244f685bbc3b7adfa8466e08b698b5577571133e # v1.0.2
               with:
                   project-url: https://github.com/orgs/element-hq/projects/76
                   github-token: ${{ secrets.ELEMENT_BOT_TOKEN }}
@@ -172,7 +172,7 @@ jobs:
             contains(github.event.issue.labels.*.name, 'A-Testing') ||
             contains(github.event.issue.labels.*.name, 'Z-Flaky-Test')
         steps:
-            - uses: actions/add-to-project@main
+            - uses: actions/add-to-project@244f685bbc3b7adfa8466e08b698b5577571133e # v1.0.2
               with:
                   project-url: https://github.com/orgs/element-hq/projects/101
                   github-token: ${{ secrets.ELEMENT_BOT_TOKEN }}

.github/workflows/triage-move-review-requests.yml

@@ -9,7 +9,7 @@ jobs:
         name: Move PRs asking for design review to the design board
         runs-on: ubuntu-24.04
         steps:
-            - uses: octokit/graphql-action@v2.x
+            - uses: octokit/graphql-action@8ad880e4d437783ea2ab17010324de1075228110 # v2.3.2
               id: find_team_members
               with:
                   headers: '{"GraphQL-Features": "projects_next_graphql"}'
@@ -52,7 +52,7 @@ jobs:
                   fi
               env:
                   TEAM: "design"
-            - uses: octokit/graphql-action@v2.x
+            - uses: octokit/graphql-action@8ad880e4d437783ea2ab17010324de1075228110 # v2.3.2
               id: add_to_project
               if: steps.any_matching_reviewers.outputs.match == 'true'
               with:
@@ -76,7 +76,7 @@ jobs:
         name: Move PRs asking for design review to the design board
         runs-on: ubuntu-24.04
         steps:
-            - uses: octokit/graphql-action@v2.x
+            - uses: octokit/graphql-action@8ad880e4d437783ea2ab17010324de1075228110 # v2.3.2
               id: find_team_members
               with:
                   headers: '{"GraphQL-Features": "projects_next_graphql"}'
@@ -119,7 +119,7 @@ jobs:
                   fi
               env:
                   TEAM: "product"
-            - uses: octokit/graphql-action@v2.x
+            - uses: octokit/graphql-action@8ad880e4d437783ea2ab17010324de1075228110 # v2.3.2
               id: add_to_project
               if: steps.any_matching_reviewers.outputs.match == 'true'
               with:

.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
 

.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({

.github/workflows/update-jitsi.yml

@@ -9,9 +9,9 @@ jobs:
     update:
         runs-on: ubuntu-24.04
         steps:
-            - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
+            - uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
 
-            - uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
+            - uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5
               with:
                   cache: "yarn"
                   node-version: "lts/*"

.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 }}

.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,

.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;

CHANGELOG.md

@@ -1,3 +1,90 @@
+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
+
+* Do not hide media from your own user by default ([#29797](https://github.com/element-hq/element-web/pull/29797)). Contributed by @Half-Shot.
+* Remember whether sidebar is shown for calls when switching rooms ([#30262](https://github.com/element-hq/element-web/pull/30262)). Contributed by @bojidar-bg.
+* Open the proper integration settings on integrations disabled error ([#30538](https://github.com/element-hq/element-web/pull/30538)). Contributed by @Half-Shot.
+* Show a "progress" dialog while invites are being sent ([#30561](https://github.com/element-hq/element-web/pull/30561)). Contributed by @richvdh.
+* Move the room list to the new ListView(backed by react-virtuoso)  ([#30515](https://github.com/element-hq/element-web/pull/30515)). Contributed by @langleyd.
+
+## 🐛 Bug Fixes
+
+* [Backport staging] Ensure container starts if it is mounted with an empty /modules directory. ([#30705](https://github.com/element-hq/element-web/pull/30705)). Contributed by @RiotRobot.
+* Fix room joining over federation not specifying vias or using aliases ([#30641](https://github.com/element-hq/element-web/pull/30641)). Contributed by @t3chguy.
+* Fix stable-suffixed MSC4133 support ([#30649](https://github.com/element-hq/element-web/pull/30649)). Contributed by @dbkr.
+* Fix i18n of message when a setting is disabled ([#30646](https://github.com/element-hq/element-web/pull/30646)). Contributed by @dbkr.
+* ListView should not handle the arrow keys if there is a modifier applied ([#30633](https://github.com/element-hq/element-web/pull/30633)). Contributed by @langleyd.
+* Make BaseDialog's div keyboard focusable and fix test. ([#30631](https://github.com/element-hq/element-web/pull/30631)). Contributed by @langleyd.
+* Fix: Allow triple-click text selection to flow around pills ([#30349](https://github.com/element-hq/element-web/pull/30349)). Contributed by @AlirezaMrtz.
+* Watch for a 'join' action to know when the call is connected ([#29492](https://github.com/element-hq/element-web/pull/29492)). Contributed by @robintown.
+* Fix: add missing tooltip and aria-label to lock icon next to composer ([#30623](https://github.com/element-hq/element-web/pull/30623)). Contributed by @florianduros.
+* Don't render context menu when scrolling ([#30613](https://github.com/element-hq/element-web/pull/30613)). Contributed by @langleyd.
+
+
+Changes in [1.11.110](https://github.com/element-hq/element-web/releases/tag/v1.11.110) (2025-08-27)
+====================================================================================================
+## ✨ Features
+
+* Hide recovery key when re-entering it while creating or changing it ([#30499](https://github.com/element-hq/element-web/pull/30499)). Contributed by @andybalaam.
+* Add `?no_universal_links=true` to OIDC url so EX doesn't try to handle it ([#29439](https://github.com/element-hq/element-web/pull/29439)). Contributed by @t3chguy.
+* Show a blue lock for unencrypted rooms and hide the grey shield for encrypted rooms ([#30440](https://github.com/element-hq/element-web/pull/30440)). Contributed by @langleyd.
+* Add support for Module API 1.4 ([#30185](https://github.com/element-hq/element-web/pull/30185)). Contributed by @t3chguy.
+* MVVM - Introduce some helpers for snapshot management ([#30398](https://github.com/element-hq/element-web/pull/30398)). Contributed by @MidhunSureshR.
+
+## 🐛 Bug Fixes
+
+* A11y: move focus to right panel when opened ([#30553](https://github.com/element-hq/element-web/pull/30553)). Contributed by @florianduros.
+* Fix e2e warning icon should be white ([#30539](https://github.com/element-hq/element-web/pull/30539)). Contributed by @florianduros.
+* Remove NoOneHere disabled reason. ([#30524](https://github.com/element-hq/element-web/pull/30524)). Contributed by @toger5.
+* Fix downloading files with authenticated media API ([#30520](https://github.com/element-hq/element-web/pull/30520)). Contributed by @t3chguy.
+* Fix call permissions check confusion around element call ([#30521](https://github.com/element-hq/element-web/pull/30521)). Contributed by @t3chguy.
+* Fix line wrap around emoji verification ([#30523](https://github.com/element-hq/element-web/pull/30523)). Contributed by @t3chguy.
+* Don't highlight redacted events ([#30519](https://github.com/element-hq/element-web/pull/30519)). Contributed by @t3chguy.
+* Fix matrix.to links not being handled in the app ([#30522](https://github.com/element-hq/element-web/pull/30522)). Contributed by @t3chguy.
+* Fix issue of new room list taking up the full width ([#30459](https://github.com/element-hq/element-web/pull/30459)). Contributed by @langleyd.
+* Fix widget persistence in React development mode ([#30509](https://github.com/element-hq/element-web/pull/30509)). Contributed by @robintown.
+* Fix widget initialization in React development mode ([#30463](https://github.com/element-hq/element-web/pull/30463)). Contributed by @robintown.
+
+
+Changes in [1.11.109](https://github.com/element-hq/element-web/releases/tag/v1.11.109) (2025-08-11)
+====================================================================================================
+This release supports the upcoming v12 ("hydra") Matrix room version and is necessary to view and participate in these rooms.
+
+## ✨ Features
+
+* [Backport staging] Allow /upgraderoom command without developer mode enabled ([#30529](https://github.com/element-hq/element-web/pull/30529)). Contributed by @RiotRobot.
+* [Backport staging] Support for creator/owner power level ([#30526](https://github.com/element-hq/element-web/pull/30526)). Contributed by @RiotRobot.
+* New room list: change icon and label of menu item for to start a DM ([#30470](https://github.com/element-hq/element-web/pull/30470)). Contributed by @florianduros.
+* Implement the member list with virtuoso ([#29869](https://github.com/element-hq/element-web/pull/29869)). Contributed by @langleyd.
+* Add labs option for history sharing on invite ([#30313](https://github.com/element-hq/element-web/pull/30313)). Contributed by @richvdh.
+* Bump wysiwyg to 2.39.0 adding support for pasting rich text content in the Rich Text Edtior ([#30421](https://github.com/element-hq/element-web/pull/30421)). Contributed by @langleyd.
+* Support `EventShieldReason.MISMATCHED_SENDER` ([#30403](https://github.com/element-hq/element-web/pull/30403)). Contributed by @richvdh.
+* Change unencrypted and public pills to blue ([#30399](https://github.com/element-hq/element-web/pull/30399)). Contributed by @florianduros.
+* Change color of public room icon ([#30390](https://github.com/element-hq/element-web/pull/30390)). Contributed by @florianduros.
+* Script for updating storybook screenshots ([#30340](https://github.com/element-hq/element-web/pull/30340)). Contributed by @dbkr.
+* Add toggle to hide empty state in devtools ([#30352](https://github.com/element-hq/element-web/pull/30352)). Contributed by @toger5.
+
+## 🐛 Bug Fixes
+
+* [Backport staging] Use userId to filter users in non-federated rooms when showing the InviteDialog ([#30537](https://github.com/element-hq/element-web/pull/30537)). Contributed by @RiotRobot.
+* [Backport staging] Catch error when encountering invalid m.room.pinned\_events event ([#30536](https://github.com/element-hq/element-web/pull/30536)). Contributed by @RiotRobot.
+* Update for compatibility with v12 rooms ([#30452](https://github.com/element-hq/element-web/pull/30452)). Contributed by @dbkr.
+* New room list: fix tooltip on presence ([#30474](https://github.com/element-hq/element-web/pull/30474)). Contributed by @florianduros.
+* New room list: add tooltip for presence and room status ([#30472](https://github.com/element-hq/element-web/pull/30472)). Contributed by @florianduros.
+* Fix: Clicking on an item in the member list causes it to scroll to the top rather than show the profile view ([#30455](https://github.com/element-hq/element-web/pull/30455)). Contributed by @langleyd.
+* Put the 'decrypting' tooltip back ([#30446](https://github.com/element-hq/element-web/pull/30446)). Contributed by @dbkr.
+* Use server name explicitly for via. ([#30362](https://github.com/element-hq/element-web/pull/30362)). Contributed by @Half-Shot.
+* fix: replace hardcoded string in poll history dialog ([#30402](https://github.com/element-hq/element-web/pull/30402)). Contributed by @florianduros.
+* fix: replace hardcoded string on qr code back button ([#30401](https://github.com/element-hq/element-web/pull/30401)). Contributed by @florianduros.
+* Fix color of icon button with outline ([#30361](https://github.com/element-hq/element-web/pull/30361)). Contributed by @florianduros.
+
+
 Changes in [1.11.108](https://github.com/element-hq/element-web/releases/tag/v1.11.108) (2025-07-30)
 ====================================================================================================
 ## 🐛 Bug Fixes

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

Dockerfile

@@ -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:2d63e0f812d023c4c764e83d7e30dc94949304443ebc372d5c445e63a5ae49c1 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:e61b77b27c8f3124fad6d19e894ca5b603bcaf6a34a2df035511299dfa6fad35
+FROM nginxinc/nginx-unprivileged:alpine-slim@sha256:14b127ed799301a21a1798516443c675237120c76b9a738d43c5e4747de4b1c9
 
 # Need root user to install packages & manipulate the usr directory
 USER root

README.md

@@ -27,7 +27,7 @@ Element has several tiers of support for different environments:
 - Best effort
     - Definition:
         - Issues **accepted**, regressions **do not block** the release
-        - The wider Element Products(including Element Call and the Enterprise Server Suite) do still not officially support these browsers.
+        - The wider Element Products (including Element Call and the Enterprise Server Suite) do still not officially support these browsers.
         - The element web project and its contributors should keep the client functioning and gracefully degrade where other sibling features (E.g. Element Call) may not function.
     - Last major release of Firefox ESR and Chrome/Edge Extended Stable
 - Community Supported

docker/docker-entrypoint.d/18-load-element-modules.sh

@@ -14,10 +14,9 @@ entrypoint_log() {
 mkdir -p /tmp/element-web-config
 cp /app/config*.json /tmp/element-web-config/
 
-# If there are modules to be loaded
-if [ -d "/modules" ]; then
+# If the module directory exists AND the module directory has modules in it
+if [ -d "/modules" ] && [ "$( ls -A '/modules' )" ]; then
     cd /modules
-
     for MODULE in *
     do
         # If the module has a package.json, use its main field as the entrypoint

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
 

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
 

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

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: [
@@ -42,10 +39,18 @@ export default {
         "util",
         // Embedded into webapp
         "@element-hq/element-call-embedded",
+
+        // Used by matrix-js-sdk, which means we have to include them as a
+        // dependency so that // we can run `tsc` (since we import the typescript
+        // source of js-sdk, rather than the transpiled and annotated JS like you
+        // would with a normal library).
+        "@types/content-type",
+        "@types/sdp-transform",
     ],
     ignoreBinaries: [
         // Used in scripts & workflows
         "jq",
+        "wait-on",
     ],
     ignoreExportsUsedInFile: true,
 } satisfies KnipConfig;

package.json

@@ -1,6 +1,6 @@
 {
     "name": "element-web",
-    "version": "1.11.108",
+    "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.9",
-        "@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",
@@ -96,7 +96,6 @@
         "@matrix-org/spec": "^1.7.0",
         "@sentry/browser": "^10.0.0",
         "@types/png-chunks-extract": "^1.0.2",
-        "@types/react-virtualized": "^9.21.30",
         "@vector-im/compound-design-tokens": "^6.0.0",
         "@vector-im/compound-web": "^8.1.2",
         "@vector-im/matrix-wysiwyg": "2.39.0",
@@ -143,7 +142,7 @@
         "opus-recorder": "^8.0.3",
         "pako": "^2.0.3",
         "png-chunks-extract": "^1.0.0",
-        "posthog-js": "1.257.0",
+        "posthog-js": "1.265.1",
         "qrcode": "1.5.4",
         "re-resizable": "6.11.2",
         "react": "^19.0.0",
@@ -153,15 +152,14 @@
         "react-focus-lock": "^2.5.1",
         "react-string-replace": "^1.1.1",
         "react-transition-group": "^4.4.1",
-        "react-virtualized": "^9.22.5",
-        "react-virtuoso": "^4.12.6",
+        "react-virtuoso": "^4.14.0",
         "rfc4648": "^1.4.0",
         "sanitize-filename": "^1.6.3",
         "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": {
@@ -186,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-web-playwright-common": "^1.4.4",
+        "@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",
@@ -205,6 +204,7 @@
         "@testing-library/react": "^16.0.0",
         "@testing-library/user-event": "^14.5.2",
         "@types/commonmark": "^0.27.4",
+        "@types/content-type": "^1.1.9",
         "@types/counterpart": "^0.18.1",
         "@types/css-tree": "^2.3.8",
         "@types/diff-match-patch": "^1.0.32",
@@ -223,15 +223,15 @@
         "@types/node-fetch": "^2.6.2",
         "@types/pako": "^2.0.0",
         "@types/qrcode": "^1.3.5",
-        "@types/react": "19.1.9",
+        "@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",

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;
+     }
+   }, {

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();

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();
+        });
     });
 });

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);
-    });
-});

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();

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,11 +155,12 @@ 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);
-            await expect(page.locator(".mx_MessageComposer_e2eIcon")).toMatchScreenshot("composer-e2e-icon-normal.png");
+            // We no longer show the grey badge in the composer, check that it is not there.
+            await expect(page.locator(".mx_MessageComposer_e2eIcon")).toHaveCount(0);
 
             await testMessages(page, bob, bobRoomId);
             await verify(app, bob);

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

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();

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");

playwright/e2e/crypto/event-shields.spec.ts

@@ -14,7 +14,7 @@ import {
     createSecondBotDevice,
     createSharedRoomWithUser,
     enableKeyBackup,
-    logIntoElement,
+    logIntoElementAndVerify,
     logOutOfElement,
     verify,
     waitForDevices,
@@ -58,108 +58,108 @@ test.describe("Cryptography", function () {
             await app.client.network.setupRoute();
         });
 
-        test("should show the correct shield on e2e events", async ({
-            page,
-            app,
-            bot: bob,
-            homeserver,
-        }, workerInfo) => {
-            // Bob has a second, not cross-signed, device
-            const bobSecondDevice = await createSecondBotDevice(page, homeserver, bob);
+        test(
+            "should show the correct shield on e2e events",
+            { tag: "@screenshot" },
+            async ({ page, app, bot: bob, homeserver }, workerInfo) => {
+                // Bob has a second, not cross-signed, device
+                const bobSecondDevice = await createSecondBotDevice(page, homeserver, bob);
 
-            // Dismiss the toasts nagging us, otherwise they get in the way of clicking the room list
-            await page.getByRole("button", { name: "Dismiss" }).click();
-            await page.getByRole("button", { name: "Yes, dismiss" }).click();
+                // Dismiss the toasts nagging us, otherwise they get in the way of clicking the room list
+                await page.getByRole("button", { name: "Dismiss" }).click();
+                await page.getByRole("button", { name: "Yes, dismiss" }).click();
 
-            await bob.sendEvent(testRoomId, null, "m.room.encrypted", {
-                algorithm: "m.megolm.v1.aes-sha2",
-                ciphertext: "the bird is in the hand",
-            });
+                await bob.sendEvent(testRoomId, null, "m.room.encrypted", {
+                    algorithm: "m.megolm.v1.aes-sha2",
+                    ciphertext: "the bird is in the hand",
+                });
 
-            const last = page.locator(".mx_EventTile_last");
-            await expect(last).toContainText("Unable to decrypt message");
-            const lastE2eIcon = last.locator(".mx_EventTile_e2eIcon");
-            await expect(lastE2eIcon).toHaveClass(/mx_EventTile_e2eIcon_decryption_failure/);
-            await lastE2eIcon.focus();
-            await expect(await app.getTooltipForElement(lastE2eIcon)).toContainText(
-                "This message could not be decrypted",
-            );
+                const last = page.locator(".mx_EventTile_last");
+                await expect(last).toContainText("Unable to decrypt message");
+                const lastE2eIcon = last.locator(".mx_EventTile_e2eIcon");
+                await expect(lastE2eIcon).toHaveClass(/mx_EventTile_e2eIcon_decryption_failure/);
+                await lastE2eIcon.focus();
+                await expect(await app.getTooltipForElement(lastE2eIcon)).toContainText(
+                    "This message could not be decrypted",
+                );
 
-            /* Should show a red padlock for an unencrypted message in an e2e room */
-            await bob.evaluate(
-                (cli, testRoomId) =>
-                    cli.http.authedRequest(
-                        window.matrixcs.Method.Put,
-                        `/rooms/${encodeURIComponent(testRoomId)}/send/m.room.message/test_txn_1`,
-                        undefined,
-                        {
-                            msgtype: "m.text",
-                            body: "test unencrypted",
-                        },
-                    ),
-                testRoomId,
-            );
+                /* Should show a red padlock for an unencrypted message in an e2e room */
+                await bob.evaluate(
+                    (cli, testRoomId) =>
+                        cli.http.authedRequest(
+                            window.matrixcs.Method.Put,
+                            `/rooms/${encodeURIComponent(testRoomId)}/send/m.room.message/test_txn_1`,
+                            undefined,
+                            {
+                                msgtype: "m.text",
+                                body: "test unencrypted",
+                            },
+                        ),
+                    testRoomId,
+                );
 
-            await expect(last).toContainText("test unencrypted");
-            await expect(lastE2eIcon).toHaveClass(/mx_EventTile_e2eIcon_warning/);
-            await lastE2eIcon.focus();
-            await expect(await app.getTooltipForElement(lastE2eIcon)).toContainText("Not encrypted");
+                await expect(last).toContainText("test unencrypted");
+                await expect(lastE2eIcon).toHaveClass(/mx_EventTile_e2eIcon_warning/);
+                await expect(lastE2eIcon).toMatchScreenshot("event-shield-warning.png");
+                await lastE2eIcon.focus();
+                await expect(await app.getTooltipForElement(lastE2eIcon)).toContainText("Not encrypted");
 
-            /* Should show no padlock for an unverified user */
-            // bob sends a valid event
-            await bob.sendMessage(testRoomId, "test encrypted 1");
+                /* Should show no padlock for an unverified user */
+                // bob sends a valid event
+                await bob.sendMessage(testRoomId, "test encrypted 1");
 
-            // the message should appear, decrypted, with no warning, but also no "verified"
-            const lastTile = page.locator(".mx_EventTile_last");
-            const lastTileE2eIcon = lastTile.locator(".mx_EventTile_e2eIcon");
-            await expect(lastTile).toContainText("test encrypted 1");
-            // no e2e icon
-            await expect(lastTileE2eIcon).not.toBeVisible();
+                // the message should appear, decrypted, with no warning, but also no "verified"
+                const lastTile = page.locator(".mx_EventTile_last");
+                const lastTileE2eIcon = lastTile.locator(".mx_EventTile_e2eIcon");
+                await expect(lastTile).toContainText("test encrypted 1");
+                // no e2e icon
+                await expect(lastTileE2eIcon).not.toBeVisible();
 
-            /* Now verify Bob */
-            await verify(app, bob);
+                /* Now verify Bob */
+                await verify(app, bob);
 
-            /* Existing message should be updated when user is verified. */
-            await expect(last).toContainText("test encrypted 1");
-            // still no e2e icon
-            await expect(last.locator(".mx_EventTile_e2eIcon")).not.toBeVisible();
+                /* Existing message should be updated when user is verified. */
+                await expect(last).toContainText("test encrypted 1");
+                // still no e2e icon
+                await expect(last.locator(".mx_EventTile_e2eIcon")).not.toBeVisible();
 
-            /* should show no padlock, and be verified, for a message from a verified device */
-            await bob.sendMessage(testRoomId, "test encrypted 2");
+                /* should show no padlock, and be verified, for a message from a verified device */
+                await bob.sendMessage(testRoomId, "test encrypted 2");
 
-            await expect(lastTile).toContainText("test encrypted 2");
-            // no e2e icon
-            await expect(lastTileE2eIcon).not.toBeVisible();
+                await expect(lastTile).toContainText("test encrypted 2");
+                // no e2e icon
+                await expect(lastTileE2eIcon).not.toBeVisible();
 
-            /* should show red padlock for a message from an unverified device */
-            await bobSecondDevice.sendMessage(testRoomId, "test encrypted from unverified");
-            await expect(lastTile).toContainText("test encrypted from unverified");
-            await expect(lastTileE2eIcon).toHaveClass(/mx_EventTile_e2eIcon_warning/);
-            await lastTileE2eIcon.focus();
-            await expect(await app.getTooltipForElement(lastTileE2eIcon)).toContainText(
-                "Encrypted by a device not verified by its owner.",
-            );
+                /* should show red padlock for a message from an unverified device */
+                await bobSecondDevice.sendMessage(testRoomId, "test encrypted from unverified");
+                await expect(lastTile).toContainText("test encrypted from unverified");
+                await expect(lastTileE2eIcon).toHaveClass(/mx_EventTile_e2eIcon_warning/);
+                await lastTileE2eIcon.focus();
+                await expect(await app.getTooltipForElement(lastTileE2eIcon)).toContainText(
+                    "Encrypted by a device not verified by its owner.",
+                );
 
-            /* Should show a red padlock for a message from an unverified device.
-             * Rust crypto remembers the verification state of the sending device, so it will know that the device was
-             * unverified, even if it gets deleted. */
-            // bob deletes his second device
-            await bobSecondDevice.evaluate((cli) => cli.logout(true));
+                /* Should show a red padlock for a message from an unverified device.
+                 * Rust crypto remembers the verification state of the sending device, so it will know that the device was
+                 * unverified, even if it gets deleted. */
+                // bob deletes his second device
+                await bobSecondDevice.evaluate((cli) => cli.logout(true));
 
-            // wait for the logout to propagate.
-            await waitForDevices(app, bob.credentials.userId, 1);
+                // wait for the logout to propagate.
+                await waitForDevices(app, bob.credentials.userId, 1);
 
-            // close and reopen the room, to get the shield to update.
-            await app.viewRoomByName("Bob");
-            await app.viewRoomByName("TestRoom");
+                // close and reopen the room, to get the shield to update.
+                await app.viewRoomByName("Bob");
+                await app.viewRoomByName("TestRoom");
 
-            await expect(last).toContainText("test encrypted from unverified");
-            await expect(lastE2eIcon).toHaveClass(/mx_EventTile_e2eIcon_warning/);
-            await lastE2eIcon.focus();
-            await expect(await app.getTooltipForElement(lastE2eIcon)).toContainText(
-                "Encrypted by a device not verified by its owner.",
-            );
-        });
+                await expect(last).toContainText("test encrypted from unverified");
+                await expect(lastE2eIcon).toHaveClass(/mx_EventTile_e2eIcon_warning/);
+                await lastE2eIcon.focus();
+                await expect(await app.getTooltipForElement(lastE2eIcon)).toContainText(
+                    "Encrypted by a device not verified by its owner.",
+                );
+            },
+        );
 
         test("Should show a grey padlock for a key restored from backup", async ({
             page,
@@ -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);

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();
@@ -126,7 +126,7 @@ test.describe("'Turn on key storage' toast", () => {
         await toast.getByRole("button", { name: "Continue" }).click();
 
         // Then we see the Encryption settings dialog with an option to turn on key storage
-        await expect(page.getByRole("checkbox", { name: "Allow key storage" })).toBeVisible();
+        await expect(page.getByRole("switch", { name: "Allow key storage" })).toBeVisible();
 
         // And when we close that
         await page.getByRole("button", { name: "Close dialog" }).click();
@@ -153,7 +153,7 @@ test.describe("'Turn on key storage' toast", () => {
         await page.getByRole("button", { name: "Go to Settings" }).click();
 
         // Then we see Encryption settings again
-        await expect(page.getByRole("checkbox", { name: "Allow key storage" })).toBeVisible();
+        await expect(page.getByRole("switch", { name: "Allow key storage" })).toBeVisible();
 
         // And when we close that, see the toast, click Dismiss, and Yes, Dismiss
         await page.getByRole("button", { name: "Close dialog" }).click();

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();
@@ -300,9 +310,9 @@ export async function doTwoWaySasVerification(page: Page, verifier: JSHandle<Ver
 export async function enableKeyBackup(app: ElementAppPage): Promise<string> {
     const encryptionTab = await app.settings.openUserSettings("Encryption");
 
-    const keyStorageToggle = encryptionTab.getByRole("checkbox", { name: "Allow key storage" });
+    const keyStorageToggle = encryptionTab.getByRole("switch", { name: "Allow key storage" });
     if (!(await keyStorageToggle.isChecked())) {
-        await encryptionTab.getByRole("checkbox", { name: "Allow key storage" }).click();
+        await encryptionTab.getByRole("switch", { name: "Allow key storage" }).click();
     }
 
     await encryptionTab.getByRole("button", { name: "Set up recovery" }).click();
@@ -323,11 +333,11 @@ export async function enableKeyBackup(app: ElementAppPage): Promise<string> {
 export async function disableKeyBackup(app: ElementAppPage): Promise<void> {
     const encryptionTab = await app.settings.openUserSettings("Encryption");
 
-    const keyStorageToggle = encryptionTab.getByRole("checkbox", { name: "Allow key storage" });
+    const keyStorageToggle = encryptionTab.getByRole("switch", { name: "Allow key storage" });
     if (await keyStorageToggle.isChecked()) {
-        await encryptionTab.getByRole("checkbox", { name: "Allow key storage" }).click();
+        await encryptionTab.getByRole("switch", { name: "Allow key storage" }).click();
         await encryptionTab.getByRole("button", { name: "Delete key storage" }).click();
-        await encryptionTab.getByRole("checkbox", { name: "Allow key storage" }).isVisible();
+        await encryptionTab.getByRole("switch", { name: "Allow key storage" }).isVisible();
 
         // Wait for the update to account data to stick
         await new Promise((resolve) => setTimeout(resolve, 2000));
@@ -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");
 

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;
+            }`,
+        });
+    });
+});

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");
+        },
+    );
+});

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");
+        },
+    );
+});

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

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();

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();
         }
     });
 });

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

@@ -68,7 +68,7 @@ test.describe("Room list filters and sort", () => {
         So we expect 'Old Room' to show up in the room list.
         */
         const roomListView = getRoomList(page);
-        const oldRoomTile = roomListView.getByRole("gridcell", { name: "Open room Old Room" });
+        const oldRoomTile = roomListView.getByRole("option", { name: "Open room Old Room" });
         await expect(oldRoomTile).toBeVisible();
 
         /*
@@ -139,8 +139,9 @@ test.describe("Room list filters and sort", () => {
 
             // Open the non-favourite room
             const roomListView = getRoomList(page);
-            const tile = roomListView.getByRole("gridcell", { name: "Open room room-non-fav" });
-            await tile.scrollIntoViewIfNeeded();
+            const tile = roomListView.getByRole("option", { name: "Open room room-non-fav" });
+            // item may not be in the DOM using scrollListToBottom rather than scrollIntoViewIfNeeded
+            await app.scrollListToBottom(roomListView);
             await tile.click();
 
             // Enable Favourite filter
@@ -151,7 +152,7 @@ test.describe("Room list filters and sort", () => {
 
             // Ensure the room list is not scrolled
             const isScrolledDown = await page
-                .getByRole("grid", { name: "Room list" })
+                .getByRole("listbox", { name: "Room list", exact: true })
                 .evaluate((e) => e.scrollTop !== 0);
             expect(isScrolledDown).toStrictEqual(false);
         });
@@ -227,37 +228,37 @@ test.describe("Room list filters and sort", () => {
 
             await primaryFilters.getByRole("option", { name: "Unread" }).click();
             // only one room should be visible
-            await expect(roomList.getByRole("gridcell", { name: "unread dm" })).toBeVisible();
-            await expect(roomList.getByRole("gridcell", { name: "unread room" })).toBeVisible();
-            await expect.poll(() => roomList.locator("role=gridcell").count()).toBe(4);
+            await expect(roomList.getByRole("option", { name: "unread dm" })).toBeVisible();
+            await expect(roomList.getByRole("option", { name: "unread room" })).toBeVisible();
+            await expect.poll(() => roomList.locator("role=option").count()).toBe(4);
             await expect(primaryFilters).toMatchScreenshot("unread-primary-filters.png");
 
             await primaryFilters.getByRole("option", { name: "People" }).click();
-            await expect(roomList.getByRole("gridcell", { name: "unread dm" })).toBeVisible();
-            await expect(roomList.getByRole("gridcell", { name: "invited room" })).toBeVisible();
-            await expect.poll(() => roomList.locator("role=gridcell").count()).toBe(2);
+            await expect(roomList.getByRole("option", { name: "unread dm" })).toBeVisible();
+            await expect(roomList.getByRole("option", { name: "invited room" })).toBeVisible();
+            await expect.poll(() => roomList.locator("role=option").count()).toBe(2);
 
             await primaryFilters.getByRole("option", { name: "Rooms" }).click();
-            await expect(roomList.getByRole("gridcell", { name: "unread room" })).toBeVisible();
-            await expect(roomList.getByRole("gridcell", { name: "favourite room" })).toBeVisible();
-            await expect(roomList.getByRole("gridcell", { name: "empty room" })).toBeVisible();
-            await expect(roomList.getByRole("gridcell", { name: "room with mention" })).toBeVisible();
-            await expect(roomList.getByRole("gridcell", { name: "Low prio room" })).toBeVisible();
-            await expect.poll(() => roomList.locator("role=gridcell").count()).toBe(5);
+            await expect(roomList.getByRole("option", { name: "unread room" })).toBeVisible();
+            await expect(roomList.getByRole("option", { name: "favourite room" })).toBeVisible();
+            await expect(roomList.getByRole("option", { name: "empty room" })).toBeVisible();
+            await expect(roomList.getByRole("option", { name: "room with mention" })).toBeVisible();
+            await expect(roomList.getByRole("option", { name: "Low prio room" })).toBeVisible();
+            await expect.poll(() => roomList.locator("role=option").count()).toBe(5);
 
             await getFilterExpandButton(page).click();
 
             await primaryFilters.getByRole("option", { name: "Favourite" }).click();
-            await expect(roomList.getByRole("gridcell", { name: "favourite room" })).toBeVisible();
-            await expect.poll(() => roomList.locator("role=gridcell").count()).toBe(1);
+            await expect(roomList.getByRole("option", { name: "favourite room" })).toBeVisible();
+            await expect.poll(() => roomList.locator("role=option").count()).toBe(1);
 
             await primaryFilters.getByRole("option", { name: "Mentions" }).click();
-            await expect(roomList.getByRole("gridcell", { name: "room with mention" })).toBeVisible();
-            await expect.poll(() => roomList.locator("role=gridcell").count()).toBe(1);
+            await expect(roomList.getByRole("option", { name: "room with mention" })).toBeVisible();
+            await expect.poll(() => roomList.locator("role=option").count()).toBe(1);
 
             await primaryFilters.getByRole("option", { name: "Invites" }).click();
-            await expect(roomList.getByRole("gridcell", { name: "invited room" })).toBeVisible();
-            await expect.poll(() => roomList.locator("role=gridcell").count()).toBe(1);
+            await expect(roomList.getByRole("option", { name: "invited room" })).toBeVisible();
+            await expect.poll(() => roomList.locator("role=option").count()).toBe(1);
 
             await getFilterCollapseButton(page).click();
             await expect(primaryFilters.locator("role=option").first()).toHaveText("Invites");
@@ -268,6 +269,7 @@ test.describe("Room list filters and sort", () => {
             { tag: "@screenshot" },
             async ({ page, app, bot }) => {
                 const roomListView = getRoomList(page);
+                const primaryFilters = getPrimaryFilters(page);
 
                 // Let's configure unread dm room so that we only get notification for mentions and keywords
                 await app.viewRoomById(unReadDmId);
@@ -276,20 +278,20 @@ test.describe("Room list filters and sort", () => {
                 await app.settings.closeDialog();
 
                 // Let's open a room other than unread room or unread dm
-                await roomListView.getByRole("gridcell", { name: "Open room favourite room" }).click();
+                await roomListView.getByRole("option", { name: "Open room favourite room" }).click();
 
                 // Let's make the bot send a new message in both rooms
                 await bot.sendMessage(unReadDmId, "Hello!");
                 await bot.sendMessage(unReadRoomId, "Hello!");
 
                 // Let's activate the unread filter now
-                await page.getByRole("option", { name: "Unread" }).click();
+                await primaryFilters.getByRole("option", { name: "Unread" }).click();
 
                 // Unread filter should only show unread room and not unread dm!
-                const unreadDm = roomListView.getByRole("gridcell", { name: "Open room unread room" });
+                const unreadDm = roomListView.getByRole("option", { name: "Open room unread room" });
                 await expect(unreadDm).toBeVisible();
                 await expect(unreadDm).toMatchScreenshot("unread-dm.png");
-                await expect(roomListView.getByRole("gridcell", { name: "Open room unread dm" })).not.toBeVisible();
+                await expect(roomListView.getByRole("option", { name: "Open room unread dm" })).not.toBeVisible();
             },
         );
 
@@ -299,7 +301,7 @@ test.describe("Room list filters and sort", () => {
             await getRoomOptionsMenu(page).click();
             await page.getByRole("menuitemradio", { name: "A-Z" }).click();
 
-            await expect(roomListView.getByRole("gridcell").first()).toHaveText(/empty room/);
+            await expect(roomListView.getByRole("option").first()).toHaveText(/empty room/);
         });
 
         test("should move room to the top on message when sorting by activity", async ({ page, bot }) => {
@@ -307,7 +309,7 @@ test.describe("Room list filters and sort", () => {
 
             await bot.sendMessage(unReadDmId, "Hello!");
 
-            await expect(roomListView.getByRole("gridcell").first()).toHaveText(/unread dm/);
+            await expect(roomListView.getByRole("option").first()).toHaveText(/unread dm/);
         });
     });
 

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

@@ -38,7 +38,7 @@ test.describe("Room list panel", () => {
     test("should render the room list panel", { tag: "@screenshot" }, async ({ page, app, user }) => {
         const roomListView = getRoomListView(page);
         // Wait for the last room to be visible
-        await expect(roomListView.getByRole("gridcell", { name: "Open room room19" })).toBeVisible();
+        await expect(roomListView.getByRole("option", { name: "Open room room19" })).toBeVisible();
         await expect(roomListView).toMatchScreenshot("room-list-panel.png");
     });
 

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

@@ -41,33 +41,38 @@ 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("gridcell", { name: "Open room room29" })).toBeVisible();
+            await expect(roomListView.getByRole("option", { name: "Open room room29" })).toBeVisible();
             await expect(roomListView).toMatchScreenshot("room-list.png");
 
             // Put focus on the room list
-            await roomListView.getByRole("gridcell", { name: "Open room room29" }).click();
+            await roomListView.getByRole("option", { name: "Open room room29" }).click();
             // Scroll to the end of the room list
-            await app.scrollListToBottom(page.locator(".mx_RoomList_List"));
+            await app.scrollListToBottom(roomListView);
+
+            // 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");
         });
 
         test("should open the room when it is clicked", async ({ page, app, user }) => {
             const roomListView = getRoomList(page);
-            await roomListView.getByRole("gridcell", { name: "Open room room29" }).click();
+            await roomListView.getByRole("option", { name: "Open room room29" }).click();
             await expect(page.getByRole("heading", { name: "room29", level: 1 })).toBeVisible();
         });
 
         test("should open the context menu", { tag: "@screenshot" }, async ({ page, app, user }) => {
             const roomListView = getRoomList(page);
-            await roomListView.getByRole("gridcell", { name: "Open room room29" }).click({ button: "right" });
+            await roomListView.getByRole("option", { name: "Open room room29" }).click({ button: "right" });
             await expect(page.getByRole("menu", { name: "More Options" })).toBeVisible();
         });
 
         test("should open the more options menu", { tag: "@screenshot" }, async ({ page, app, user }) => {
             const roomListView = getRoomList(page);
-            const roomItem = roomListView.getByRole("gridcell", { name: "Open room room29" });
+            const roomItem = roomListView.getByRole("option", { name: "Open room room29" });
             await roomItem.hover();
 
             await expect(roomItem).toMatchScreenshot("room-list-item-hover.png");
@@ -97,7 +102,7 @@ test.describe("Room list", () => {
         test("should open the notification options menu", { tag: "@screenshot" }, async ({ page, app, user }) => {
             const roomListView = getRoomList(page);
 
-            const roomItem = roomListView.getByRole("gridcell", { name: "Open room room29" });
+            const roomItem = roomListView.getByRole("option", { name: "Open room room29" });
             await roomItem.hover();
 
             await expect(roomItem).toMatchScreenshot("room-list-item-hover.png");
@@ -117,10 +122,10 @@ test.describe("Room list", () => {
             await expect(roomItem.getByTestId("notification-decoration")).not.toBeVisible();
 
             // Put focus on the room list
-            await roomListView.getByRole("gridcell", { name: "Open room room28" }).click();
+            await roomListView.getByRole("option", { name: "Open room room28" }).click();
 
             // Scroll to the end of the room list
-            await app.scrollListToBottom(page.locator(".mx_RoomList_List"));
+            await app.scrollListToBottom(roomListView);
 
             // The room decoration should have the muted icon
             await expect(roomItem.getByTestId("notification-decoration")).toBeVisible();
@@ -139,25 +144,25 @@ test.describe("Room list", () => {
         test("should scroll to the current room", async ({ page, app, user }) => {
             const roomListView = getRoomList(page);
             // Put focus on the room list
-            await roomListView.getByRole("gridcell", { name: "Open room room29" }).click();
+            await roomListView.getByRole("option", { name: "Open room room29" }).click();
             // Scroll to the end of the room list
-            await app.scrollListToBottom(page.locator(".mx_RoomList_List"));
+            await app.scrollListToBottom(roomListView);
 
-            await expect(roomListView.getByRole("gridcell", { name: "Open room room0" })).toBeVisible();
-            await roomListView.getByRole("gridcell", { name: "Open room room0" }).click();
+            await expect(roomListView.getByRole("option", { name: "Open room room0" })).toBeVisible();
+            await roomListView.getByRole("option", { name: "Open room room0" }).click();
 
             const filters = page.getByRole("listbox", { name: "Room list filters" });
             await filters.getByRole("option", { name: "People" }).click();
-            await expect(roomListView.getByRole("gridcell", { name: "Open room room0" })).not.toBeVisible();
+            await expect(roomListView.getByRole("option", { name: "Open room room0" })).not.toBeVisible();
 
             await filters.getByRole("option", { name: "People" }).click();
-            await expect(roomListView.getByRole("gridcell", { name: "Open room room0" })).toBeVisible();
+            await expect(roomListView.getByRole("option", { name: "Open room room0" })).toBeVisible();
         });
 
         test.describe("Shortcuts", () => {
             test("should select the next room", async ({ page, app, user }) => {
                 const roomListView = getRoomList(page);
-                await roomListView.getByRole("gridcell", { name: "Open room room29" }).click();
+                await roomListView.getByRole("option", { name: "Open room room29" }).click();
                 await page.keyboard.press("Alt+ArrowDown");
 
                 await expect(page.getByRole("heading", { name: "room28", level: 1 })).toBeVisible();
@@ -165,7 +170,7 @@ test.describe("Room list", () => {
 
             test("should select the previous room", async ({ page, app, user }) => {
                 const roomListView = getRoomList(page);
-                await roomListView.getByRole("gridcell", { name: "Open room room28" }).click();
+                await roomListView.getByRole("option", { name: "Open room room28" }).click();
                 await page.keyboard.press("Alt+ArrowUp");
 
                 await expect(page.getByRole("heading", { name: "room29", level: 1 })).toBeVisible();
@@ -173,7 +178,7 @@ test.describe("Room list", () => {
 
             test("should select the last room", async ({ page, app, user }) => {
                 const roomListView = getRoomList(page);
-                await roomListView.getByRole("gridcell", { name: "Open room room29" }).click();
+                await roomListView.getByRole("option", { name: "Open room room29" }).click();
                 await page.keyboard.press("Alt+ArrowUp");
 
                 await expect(page.getByRole("heading", { name: "room0", level: 1 })).toBeVisible();
@@ -187,7 +192,10 @@ test.describe("Room list", () => {
                 await bot.joinRoom(roomId);
                 await bot.sendMessage(roomId, "I am a robot. Beep.");
 
-                await roomListView.getByRole("gridcell", { name: "Open room room20" }).click();
+                await roomListView.getByRole("option", { name: "Open room room20" }).click();
+
+                // Make sure the room with the unread is visible before we press the keyboard action to select it
+                await expect(roomListView.getByRole("option", { name: "1 notification" })).toBeVisible();
 
                 await page.keyboard.press("Alt+Shift+ArrowDown");
 
@@ -199,8 +207,8 @@ test.describe("Room list", () => {
             test("should navigate to the room list", async ({ page, app, user }) => {
                 const roomListView = getRoomList(page);
 
-                const room29 = roomListView.getByRole("gridcell", { name: "Open room room29" });
-                const room28 = roomListView.getByRole("gridcell", { name: "Open room room28" });
+                const room29 = roomListView.getByRole("option", { name: "Open room room29" });
+                const room28 = roomListView.getByRole("option", { name: "Open room room28" });
 
                 // open the room
                 await room29.click();
@@ -219,7 +227,7 @@ test.describe("Room list", () => {
 
             test("should navigate to the notification menu", async ({ page, app, user }) => {
                 const roomListView = getRoomList(page);
-                const room29 = roomListView.getByRole("gridcell", { name: "Open room room29" });
+                const room29 = roomListView.getByRole("option", { name: "Open room room29" });
                 const moreButton = room29.getByRole("button", { name: "More options" });
                 const notificationButton = room29.getByRole("button", { name: "Notification options" });
 
@@ -258,7 +266,7 @@ test.describe("Room list", () => {
             await page.getByRole("button", { name: "User menu" }).focus();
 
             const roomListView = getRoomList(page);
-            const publicRoom = roomListView.getByRole("gridcell", { name: "public room" });
+            const publicRoom = roomListView.getByRole("option", { name: "public room" });
 
             await expect(publicRoom).toBeVisible();
             await expect(publicRoom).toMatchScreenshot("room-list-item-public.png");
@@ -268,7 +276,7 @@ test.describe("Room list", () => {
             // @ts-ignore Visibility enum is not accessible
             await app.client.createRoom({ name: "low priority room", visibility: "public" });
             const roomListView = getRoomList(page);
-            const publicRoom = roomListView.getByRole("gridcell", { name: "low priority room" });
+            const publicRoom = roomListView.getByRole("option", { name: "low priority room" });
 
             // Make room low priority
             await publicRoom.hover();
@@ -293,7 +301,7 @@ test.describe("Room list", () => {
             await page.getByRole("button", { name: "Create video room" }).click();
 
             const roomListView = getRoomList(page);
-            const videoRoom = roomListView.getByRole("gridcell", { name: "video room" });
+            const videoRoom = roomListView.getByRole("option", { name: "video room" });
 
             // focus the user menu to avoid to have hover decoration
             await page.getByRole("button", { name: "User menu" }).focus();
@@ -312,7 +320,7 @@ test.describe("Room list", () => {
                 invite: [user.userId],
                 is_direct: true,
             });
-            const invitedRoom = roomListView.getByRole("gridcell", { name: "invited room" });
+            const invitedRoom = roomListView.getByRole("option", { name: "invited room" });
             await expect(invitedRoom).toBeVisible();
             await expect(invitedRoom).toMatchScreenshot("room-list-item-invited.png");
         });
@@ -327,7 +335,7 @@ test.describe("Room list", () => {
             await bot.sendMessage(roomId, "I am a robot. Beep.");
             await bot.sendMessage(roomId, "I am a robot. Beep.");
 
-            const room = roomListView.getByRole("gridcell", { name: "2 notifications" });
+            const room = roomListView.getByRole("option", { name: "2 notifications" });
             await expect(room).toBeVisible();
             await expect(room.getByTestId("notification-decoration")).toHaveText("2");
             await expect(room).toMatchScreenshot("room-list-item-notification.png");
@@ -358,7 +366,7 @@ test.describe("Room list", () => {
             );
             await bot.sendMessage(roomId, "I am a robot. Beep.");
 
-            const room = roomListView.getByRole("gridcell", { name: "mention" });
+            const room = roomListView.getByRole("option", { name: "mention" });
             await expect(room).toBeVisible();
             await expect(room).toMatchScreenshot("room-list-item-mention.png");
         });
@@ -379,7 +387,7 @@ test.describe("Room list", () => {
             await bot.joinRoom(roomId);
             await bot.sendMessage(roomId, "I am a robot. Beep.");
 
-            const room = roomListView.getByRole("gridcell", { name: "activity" });
+            const room = roomListView.getByRole("option", { name: "activity" });
             await expect(room.getByText("I am a robot. Beep.")).toBeVisible();
             await expect(room).toMatchScreenshot("room-list-item-message-preview.png");
         });
@@ -406,7 +414,7 @@ test.describe("Room list", () => {
             await app.viewRoomById(otherRoomId);
             await bot.sendMessage(roomId, "I am a robot. Beep.");
 
-            const room = roomListView.getByRole("gridcell", { name: "activity" });
+            const room = roomListView.getByRole("option", { name: "activity" });
             await expect(room.getByTestId("notification-decoration")).toBeVisible();
             await expect(room).toMatchScreenshot("room-list-item-activity.png");
         });
@@ -418,7 +426,7 @@ test.describe("Room list", () => {
             await app.client.inviteUser(roomId, bot.credentials.userId);
             await bot.joinRoom(roomId);
 
-            const room = roomListView.getByRole("gridcell", { name: "mark as unread" });
+            const room = roomListView.getByRole("option", { name: "mark as unread" });
             await room.hover();
             await room.getByRole("button", { name: "More Options" }).click();
             await page.getByRole("menuitem", { name: "mark as unread" }).click();
@@ -441,7 +449,7 @@ test.describe("Room list", () => {
             await page.getByText("Off").click();
             await app.settings.closeDialog();
 
-            const room = roomListView.getByRole("gridcell", { name: "silent" });
+            const room = roomListView.getByRole("option", { name: "silent" });
             await expect(room.getByTestId("notification-decoration")).toBeVisible();
             await expect(room).toMatchScreenshot("room-list-item-silent.png");
         });

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");
+        },
+    );
 });

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();

playwright/e2e/oidc/oidc-native.spec.ts

@@ -95,10 +95,6 @@ test.describe("OIDC Native", { tag: ["@no-firefox", "@no-webkit"] }, () => {
             const result = await mas.manage("kill-sessions", userId);
             expect(result.output).toContain("Ended 1 active OAuth 2.0 session");
 
-            // Workaround for Synapse's 2 minute cache on MAS token validity
-            // (https://github.com/element-hq/synapse/pull/18231)
-            await homeserver.restart();
-
             await page.goto("http://localhost:8080");
             await expect(
                 page.getByText("For security, this session has been signed out. Please sign in again."),
@@ -133,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", () => {
@@ -166,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();
@@ -214,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();
@@ -231,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();

playwright/e2e/permalinks/permalinks.spec.ts

@@ -100,3 +100,51 @@ test.describe("permalinks", () => {
         });
     });
 });
+
+test.describe("triple-click message selection", () => {
+    test.use({
+        displayName: "Alice",
+    });
+
+    test("should select entire message line when triple-clicking on message with pills", async ({
+        page,
+        app,
+        user,
+        bot,
+    }) => {
+        await bot.prepareClient();
+
+        const roomId = await app.client.createRoom({ name: "Test Room" });
+        await app.client.inviteUser(roomId, bot.credentials.userId);
+        await app.viewRoomByName("Test Room");
+
+        // Send a message with user and room pills
+        await app.client.sendMessage(
+            roomId,
+            `Testing triple-click message selection. ` +
+                `User: ${permalinkPrefix}${bot.credentials.userId}, ` +
+                `Room: ${permalinkPrefix}${roomId}, ` +
+                `Message: ${permalinkPrefix}${roomId}/$dummy-event, ` +
+                `and @room mention.`,
+        );
+
+        const timeline = page.locator(".mx_RoomView_timeline");
+        const messageTile = timeline.locator(".mx_EventTile").last();
+
+        // Triple-click on the message body to select its entire content
+        const messageBody = messageTile.locator(".mx_EventTile_body");
+        await messageBody.click({ clickCount: 3 });
+
+        // Get the expected text content of the message, including pills
+        const expectedText = await messageBody.innerText();
+
+        // Get the currently selected text from the page
+        const selectedText = await page.evaluate(() => {
+            const selection = window.getSelection();
+            return selection ? selection.toString().trim() : "";
+        });
+
+        // Verify that the selected text exactly matches the message content
+        expect(selectedText).toBe(expectedText);
+    });
+});

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}`));
         }
     }
 }

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}`);

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();
 

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 };

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);
         },

playwright/e2e/right-panel/file-panel.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 Download, type Page } from "@playwright/test";
+import { type Page } from "@playwright/test";
 
 import { test, expect } from "../../element-web-test";
 import { viewRoomSummaryByName } from "./utils";
@@ -189,23 +189,13 @@ test.describe("FilePanel", () => {
 
             const link = imageBody.locator(".mx_MFileBody_download a");
 
-            const newPagePromise = context.waitForEvent("page");
-
-            const downloadPromise = new Promise<Download>((resolve) => {
-                page.once("download", resolve);
-            });
+            const downloadPromise = page.waitForEvent("download");
 
             // Click the anchor link (not the image itself)
             await link.click();
 
-            const newPage = await newPagePromise;
-            // XXX: Clicking the link opens the image in a new tab on some browsers rather than downloading
-            await expect(newPage)
-                .toHaveURL(/.+\/_matrix\/media\/\w+\/download\/localhost\/\w+/)
-                .catch(async () => {
-                    const download = await downloadPromise;
-                    expect(download.suggestedFilename()).toBe("riot.png");
-                });
+            const download = await downloadPromise;
+            expect(download.suggestedFilename()).toBe("riot.png");
         });
     });
 });

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);
+        });
+    });
+});

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");
 
@@ -37,11 +42,8 @@ test.describe("Room Header", () => {
             await expect(header.locator(".mx_FacePile")).toBeVisible();
 
             // There should be both a voice and a video call button
-            // but they'll be disabled
-            const callButtons = header.getByRole("button", { name: "There's no one here to call" });
-            await expect(callButtons).toHaveCount(2);
-            await expect(callButtons.first()).toBeVisible();
-            await expect(callButtons.last()).toBeVisible();
+            await expect(header.getByRole("button", { name: "Video call" })).toBeVisible();
+            await expect(header.getByRole("button", { name: "Voice call" })).toBeVisible();
 
             await expect(header.getByRole("button", { name: "Threads" })).toBeVisible();
             await expect(header.getByRole("button", { name: "Notifications" })).toBeVisible();
@@ -64,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
@@ -89,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");
 
@@ -109,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", () => {

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();
     });
 });

playwright/e2e/settings/appearance-user-settings-tab/index.ts

@@ -85,7 +85,7 @@ class Helpers {
      * Return the system theme toggle
      */
     getMatchSystemThemeCheckbox() {
-        return this.getThemePanel().getByRole("checkbox", { name: "Match system theme" });
+        return this.getThemePanel().getByRole("switch", { name: "Match system theme" });
     }
 
     /**
@@ -219,7 +219,7 @@ class Helpers {
      * Return the compact layout checkbox
      */
     getCompactLayoutCheckbox() {
-        return this.getMessageLayoutPanel().getByRole("checkbox", { name: "Show compact text and messages" });
+        return this.getMessageLayoutPanel().getByRole("switch", { name: "Show compact text and messages" });
     }
 
     /**

playwright/e2e/settings/encryption-user-tab/encryption-tab.spec.ts

@@ -117,7 +117,7 @@ test.describe("Encryption tab", () => {
             await verifySession(app, recoveryKey.encodedPrivateKey);
             await util.openEncryptionTab();
 
-            await page.getByRole("checkbox", { name: "Allow key storage" }).click();
+            await page.getByRole("switch", { name: "Allow key storage" }).click();
 
             await expect(
                 page.getByRole("heading", { name: "Are you sure you want to turn off key storage and delete it?" }),
@@ -136,7 +136,7 @@ test.describe("Encryption tab", () => {
 
             await page.getByRole("button", { name: "Delete key storage" }).click();
 
-            await expect(page.getByRole("checkbox", { name: "Allow key storage" })).not.toBeChecked();
+            await expect(page.getByRole("switch", { name: "Allow key storage" })).not.toBeChecked();
 
             for (const prom of deleteRequestPromises) {
                 const request = await prom;
@@ -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();

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");
     }
 }

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")],
+        });
+    });
+});

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");
+    });
+});

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";

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();
+        },
+    );
+});

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");
+        },
+    );
+});

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");
 

playwright/e2e/share-dialog/share-by-url.spec.ts

@@ -18,13 +18,14 @@ test.describe("share from URL", () => {
 
     test("should share message when users navigates to share URL", async ({ page, user, room, app }) => {
         await page.goto("/#/share?msg=Hello+world");
+        const dialog = page.getByRole("dialog", { name: "Forward message" });
         // The forward message dialog doesn't update as new infomation arrives via sync, which means sometimes
         // this is just says, "Empty room". For the same reason, we can't reliably write a test for loading the
         // app straight away with a /#/share url as the room doesn't appear until the client syncs.]
         // Ideally we should fix the forward dialog to update and eliminate races, until then, there is only one
         // room so we click the first button.
-        await page.getByRole("listitem" /*, { name: "A test room" }*/).getByRole("button", { name: "Send" }).click();
-        await page.keyboard.press("Escape");
+        await dialog.getByRole("listitem" /*, { name: "A test room" }*/).getByRole("button", { name: "Send" }).click();
+        await dialog.getByRole("button", { name: "Close" }).click();
         await app.viewRoomByName("A test room");
         const lastMessage = page.locator(".mx_RoomView_MessageList .mx_EventTile_last");
         await expect(lastMessage).toBeVisible();

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

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();
+        });
+    });
 });

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();
     }
 
     /**

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();

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 }) => {

playwright/e2e/timeline/timeline.spec.ts

@@ -908,23 +908,37 @@ test.describe("Timeline", () => {
             });
         });
 
-        test("should be able to hide an image", { tag: "@screenshot" }, async ({ page, app, room, context }) => {
-            await app.viewRoomById(room.roomId);
-            await sendImage(app.client, room.roomId, NEW_AVATAR);
-            await app.timeline.scrollToBottom();
-            const imgTile = page.locator(".mx_MImageBody").first();
-            await expect(imgTile).toBeVisible();
-            await imgTile.hover();
-            await page.getByRole("button", { name: "Hide" }).click();
+        test(
+            "should be able to hide an image",
+            { tag: "@screenshot" },
+            async ({ page, app, homeserver, room, context }) => {
+                await app.viewRoomById(room.roomId);
 
-            // Check that the image is now hidden.
-            await expect(page.getByRole("button", { name: "Show image" })).toBeVisible();
-        });
+                const bot = new Bot(page, homeserver, {});
+                await bot.prepareClient();
+                await app.client.inviteUser(room.roomId, bot.credentials.userId);
 
-        test("should be able to hide a video", async ({ page, app, room, context }) => {
+                await sendImage(bot, room.roomId, NEW_AVATAR);
+                await app.timeline.scrollToBottom();
+                const imgTile = page.locator(".mx_MImageBody").first();
+                await expect(imgTile).toBeVisible();
+                await imgTile.hover();
+                await page.getByRole("button", { name: "Hide" }).click();
+
+                // Check that the image is now hidden.
+                await expect(page.getByRole("button", { name: "Show image" })).toBeVisible();
+            },
+        );
+
+        test("should be able to hide a video", async ({ page, app, homeserver, room, context }) => {
             await app.viewRoomById(room.roomId);
-            const upload = await app.client.uploadContent(VIDEO_FILE, { name: "bbb.webm", type: "video/webm" });
-            await app.client.sendEvent(room.roomId, null, "m.room.message" as EventType, {
+
+            const bot = new Bot(page, homeserver, {});
+            await bot.prepareClient();
+            await app.client.inviteUser(room.roomId, bot.credentials.userId);
+
+            const upload = await bot.uploadContent(VIDEO_FILE, { name: "bbb.webm", type: "video/webm" });
+            await bot.sendEvent(room.roomId, null, "m.room.message" as EventType, {
                 msgtype: "m.video" as MsgType,
                 body: "bbb.webm",
                 url: upload.content_uri,

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");
     });

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",
+            );
+        },
+    );
+});

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:

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>,
             {

playwright/plugins/homeserver/synapse/masHomeserver.ts

@@ -1,38 +1,49 @@
 /*
-Copyright 2024 New Vector Ltd.
+Copyright 2024-2025 New Vector Ltd.
 Copyright 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 { MatrixAuthenticationServiceContainer } from "@element-hq/element-web-playwright-common/lib/testcontainers";
-
+import { MatrixAuthenticationServiceContainer } from "../../../testcontainers/mas.ts";
 import { type Fixtures } from "../../../element-web-test.ts";
 
 export const masHomeserver: Fixtures = {
     mas: [
         async ({ _homeserver: homeserver, logger, network, postgres, mailpit }, use) => {
-            const config = {
-                clients: [
-                    {
-                        client_id: "0000000000000000000SYNAPSE",
-                        client_auth_method: "client_secret_basic",
-                        client_secret: "SomeRandomSecret",
-                    },
-                ],
-                matrix: {
-                    homeserver: "localhost",
-                    secret: "AnotherRandomSecret",
-                    endpoint: "http://homeserver:8008",
-                },
-            };
+            const secret = "AnotherRandomSecret";
 
+            const limits = { burst: 10, per_second: 10 };
             const container = await new MatrixAuthenticationServiceContainer(postgres)
                 .withNetwork(network)
                 .withNetworkAliases("mas")
                 .withLogConsumer(logger.getConsumer("mas"))
-                .withConfig(config)
+                .withConfig({
+                    matrix: {
+                        kind: "synapse",
+                        homeserver: "localhost",
+                        secret,
+                        endpoint: "http://homeserver:8008",
+                    },
+                    rate_limiting: {
+                        login: {
+                            per_ip: limits,
+                            per_account: limits,
+                        },
+                        registration: limits,
+                        email_authentication: {
+                            per_ip: limits,
+                            per_address: limits,
+                            emails_per_session: limits,
+                            attempt_per_session: limits,
+                        },
+                        account_recovery: {
+                            per_ip: limits,
+                            per_address: limits,
+                        },
+                    },
+                })
                 .start();
 
             homeserver.withConfig({
@@ -40,16 +51,10 @@ export const masHomeserver: Fixtures = {
                 enable_registration_without_verification: undefined,
                 disable_msisdn_registration: undefined,
                 password_config: undefined,
-                experimental_features: {
-                    msc3861: {
-                        enabled: true,
-                        issuer: `http://mas:8080/`,
-                        introspection_endpoint: "http://mas:8080/oauth2/introspect",
-                        client_id: config.clients[0].client_id,
-                        client_auth_method: config.clients[0].client_auth_method,
-                        client_secret: config.clients[0].client_secret,
-                        admin_token: config.matrix.secret,
-                    },
+                matrix_authentication_service: {
+                    enabled: true,
+                    endpoint: "http://mas:8080/",
+                    secret,
                 },
             });
 
@@ -59,28 +64,6 @@ export const masHomeserver: Fixtures = {
         { scope: "worker" },
     ],
 
-    config: async ({ homeserver, context, mas }, use) => {
-        const issuer = `${mas.baseUrl}/`;
-        const wellKnown = {
-            "m.homeserver": {
-                base_url: homeserver.baseUrl,
-            },
-            "org.matrix.msc2965.authentication": {
-                issuer,
-                account: `${issuer}account`,
-            },
-        };
-
-        // Ensure org.matrix.msc2965.authentication is in well-known
-        await context.route("https://localhost/.well-known/matrix/client", async (route) => {
-            await route.fulfill({ json: wellKnown });
-        });
-
-        await use({
-            default_server_config: wellKnown,
-        });
-    },
-
     context: async ({ homeserverType, context }, use, testInfo) => {
         testInfo.skip(homeserverType !== "synapse", "does not yet support MAS");
         await use(context);