Stop using deprecated Element Call URL parameters

These deprecated parameters will be removed very soon (planned for Element Call version 0.15.0) and we no longer have to care about backward compatibility with old versions of Element Call (due to the embedding/bundling work), so now is the right time to migrate.

.github/CODEOWNERS

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

.github/workflows/build.yml

@@ -43,7 +43,7 @@ jobs:
             run:
                 shell: bash
         steps:
-            - uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
+            - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
 
             - uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
               with:

.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@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
+            - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
 
             - name: Download package
               run: |

.github/workflows/build_develop.yml

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

.github/workflows/deploy.yml

@@ -34,7 +34,7 @@ jobs:
         env:
             SITE: ${{ inputs.site || 'staging.element.io' }}
         steps:
-            - uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
+            - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
 
             - 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@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
+            - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
               with:
                   fetch-depth: 0 # needed for docker-package to be able to calculate the version
 
@@ -37,14 +37,14 @@ jobs:
                   install: true
 
             - name: Login to Docker Hub
-              uses: docker/login-action@184bdaa0721073962dff0199f1fb9940f07167d1 # v3
+              uses: docker/login-action@74a5d142397b4f367a81961eba4e8cd7edddf772 # v3
               if: github.event_name != 'pull_request'
               with:
                   username: ${{ secrets.DOCKERHUB_USERNAME }}
                   password: ${{ secrets.DOCKERHUB_TOKEN }}
 
             - name: Login to GitHub Container Registry
-              uses: docker/login-action@184bdaa0721073962dff0199f1fb9940f07167d1 # v3
+              uses: docker/login-action@74a5d142397b4f367a81961eba4e8cd7edddf772 # v3
               if: github.event_name != 'pull_request'
               with:
                   registry: ghcr.io
@@ -96,7 +96,7 @@ jobs:
 
             - name: Docker meta
               id: meta
-              uses: docker/metadata-action@c1e51972afc2121e065aed6d45c65596fe445f3f # v5
+              uses: docker/metadata-action@902fa8ec7d6ecbf8d84d538b9b233a880e428804 # v5
               if: github.event_name != 'pull_request'
               with:
                   images: |
@@ -139,16 +139,3 @@ jobs:
                   username: ${{ secrets.DOCKERHUB_USERNAME }}
                   password: ${{ secrets.DOCKERHUB_TOKEN }}
                   repository: vectorim/element-web
-
-            - name: Repository Dispatch
-              uses: peter-evans/repository-dispatch@ff45666b9427631e3450c54a1bcbee4d9ff4d7c0 # v3
-              if: github.event_name != 'pull_request'
-              with:
-                  repository: element-hq/element-web-pro
-                  token: ${{ secrets.ELEMENT_BOT_TOKEN }}
-                  event-type: image-built
-                  # Stable way to determine the :version
-                  client-payload: |-
-                      {
-                          "base-ref": "${{ fromJSON(steps.meta.outputs.json).labels['org.opencontainers.image.version'] }}"
-                      }

.github/workflows/docs.yml

@@ -17,18 +17,18 @@ jobs:
         runs-on: ubuntu-24.04
         steps:
             - name: Fetch element-desktop
-              uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
+              uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
               with:
                   repository: element-hq/element-desktop
                   path: element-desktop
 
             - name: Fetch element-web
-              uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
+              uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
               with:
                   path: element-web
 
             - name: Fetch matrix-js-sdk
-              uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
+              uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
               with:
                   repository: matrix-org/matrix-js-sdk
                   path: matrix-js-sdk

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

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

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

@@ -50,7 +50,7 @@ jobs:
             runners-matrix: ${{ steps.runner-vars.outputs.matrix }}
         steps:
             - name: Checkout code
-              uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
+              uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
               with:
                   repository: element-hq/element-web
 
@@ -129,13 +129,13 @@ jobs:
                     - runAllTests: false
                       project: Pinecone
         steps:
-            - uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
+            - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
               with:
                   persist-credentials: false
                   repository: element-hq/element-web
 
             - name: 📥 Download artifact
-              uses: actions/download-artifact@634f93cb2916e3fdff6788551b99b062d0335ce0 # v5
+              uses: actions/download-artifact@d3f86a106a0bac45b974a628896c90dbdf5c8093 # v4
               with:
                   name: webapp
                   path: webapp
@@ -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@0400d5f644dc74513175e3cd8d07132dd4860809 # v4
+              uses: actions/cache@5a3ec84eff668545956fd18022155c47e93e2684 # v4
               id: playwright-cache
               with:
                   path: ~/.cache/ms-playwright
@@ -201,7 +201,7 @@ jobs:
         if: always()
         runs-on: ubuntu-24.04
         steps:
-            - uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
+            - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
               if: inputs.skip != true
               with:
                   persist-credentials: false
@@ -219,7 +219,7 @@ jobs:
 
             - name: Download blob reports from GitHub Actions Artifacts
               if: inputs.skip != true
-              uses: actions/download-artifact@634f93cb2916e3fdff6788551b99b062d0335ce0 # v5
+              uses: actions/download-artifact@d3f86a106a0bac45b974a628896c90dbdf5c8093 # v4
               with:
                   pattern: all-blob-reports-*
                   path: all-blob-reports

.github/workflows/netlify.yaml

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

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

@@ -10,7 +10,7 @@ jobs:
         permissions:
             pull-requests: write
         steps:
-            - uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
+            - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
 
             - name: Update synapse image
               run: |
@@ -21,15 +21,6 @@ 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/release_prepare.yml

@@ -41,7 +41,7 @@ jobs:
             REPOS: matrix-js-sdk element-web element-desktop
         steps:
             - name: Checkout Element Desktop
-              uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
+              uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
               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@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
+              uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
               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@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
+              uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
               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@634f93cb2916e3fdff6788551b99b062d0335ce0 # v5
+              uses: actions/download-artifact@d3f86a106a0bac45b974a628896c90dbdf5c8093 # v4
               with:
                   github-token: ${{ secrets.GITHUB_TOKEN }}
                   run-id: ${{ github.event.workflow_run.id }}

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

@@ -21,7 +21,7 @@ jobs:
             issues: read
             pull-requests: read
         steps:
-            - uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
+            - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
               with:
                   persist-credentials: false
                   repository: element-hq/element-web
@@ -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@0400d5f644dc74513175e3cd8d07132dd4860809 # v4
+              uses: actions/cache@5a3ec84eff668545956fd18022155c47e93e2684 # v4
               id: playwright-cache
               with:
                   path: ~/.cache/ms-playwright

.github/workflows/static_analysis.yaml

@@ -23,7 +23,7 @@ jobs:
         name: "Typescript Syntax Check"
         runs-on: ubuntu-24.04
         steps:
-            - uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
+            - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
 
             - uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
               with:
@@ -52,13 +52,12 @@ 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@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
+            - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
 
             - run: ./res/css/rethemendex.sh
 
@@ -68,7 +67,7 @@ jobs:
         name: "ESLint"
         runs-on: ubuntu-24.04
         steps:
-            - uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
+            - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
 
             - uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
               with:
@@ -86,7 +85,7 @@ jobs:
         name: "Style Lint"
         runs-on: ubuntu-24.04
         steps:
-            - uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
+            - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
 
             - uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
               with:
@@ -104,7 +103,7 @@ jobs:
         name: "Workflow Lint"
         runs-on: ubuntu-24.04
         steps:
-            - uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
+            - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
 
             - uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
               with:
@@ -122,7 +121,7 @@ jobs:
         name: "Analyse Dead Code"
         runs-on: ubuntu-24.04
         steps:
-            - uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
+            - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
 
             - uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
               with:

.github/workflows/tests.yml

@@ -39,7 +39,7 @@ jobs:
                 runner: [1, 2]
         steps:
             - name: Checkout code
-              uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
+              uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
               with:
                   repository: ${{ inputs.matrix-js-sdk-sha && 'element-hq/element-web' || github.repository }}
 
@@ -55,7 +55,7 @@ jobs:
                   JS_SDK_GITHUB_BASE_REF: ${{ inputs.matrix-js-sdk-sha }}
 
             - name: Jest Cache
-              uses: actions/cache@0400d5f644dc74513175e3cd8d07132dd4860809 # v4
+              uses: actions/cache@5a3ec84eff668545956fd18022155c47e93e2684 # 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@244f685bbc3b7adfa8466e08b698b5577571133e # v1.0.2
+            - uses: actions/add-to-project@main
               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@244f685bbc3b7adfa8466e08b698b5577571133e # v1.0.2
+            - uses: actions/add-to-project@main
               with:
                   project-url: https://github.com/orgs/element-hq/projects/120
                   github-token: ${{ secrets.ELEMENT_BOT_TOKEN }}

.github/workflows/triage-labelled.yml

@@ -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@244f685bbc3b7adfa8466e08b698b5577571133e # v1.0.2
+            - uses: actions/add-to-project@main
               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@244f685bbc3b7adfa8466e08b698b5577571133e # v1.0.2
+            - uses: actions/add-to-project@main
               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@244f685bbc3b7adfa8466e08b698b5577571133e # v1.0.2
+            - uses: actions/add-to-project@main
               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@244f685bbc3b7adfa8466e08b698b5577571133e # v1.0.2
+            - uses: actions/add-to-project@main
               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@244f685bbc3b7adfa8466e08b698b5577571133e # v1.0.2
+            - uses: actions/add-to-project@main
               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@244f685bbc3b7adfa8466e08b698b5577571133e # v1.0.2
+            - uses: actions/add-to-project@main
               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@8ad880e4d437783ea2ab17010324de1075228110 # v2.3.2
+            - uses: octokit/graphql-action@v2.x
               id: find_team_members
               with:
                   headers: '{"GraphQL-Features": "projects_next_graphql"}'
@@ -52,7 +52,7 @@ jobs:
                   fi
               env:
                   TEAM: "design"
-            - uses: octokit/graphql-action@8ad880e4d437783ea2ab17010324de1075228110 # v2.3.2
+            - uses: octokit/graphql-action@v2.x
               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@8ad880e4d437783ea2ab17010324de1075228110 # v2.3.2
+            - uses: octokit/graphql-action@v2.x
               id: find_team_members
               with:
                   headers: '{"GraphQL-Features": "projects_next_graphql"}'
@@ -119,7 +119,7 @@ jobs:
                   fi
               env:
                   TEAM: "product"
-            - uses: octokit/graphql-action@8ad880e4d437783ea2ab17010324de1075228110 # v2.3.2
+            - uses: octokit/graphql-action@v2.x
               id: add_to_project
               if: steps.any_matching_reviewers.outputs.match == 'true'
               with:

.github/workflows/update-jitsi.yml

@@ -9,7 +9,7 @@ jobs:
     update:
         runs-on: ubuntu-24.04
         steps:
-            - uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5
+            - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
 
             - uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
               with:

.stylelintrc.js

@@ -70,13 +70,5 @@ module.exports = {
                 ],
             },
         ],
-        "property-no-deprecated": [
-            true,
-            {
-                ignoreProperties: ["-webkit-box-orient", "word-wrap"],
-            },
-        ],
-        "nesting-selector-no-missing-scoping-root": null,
-        "no-invalid-position-declaration": null,
     },
 };

CHANGELOG.md

@@ -1,62 +1,3 @@
-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
-
-* [Backport staging] Fix downloaded attachments not being decrypted ([#30434](https://github.com/element-hq/element-web/pull/30434)). Contributed by @RiotRobot.
-
-
-Changes in [1.11.107](https://github.com/element-hq/element-web/releases/tag/v1.11.107) (2025-07-29)
-====================================================================================================
-## ✨ Features
-
-* Message preview should show tooltip with the full message on hover ([#30265](https://github.com/element-hq/element-web/pull/30265)). Contributed by @MidhunSureshR.
-* Support rendering notification badges on platforms that do their own icon overlays ([#30315](https://github.com/element-hq/element-web/pull/30315)). Contributed by @Half-Shot.
-* Add SubscriptionViewModel base class ([#30297](https://github.com/element-hq/element-web/pull/30297)). Contributed by @dbkr.
-* Enhancement: Save image on CTRL+S ([#30330](https://github.com/element-hq/element-web/pull/30330)). Contributed by @ioalexander.
-* Add quote functionality to MessageContextMenu (#29893) ([#30323](https://github.com/element-hq/element-web/pull/30323)). Contributed by @AlirezaMrtz.
-* Initial structure for shared component views ([#30216](https://github.com/element-hq/element-web/pull/30216)). Contributed by @dbkr.
-
-## 🐛 Bug Fixes
-
-* [Backport staging] Fix e2e shield being invisible in white mode for encrypted room ([#30411](https://github.com/element-hq/element-web/pull/30411)). Contributed by @RiotRobot.
-* Force ED titlebar color for new room list ([#30332](https://github.com/element-hq/element-web/pull/30332)). Contributed by @florianduros.
-* Add a background color to left panel for macos titlebar in element desktop ([#30328](https://github.com/element-hq/element-web/pull/30328)). Contributed by @florianduros.
-* Fix: Prevent page refresh on Enter key in right panel member search ([#30312](https://github.com/element-hq/element-web/pull/30312)). Contributed by @AlirezaMrtz.
-
-
 Changes in [1.11.106](https://github.com/element-hq/element-web/releases/tag/v1.11.106) (2025-07-15)
 ====================================================================================================
 ## ✨ Features

Dockerfile

@@ -1,7 +1,7 @@
 # syntax=docker.io/docker/dockerfile:1.17-labs@sha256:9187104f31e3a002a8a6a3209ea1f937fb7486c093cbbde1e14b0fa0d7e4f1b5
 
 # Builder
-FROM --platform=$BUILDPLATFORM node:22-bullseye@sha256:9e34ba52e1f3c31ed9bd4d0bcf784f5909db17cda61c220e29c8d7a8ebfb402e AS builder
+FROM --platform=$BUILDPLATFORM node:22-bullseye@sha256:a80324457a2c8d09c83ff9edf2bdf71f378d3288de920e68a358bd3c484b8c4a AS builder
 
 # Support custom branch of the js-sdk. This also helps us build images of element-web develop.
 ARG USE_CUSTOM_SDKS=false
@@ -19,7 +19,7 @@ RUN /src/scripts/docker-package.sh
 RUN cp /src/config.sample.json /src/webapp/config.json
 
 # App
-FROM nginxinc/nginx-unprivileged:alpine-slim@sha256:ea6c4b8b568824ea94cd1fabd47e1c4e7c0c04744f344a3793f7e9c8ac3a3636
+FROM nginxinc/nginx-unprivileged:alpine-slim@sha256:86df552d36eb24c45d3f5becf6423bd056a3fd235d7085fe3d5ea28ba89a8232
 
 # 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

jest.config.ts

@@ -40,6 +40,8 @@ const config: Config = {
         "^!!raw-loader!.*": "jest-raw-loader",
         "recorderWorkletFactory": "<rootDir>/__mocks__/empty.js",
         "^fetch-mock$": "<rootDir>/node_modules/fetch-mock",
+        // Requires ESM which is incompatible with our current Jest setup
+        "^@element-hq/element-web-module-api$": "<rootDir>/__mocks__/empty.js",
     },
     transformIgnorePatterns: ["/node_modules/(?!(mime|matrix-js-sdk)).+$"],
     collectCoverageFrom: [

package.json

@@ -1,6 +1,6 @@
 {
     "name": "element-web",
-    "version": "1.11.109",
+    "version": "1.11.106",
     "description": "Element: the future of secure communication",
     "author": "New Vector Ltd.",
     "repository": {
@@ -73,10 +73,10 @@
         "test:storybook:update": "playwright-screenshots --entrypoint yarn --with-node-modules && playwright-screenshots --entrypoint /work/node_modules/.bin/test-storybook --with-node-modules --url http://host.docker.internal:6007/ --updateSnapshot"
     },
     "resolutions": {
-        "**/pretty-format/react-is": "19.1.1",
-        "@playwright/test": "1.54.2",
-        "@types/react": "19.1.10",
-        "@types/react-dom": "19.1.7",
+        "**/pretty-format/react-is": "19.1.0",
+        "@playwright/test": "1.54.1",
+        "@types/react": "19.1.8",
+        "@types/react-dom": "19.1.6",
         "oidc-client-ts": "3.3.0",
         "jwt-decode": "4.0.0",
         "caniuse-lite": "1.0.30001724",
@@ -86,7 +86,7 @@
     },
     "dependencies": {
         "@babel/runtime": "^7.12.5",
-        "@element-hq/element-web-module-api": "1.4.1",
+        "@element-hq/element-web-module-api": "1.3.0",
         "@fontsource/inconsolata": "^5",
         "@fontsource/inter": "^5",
         "@formatjs/intl-segmenter": "^11.5.7",
@@ -94,9 +94,10 @@
         "@matrix-org/emojibase-bindings": "^1.3.4",
         "@matrix-org/react-sdk-module-api": "^2.4.0",
         "@matrix-org/spec": "^1.7.0",
-        "@sentry/browser": "^10.0.0",
+        "@sentry/browser": "^9.0.0",
         "@types/png-chunks-extract": "^1.0.2",
-        "@vector-im/compound-design-tokens": "^6.0.0",
+        "@types/react-virtualized": "^9.21.30",
+        "@vector-im/compound-design-tokens": "^5.0.0",
         "@vector-im/compound-web": "^8.1.2",
         "@vector-im/matrix-wysiwyg": "2.39.0",
         "@zxcvbn-ts/core": "^3.0.4",
@@ -116,7 +117,7 @@
         "emojibase-regex": "15.3.2",
         "escape-html": "^1.0.3",
         "file-saver": "^2.0.5",
-        "filesize": "11.0.2",
+        "filesize": "10.1.6",
         "github-markdown-css": "^5.5.1",
         "glob-to-regexp": "^0.4.1",
         "highlight.js": "^11.3.1",
@@ -127,9 +128,9 @@
         "jsrsasign": "^11.0.0",
         "jszip": "^3.7.0",
         "katex": "^0.16.0",
-        "linkify-react": "4.3.2",
-        "linkify-string": "4.3.2",
-        "linkifyjs": "4.3.2",
+        "linkify-react": "4.3.1",
+        "linkify-string": "4.3.1",
+        "linkifyjs": "4.3.1",
         "lodash": "^4.17.21",
         "maplibre-gl": "^5.0.0",
         "matrix-encrypt-attachment": "^1.0.3",
@@ -142,7 +143,7 @@
         "opus-recorder": "^8.0.3",
         "pako": "^2.0.3",
         "png-chunks-extract": "^1.0.0",
-        "posthog-js": "1.260.1",
+        "posthog-js": "1.257.0",
         "qrcode": "1.5.4",
         "re-resizable": "6.11.2",
         "react": "^19.0.0",
@@ -152,7 +153,7 @@
         "react-focus-lock": "^2.5.1",
         "react-string-replace": "^1.1.1",
         "react-transition-group": "^4.4.1",
-        "react-virtuoso": "^4.14.0",
+        "react-virtualized": "^9.22.5",
         "rfc4648": "^1.4.0",
         "sanitize-filename": "^1.6.3",
         "sanitize-html": "2.17.0",
@@ -184,8 +185,8 @@
         "@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.6",
+        "@element-hq/element-call-embedded": "0.13.1",
+        "@element-hq/element-web-playwright-common": "^1.4.3",
         "@peculiar/webcrypto": "^1.4.3",
         "@playwright/test": "^1.50.1",
         "@principalstudio/html-webpack-inject-preload": "^1.2.7",
@@ -221,9 +222,9 @@
         "@types/node-fetch": "^2.6.2",
         "@types/pako": "^2.0.0",
         "@types/qrcode": "^1.3.5",
-        "@types/react": "19.1.10",
+        "@types/react": "19.1.8",
         "@types/react-beautiful-dnd": "^13.0.0",
-        "@types/react-dom": "19.1.7",
+        "@types/react-dom": "19.1.6",
         "@types/react-transition-group": "^4.4.0",
         "@types/sanitize-html": "2.16.0",
         "@types/semver": "^7.5.8",
@@ -298,8 +299,8 @@
         "semver": "^7.5.2",
         "source-map-loader": "^5.0.0",
         "storybook": "^9.0.12",
-        "stylelint": "^16.23.0",
-        "stylelint-config-standard": "^39.0.0",
+        "stylelint": "^16.13.0",
+        "stylelint-config-standard": "^38.0.0",
         "stylelint-scss": "^6.0.0",
         "stylelint-value-no-unknown-custom-properties": "^6.0.1",
         "terser-webpack-plugin": "^5.3.9",

playwright/e2e/audio-player/audio-player.spec.ts

@@ -19,7 +19,6 @@ const clickButtonReply = async (tile: Locator) => {
         await tile.hover();
         await tile.getByRole("button", { name: "Reply", exact: true }).click();
     }).toPass();
-    await expect(tile.page().getByText("Replying", { exact: true })).toBeVisible();
 };
 
 test.describe("Audio player", { tag: ["@no-firefox", "@no-webkit"] }, () => {
@@ -40,7 +39,7 @@ test.describe("Audio player", { tag: ["@no-firefox", "@no-webkit"] }, () => {
         // wait for the tile to finish loading
         await expect(
             page
-                .getByTestId("audio-player-name")
+                .locator(".mx_AudioPlayer_mediaName")
                 .last()
                 .filter({ hasText: file.split("/").at(-1) }),
         ).toBeVisible();
@@ -55,10 +54,12 @@ test.describe("Audio player", { tag: ["@no-firefox", "@no-webkit"] }, () => {
         // Check that the audio player is rendered and its button becomes visible
         const checkPlayerVisibility = async (locator: Locator) => {
             // Assert that the audio player and media information are visible
-            const mediaInfo = locator.getByRole("region", { name: "Audio player" });
-            await expect(mediaInfo.getByText(".ogg")).toBeVisible(); // extension
-            await expect(mediaInfo.getByRole("time")).toHaveText("00:01"); // duration
-            await expect(mediaInfo.getByText("(3.56 KB)")).toBeVisible(); // actual size;
+            const mediaInfo = locator.locator(
+                ".mx_EventTile_mediaLine .mx_MAudioBody .mx_AudioPlayer_container .mx_AudioPlayer_mediaInfo",
+            );
+            await expect(mediaInfo.locator(".mx_AudioPlayer_mediaName", { hasText: ".ogg" })).toBeVisible(); // extension
+            await expect(mediaInfo.locator(".mx_AudioPlayer_byline", { hasText: "00:01" })).toBeVisible();
+            await expect(mediaInfo.locator(".mx_AudioPlayer_byline", { hasText: "(3.56 KB)" })).toBeVisible(); // actual size
 
             // Assert that the play button can be found and is visible
             await expect(locator.getByRole("button", { name: "Play" })).toBeVisible();
@@ -77,7 +78,7 @@ test.describe("Audio player", { tag: ["@no-firefox", "@no-webkit"] }, () => {
         }
 
         // Check the status of the seek bar
-        expect(await page.getByRole("region", { name: "Audio player" }).getByRole("slider").count()).toBeGreaterThan(0);
+        expect(await page.locator(".mx_AudioPlayer_seek input[type='range']").count()).toBeGreaterThan(0);
 
         // Enable IRC layout
         await app.settings.setValue("layout", null, SettingLevel.DEVICE, Layout.IRC);
@@ -99,7 +100,7 @@ test.describe("Audio player", { tag: ["@no-firefox", "@no-webkit"] }, () => {
                     display: none !important;
                 }
             `,
-            mask: [page.getByTestId("audio-player-seek")],
+            mask: [page.locator(".mx_AudioPlayer_seek")],
         };
 
         // Take a snapshot of mx_EventTile_last on IRC layout
@@ -185,9 +186,9 @@ test.describe("Audio player", { tag: ["@no-firefox", "@no-webkit"] }, () => {
         await uploadFile(page, "playwright/sample-files/1sec.ogg");
 
         // Assert that the audio player is rendered
-        const container = page.locator(".mx_EventTile_last").getByRole("region", { name: "Audio player" });
+        const container = page.locator(".mx_EventTile_last .mx_AudioPlayer_container");
         // Assert that the counter is zero before clicking the play button
-        await expect(container.getByRole("timer")).toHaveText("00:00");
+        await expect(container.locator(".mx_AudioPlayer_seek [role='timer']", { hasText: "00:00" })).toBeVisible();
 
         // Find and click "Play" button, the wait is to make the test less flaky
         await expect(container.getByRole("button", { name: "Play" })).toBeVisible();
@@ -197,7 +198,7 @@ test.describe("Audio player", { tag: ["@no-firefox", "@no-webkit"] }, () => {
         await expect(container.getByRole("button", { name: "Pause" })).toBeVisible();
 
         // Assert that the timer is reset when the audio file finished playing
-        await expect(container.getByRole("timer")).toHaveText("00:00");
+        await expect(container.locator(".mx_AudioPlayer_seek [role='timer']", { hasText: "00:00" })).toBeVisible();
 
         // Assert that "Play" button can be found
         await expect(container.getByRole("button", { name: "Play" })).toBeVisible();
@@ -225,7 +226,7 @@ test.describe("Audio player", { tag: ["@no-firefox", "@no-webkit"] }, () => {
             await uploadFile(page, "playwright/sample-files/1sec.ogg");
 
             // Assert the audio player is rendered
-            await expect(page.getByRole("region", { name: "Audio player" })).toBeVisible();
+            await expect(page.locator(".mx_EventTile_last .mx_AudioPlayer_container")).toBeVisible();
 
             // Find and click "Reply" button on MessageActionBar
             const tile = page.locator(".mx_EventTile_last");
@@ -235,7 +236,7 @@ test.describe("Audio player", { tag: ["@no-firefox", "@no-webkit"] }, () => {
             await uploadFile(page, "playwright/sample-files/1sec.ogg");
 
             // Assert that the audio player is rendered
-            await expect(tile.getByRole("region", { name: "Audio player" })).toBeVisible();
+            await expect(tile.locator(".mx_AudioPlayer_container")).toBeVisible();
 
             // Assert that replied audio file is rendered as file button inside ReplyChain
             const button = tile.locator(".mx_ReplyChain_wrapper .mx_MFileBody_info[role='button']");
@@ -260,9 +261,7 @@ test.describe("Audio player", { tag: ["@no-firefox", "@no-webkit"] }, () => {
             await uploadFile(page, "playwright/sample-files/upload-first.ogg");
 
             // Assert that the audio player is rendered
-            await expect(
-                page.locator(".mx_EventTile_last").getByRole("region", { name: "Audio player" }),
-            ).toBeVisible();
+            await expect(page.locator(".mx_EventTile_last .mx_AudioPlayer_container")).toBeVisible();
 
             await clickButtonReply(tile);
 
@@ -270,9 +269,7 @@ test.describe("Audio player", { tag: ["@no-firefox", "@no-webkit"] }, () => {
             await uploadFile(page, "playwright/sample-files/upload-second.ogg");
 
             // Assert that the audio player is rendered
-            await expect(
-                page.locator(".mx_EventTile_last").getByRole("region", { name: "Audio player" }),
-            ).toBeVisible();
+            await expect(page.locator(".mx_EventTile_last .mx_AudioPlayer_container")).toBeVisible();
 
             await clickButtonReply(tile);
 
@@ -280,7 +277,7 @@ test.describe("Audio player", { tag: ["@no-firefox", "@no-webkit"] }, () => {
             await uploadFile(page, "playwright/sample-files/upload-third.ogg");
 
             // Assert that the audio player is rendered
-            await expect(tile.getByRole("region", { name: "Audio player" })).toBeVisible();
+            await expect(tile.locator(".mx_AudioPlayer_container")).toBeVisible();
 
             // Assert that there are two "mx_ReplyChain" elements
             await expect(tile.locator(".mx_ReplyChain")).toHaveCount(2);
@@ -316,9 +313,7 @@ test.describe("Audio player", { tag: ["@no-firefox", "@no-webkit"] }, () => {
         // On the main timeline
         const messageList = page.locator(".mx_RoomView_MessageList");
         // Assert the audio player is rendered
-        await expect(
-            messageList.locator(".mx_EventTile_last").getByRole("region", { name: "Audio player" }),
-        ).toBeVisible();
+        await expect(messageList.locator(".mx_EventTile_last .mx_AudioPlayer_container")).toBeVisible();
         // Find and click "Reply in thread" button
         await messageList.locator(".mx_EventTile_last").hover();
         await messageList.locator(".mx_EventTile_last").getByRole("button", { name: "Reply in thread" }).click();
@@ -326,10 +321,10 @@ test.describe("Audio player", { tag: ["@no-firefox", "@no-webkit"] }, () => {
         // On a thread
         const thread = page.locator(".mx_ThreadView");
         const threadTile = thread.locator(".mx_EventTile_last");
-        const audioPlayer = threadTile.getByRole("region", { name: "Audio player" });
+        const audioPlayer = threadTile.locator(".mx_AudioPlayer_container");
 
         // Assert that the counter is zero before clicking the play button
-        await expect(audioPlayer.getByRole("timer")).toHaveText("00:00");
+        await expect(audioPlayer.locator(".mx_AudioPlayer_seek [role='timer']", { hasText: "00:00" })).toBeVisible();
 
         // Find and click "Play" button, the wait is to make the test less flaky
         await expect(audioPlayer.getByRole("button", { name: "Play" })).toBeVisible();
@@ -339,7 +334,7 @@ test.describe("Audio player", { tag: ["@no-firefox", "@no-webkit"] }, () => {
         await expect(audioPlayer.getByRole("button", { name: "Pause" })).toBeVisible();
 
         // Assert that the timer is reset when the audio file finished playing
-        await expect(audioPlayer.getByRole("timer")).toHaveText("00:00");
+        await expect(audioPlayer.locator(".mx_AudioPlayer_seek [role='timer']", { hasText: "00:00" })).toBeVisible();
 
         // Assert that "Play" button can be found
         await expect(audioPlayer.getByRole("button", { name: "Play" })).not.toBeDisabled();

playwright/e2e/composer/CIDER.spec.ts

@@ -28,7 +28,7 @@ test.describe("Composer", () => {
 
     test.describe("CIDER", () => {
         test("sends a message when you click send or press Enter", async ({ page }) => {
-            const composer = page.getByRole("textbox", { name: "Send an unencrypted message…" });
+            const composer = page.getByRole("textbox", { name: "Send a message…" });
 
             // Type a message
             await composer.pressSequentially("my message 0");
@@ -52,7 +52,7 @@ test.describe("Composer", () => {
         });
 
         test("can write formatted text", async ({ page }) => {
-            const composer = page.getByRole("textbox", { name: "Send an unencrypted message…" });
+            const composer = page.getByRole("textbox", { name: "Send a message…" });
 
             await composer.pressSequentially("my bold");
             await composer.press(`${CtrlOrMeta}+KeyB`);
@@ -68,7 +68,7 @@ test.describe("Composer", () => {
             await page.getByTestId("mx_EmojiPicker").locator(".mx_EmojiPicker_item", { hasText: "😇" }).click();
 
             await page.locator(".mx_ContextualMenu_background").click(); // Close emoji picker
-            await page.getByRole("textbox", { name: "Send an unencrypted message…" }).press("Enter"); // Send message
+            await page.getByRole("textbox", { name: "Send a message…" }).press("Enter"); // Send message
 
             await expect(page.locator(".mx_EventTile_body", { hasText: "😇" })).toBeVisible();
         });
@@ -79,7 +79,7 @@ test.describe("Composer", () => {
             });
 
             test("only sends when you press Control+Enter", async ({ page }) => {
-                const composer = page.getByRole("textbox", { name: "Send an unencrypted message…" });
+                const composer = page.getByRole("textbox", { name: "Send a message…" });
                 // Type a message and press Enter
                 await composer.pressSequentially("my message 3");
                 await composer.press("Enter");

playwright/e2e/crypto/backups-mas.spec.ts

@@ -91,10 +91,10 @@ test.describe("Key backup reset from elsewhere", () => {
 
         await csAPI.deleteBackupVersion(backupInfo.version);
 
-        await page.getByRole("textbox", { name: "Send a message…" }).fill("/discardsession");
+        await page.getByRole("textbox", { name: "Send an encrypted message…" }).fill("/discardsession");
         await page.getByRole("button", { name: "Send message" }).click();
 
-        await page.getByRole("textbox", { name: "Send a message…" }).fill("Message with broken key backup");
+        await page.getByRole("textbox", { name: "Send an encrypted message…" }).fill("Message with broken key backup");
         await page.getByRole("button", { name: "Send message" }).click();
 
         // Should be the message we sent plus the room creation event

playwright/e2e/crypto/crypto.spec.ts

@@ -154,12 +154,11 @@ test.describe("Cryptography", function () {
             await app.client.bootstrapCrossSigning(aliceCredentials);
             await startDMWithBob(page, bob);
             // send first message
-            await page.getByRole("textbox", { name: "Send an unencrypted message…" }).fill("Hey!");
-            await page.getByRole("textbox", { name: "Send an unencrypted message…" }).press("Enter");
+            await page.getByRole("textbox", { name: "Send a message…" }).fill("Hey!");
+            await page.getByRole("textbox", { name: "Send a message…" }).press("Enter");
             await checkDMRoom(page);
             const bobRoomId = await bobJoin(page, bob);
-            // We no longer show the grey badge in the composer, check that it is not there.
-            await expect(page.locator(".mx_MessageComposer_e2eIcon")).toHaveCount(0);
+            await expect(page.locator(".mx_MessageComposer_e2eIcon")).toMatchScreenshot("composer-e2e-icon-normal.png");
 
             await testMessages(page, bob, bobRoomId);
             await verify(app, bob);

playwright/e2e/crypto/device-verification.spec.ts

@@ -124,10 +124,6 @@ test.describe("Device verification", { tag: "@no-webkit" }, () => {
         const toasts = new Toasts(page);
         await toasts.rejectToast("Notifications");
         await toasts.assertNoToasts();
-
-        // There may still be a `/sendToDevice/m.secret.request` in flight, which will later throw an error and cause
-        // a *subsequent* test to fail. Tell playwright to ignore any errors resulting from in-flight routes.
-        await page.unrouteAll({ behavior: "ignoreErrors" });
     });
 
     test("Verify device with QR code during login", async ({ page, app, credentials, homeserver }) => {
@@ -209,7 +205,7 @@ test.describe("Device verification", { tag: "@no-webkit" }, () => {
         const dialog = page.locator(".mx_Dialog");
         // We use `pressSequentially` here to make sure that the FocusLock isn't causing us any problems
         // (cf https://github.com/element-hq/element-web/issues/30089)
-        await dialog.getByTitle("Recovery key").pressSequentially(recoveryKey);
+        await dialog.locator("textarea").pressSequentially(recoveryKey);
         await dialog.getByRole("button", { name: "Continue", disabled: false }).click();
 
         await page.getByRole("button", { name: "Done" }).click();

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

@@ -58,108 +58,108 @@ test.describe("Cryptography", function () {
             await app.client.network.setupRoute();
         });
 
-        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);
+        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);
 
-                // 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 expect(lastE2eIcon).toMatchScreenshot("event-shield-warning.png");
-                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 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,

playwright/e2e/crypto/toasts.spec.ts

@@ -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("switch", { name: "Allow key storage" })).toBeVisible();
+        await expect(page.getByRole("checkbox", { 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("switch", { name: "Allow key storage" })).toBeVisible();
+        await expect(page.getByRole("checkbox", { 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

@@ -228,7 +228,7 @@ export async function logIntoElement(page: Page, credentials: Credentials, secur
             await useSecurityKey.click();
         }
         // Fill in the recovery key
-        await page.locator(".mx_Dialog").getByTitle("Recovery key").fill(securityKey);
+        await page.locator(".mx_Dialog").locator("textarea").fill(securityKey);
         await page.getByRole("button", { name: "Continue", disabled: false }).click();
         await page.getByRole("button", { name: "Done" }).click();
     }
@@ -263,7 +263,7 @@ 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.locator(".mx_Dialog").getByTitle("Recovery key").fill(securityKey);
+    await app.page.locator(".mx_Dialog").locator("textarea").fill(securityKey);
     await app.page.getByRole("button", { name: "Continue", disabled: false }).click();
     await app.page.getByRole("button", { name: "Done" }).click();
     await app.settings.closeDialog();
@@ -300,9 +300,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("switch", { name: "Allow key storage" });
+    const keyStorageToggle = encryptionTab.getByRole("checkbox", { name: "Allow key storage" });
     if (!(await keyStorageToggle.isChecked())) {
-        await encryptionTab.getByRole("switch", { name: "Allow key storage" }).click();
+        await encryptionTab.getByRole("checkbox", { name: "Allow key storage" }).click();
     }
 
     await encryptionTab.getByRole("button", { name: "Set up recovery" }).click();
@@ -323,11 +323,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("switch", { name: "Allow key storage" });
+    const keyStorageToggle = encryptionTab.getByRole("checkbox", { name: "Allow key storage" });
     if (await keyStorageToggle.isChecked()) {
-        await encryptionTab.getByRole("switch", { name: "Allow key storage" }).click();
+        await encryptionTab.getByRole("checkbox", { name: "Allow key storage" }).click();
         await encryptionTab.getByRole("button", { name: "Delete key storage" }).click();
-        await encryptionTab.getByRole("switch", { name: "Allow key storage" }).isVisible();
+        await encryptionTab.getByRole("checkbox", { name: "Allow key storage" }).isVisible();
 
         // Wait for the update to account data to stick
         await new Promise((resolve) => setTimeout(resolve, 2000));

playwright/e2e/lazy-loading/lazy-loading.spec.ts

@@ -30,10 +30,6 @@ test.describe("Lazy Loading", () => {
     });
 
     test.beforeEach(async ({ page, homeserver, user, bot, app }) => {
-        // The charlies were running off the bottom of the screen.
-        // We no longer overscan the member list so the result is they are not in the dom.
-        // Increase the viewport size to ensure they are.
-        await page.setViewportSize({ width: 1000, height: 1000 });
         for (let i = 1; i <= 10; i++) {
             const displayName = `Charly #${i}`;
             const bot = new Bot(page, homeserver, { displayName, startClient: false, autoAcceptInvites: false });

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("option", { name: "Open room Old Room" });
+        const oldRoomTile = roomListView.getByRole("gridcell", { name: "Open room Old Room" });
         await expect(oldRoomTile).toBeVisible();
 
         /*
@@ -139,9 +139,8 @@ test.describe("Room list filters and sort", () => {
 
             // Open the non-favourite room
             const roomListView = getRoomList(page);
-            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);
+            const tile = roomListView.getByRole("gridcell", { name: "Open room room-non-fav" });
+            await tile.scrollIntoViewIfNeeded();
             await tile.click();
 
             // Enable Favourite filter
@@ -152,7 +151,7 @@ test.describe("Room list filters and sort", () => {
 
             // Ensure the room list is not scrolled
             const isScrolledDown = await page
-                .getByRole("listbox", { name: "Room list", exact: true })
+                .getByRole("grid", { name: "Room list" })
                 .evaluate((e) => e.scrollTop !== 0);
             expect(isScrolledDown).toStrictEqual(false);
         });
@@ -228,37 +227,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("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(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(primaryFilters).toMatchScreenshot("unread-primary-filters.png");
 
             await primaryFilters.getByRole("option", { name: "People" }).click();
-            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 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 primaryFilters.getByRole("option", { name: "Rooms" }).click();
-            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 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 getFilterExpandButton(page).click();
 
             await primaryFilters.getByRole("option", { name: "Favourite" }).click();
-            await expect(roomList.getByRole("option", { name: "favourite room" })).toBeVisible();
-            await expect.poll(() => roomList.locator("role=option").count()).toBe(1);
+            await expect(roomList.getByRole("gridcell", { name: "favourite room" })).toBeVisible();
+            await expect.poll(() => roomList.locator("role=gridcell").count()).toBe(1);
 
             await primaryFilters.getByRole("option", { name: "Mentions" }).click();
-            await expect(roomList.getByRole("option", { name: "room with mention" })).toBeVisible();
-            await expect.poll(() => roomList.locator("role=option").count()).toBe(1);
+            await expect(roomList.getByRole("gridcell", { name: "room with mention" })).toBeVisible();
+            await expect.poll(() => roomList.locator("role=gridcell").count()).toBe(1);
 
             await primaryFilters.getByRole("option", { name: "Invites" }).click();
-            await expect(roomList.getByRole("option", { name: "invited room" })).toBeVisible();
-            await expect.poll(() => roomList.locator("role=option").count()).toBe(1);
+            await expect(roomList.getByRole("gridcell", { name: "invited room" })).toBeVisible();
+            await expect.poll(() => roomList.locator("role=gridcell").count()).toBe(1);
 
             await getFilterCollapseButton(page).click();
             await expect(primaryFilters.locator("role=option").first()).toHaveText("Invites");
@@ -269,7 +268,6 @@ 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);
@@ -278,20 +276,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("option", { name: "Open room favourite room" }).click();
+                await roomListView.getByRole("gridcell", { 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 primaryFilters.getByRole("option", { name: "Unread" }).click();
+                await page.getByRole("option", { name: "Unread" }).click();
 
                 // Unread filter should only show unread room and not unread dm!
-                const unreadDm = roomListView.getByRole("option", { name: "Open room unread room" });
+                const unreadDm = roomListView.getByRole("gridcell", { name: "Open room unread room" });
                 await expect(unreadDm).toBeVisible();
                 await expect(unreadDm).toMatchScreenshot("unread-dm.png");
-                await expect(roomListView.getByRole("option", { name: "Open room unread dm" })).not.toBeVisible();
+                await expect(roomListView.getByRole("gridcell", { name: "Open room unread dm" })).not.toBeVisible();
             },
         );
 
@@ -301,7 +299,7 @@ test.describe("Room list filters and sort", () => {
             await getRoomOptionsMenu(page).click();
             await page.getByRole("menuitemradio", { name: "A-Z" }).click();
 
-            await expect(roomListView.getByRole("option").first()).toHaveText(/empty room/);
+            await expect(roomListView.getByRole("gridcell").first()).toHaveText(/empty room/);
         });
 
         test("should move room to the top on message when sorting by activity", async ({ page, bot }) => {
@@ -309,7 +307,7 @@ test.describe("Room list filters and sort", () => {
 
             await bot.sendMessage(unReadDmId, "Hello!");
 
-            await expect(roomListView.getByRole("option").first()).toHaveText(/unread dm/);
+            await expect(roomListView.getByRole("gridcell").first()).toHaveText(/unread dm/);
         });
     });
 

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

@@ -35,8 +35,8 @@ test.describe("Header section of the room list", () => {
 
         await expect(page.getByRole("menu")).toMatchScreenshot("room-list-header-compose-menu.png");
 
-        // Start chat should open the direct messages dialog
-        await page.getByRole("menuitem", { name: "Start chat" }).click();
+        // New message should open the direct messages dialog
+        await page.getByRole("menuitem", { name: "New message" }).click();
         await expect(page.getByRole("heading", { name: "Direct Messages" })).toBeVisible();
         await app.closeDialog();
 

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("option", { name: "Open room room19" })).toBeVisible();
+        await expect(roomListView.getByRole("gridcell", { name: "Open room room19" })).toBeVisible();
         await expect(roomListView).toMatchScreenshot("room-list-panel.png");
     });
 

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

@@ -43,35 +43,31 @@ test.describe("Room list", () => {
 
         test("should render the room list", { tag: "@screenshot" }, async ({ page, app, user }) => {
             const roomListView = getRoomList(page);
-            await expect(roomListView.getByRole("option", { name: "Open room room29" })).toBeVisible();
+            await expect(roomListView.getByRole("gridcell", { name: "Open room room29" })).toBeVisible();
             await expect(roomListView).toMatchScreenshot("room-list.png");
 
             // Put focus on the room list
-            await roomListView.getByRole("option", { name: "Open room room29" }).click();
+            await roomListView.getByRole("gridcell", { name: "Open room room29" }).click();
             // Scroll to the end of the room 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 app.scrollListToBottom(page.locator(".mx_RoomList_List"));
             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("option", { name: "Open room room29" }).click();
+            await roomListView.getByRole("gridcell", { 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("option", { name: "Open room room29" }).click({ button: "right" });
+            await roomListView.getByRole("gridcell", { 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("option", { name: "Open room room29" });
+            const roomItem = roomListView.getByRole("gridcell", { name: "Open room room29" });
             await roomItem.hover();
 
             await expect(roomItem).toMatchScreenshot("room-list-item-hover.png");
@@ -101,7 +97,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("option", { name: "Open room room29" });
+            const roomItem = roomListView.getByRole("gridcell", { name: "Open room room29" });
             await roomItem.hover();
 
             await expect(roomItem).toMatchScreenshot("room-list-item-hover.png");
@@ -121,10 +117,10 @@ test.describe("Room list", () => {
             await expect(roomItem.getByTestId("notification-decoration")).not.toBeVisible();
 
             // Put focus on the room list
-            await roomListView.getByRole("option", { name: "Open room room28" }).click();
+            await roomListView.getByRole("gridcell", { name: "Open room room28" }).click();
 
             // Scroll to the end of the room list
-            await app.scrollListToBottom(roomListView);
+            await app.scrollListToBottom(page.locator(".mx_RoomList_List"));
 
             // The room decoration should have the muted icon
             await expect(roomItem.getByTestId("notification-decoration")).toBeVisible();
@@ -143,25 +139,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("option", { name: "Open room room29" }).click();
+            await roomListView.getByRole("gridcell", { name: "Open room room29" }).click();
             // Scroll to the end of the room list
-            await app.scrollListToBottom(roomListView);
+            await app.scrollListToBottom(page.locator(".mx_RoomList_List"));
 
-            await expect(roomListView.getByRole("option", { name: "Open room room0" })).toBeVisible();
-            await roomListView.getByRole("option", { name: "Open room room0" }).click();
+            await expect(roomListView.getByRole("gridcell", { name: "Open room room0" })).toBeVisible();
+            await roomListView.getByRole("gridcell", { 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("option", { name: "Open room room0" })).not.toBeVisible();
+            await expect(roomListView.getByRole("gridcell", { name: "Open room room0" })).not.toBeVisible();
 
             await filters.getByRole("option", { name: "People" }).click();
-            await expect(roomListView.getByRole("option", { name: "Open room room0" })).toBeVisible();
+            await expect(roomListView.getByRole("gridcell", { 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("option", { name: "Open room room29" }).click();
+                await roomListView.getByRole("gridcell", { name: "Open room room29" }).click();
                 await page.keyboard.press("Alt+ArrowDown");
 
                 await expect(page.getByRole("heading", { name: "room28", level: 1 })).toBeVisible();
@@ -169,7 +165,7 @@ test.describe("Room list", () => {
 
             test("should select the previous room", async ({ page, app, user }) => {
                 const roomListView = getRoomList(page);
-                await roomListView.getByRole("option", { name: "Open room room28" }).click();
+                await roomListView.getByRole("gridcell", { name: "Open room room28" }).click();
                 await page.keyboard.press("Alt+ArrowUp");
 
                 await expect(page.getByRole("heading", { name: "room29", level: 1 })).toBeVisible();
@@ -177,7 +173,7 @@ test.describe("Room list", () => {
 
             test("should select the last room", async ({ page, app, user }) => {
                 const roomListView = getRoomList(page);
-                await roomListView.getByRole("option", { name: "Open room room29" }).click();
+                await roomListView.getByRole("gridcell", { name: "Open room room29" }).click();
                 await page.keyboard.press("Alt+ArrowUp");
 
                 await expect(page.getByRole("heading", { name: "room0", level: 1 })).toBeVisible();
@@ -191,7 +187,7 @@ test.describe("Room list", () => {
                 await bot.joinRoom(roomId);
                 await bot.sendMessage(roomId, "I am a robot. Beep.");
 
-                await roomListView.getByRole("option", { name: "Open room room20" }).click();
+                await roomListView.getByRole("gridcell", { name: "Open room room20" }).click();
 
                 await page.keyboard.press("Alt+Shift+ArrowDown");
 
@@ -203,8 +199,8 @@ test.describe("Room list", () => {
             test("should navigate to the room list", async ({ page, app, user }) => {
                 const roomListView = getRoomList(page);
 
-                const room29 = roomListView.getByRole("option", { name: "Open room room29" });
-                const room28 = roomListView.getByRole("option", { name: "Open room room28" });
+                const room29 = roomListView.getByRole("gridcell", { name: "Open room room29" });
+                const room28 = roomListView.getByRole("gridcell", { name: "Open room room28" });
 
                 // open the room
                 await room29.click();
@@ -223,7 +219,7 @@ test.describe("Room list", () => {
 
             test("should navigate to the notification menu", async ({ page, app, user }) => {
                 const roomListView = getRoomList(page);
-                const room29 = roomListView.getByRole("option", { name: "Open room room29" });
+                const room29 = roomListView.getByRole("gridcell", { name: "Open room room29" });
                 const moreButton = room29.getByRole("button", { name: "More options" });
                 const notificationButton = room29.getByRole("button", { name: "Notification options" });
 
@@ -262,7 +258,7 @@ test.describe("Room list", () => {
             await page.getByRole("button", { name: "User menu" }).focus();
 
             const roomListView = getRoomList(page);
-            const publicRoom = roomListView.getByRole("option", { name: "public room" });
+            const publicRoom = roomListView.getByRole("gridcell", { name: "public room" });
 
             await expect(publicRoom).toBeVisible();
             await expect(publicRoom).toMatchScreenshot("room-list-item-public.png");
@@ -272,7 +268,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("option", { name: "low priority room" });
+            const publicRoom = roomListView.getByRole("gridcell", { name: "low priority room" });
 
             // Make room low priority
             await publicRoom.hover();
@@ -297,7 +293,7 @@ test.describe("Room list", () => {
             await page.getByRole("button", { name: "Create video room" }).click();
 
             const roomListView = getRoomList(page);
-            const videoRoom = roomListView.getByRole("option", { name: "video room" });
+            const videoRoom = roomListView.getByRole("gridcell", { name: "video room" });
 
             // focus the user menu to avoid to have hover decoration
             await page.getByRole("button", { name: "User menu" }).focus();
@@ -316,7 +312,7 @@ test.describe("Room list", () => {
                 invite: [user.userId],
                 is_direct: true,
             });
-            const invitedRoom = roomListView.getByRole("option", { name: "invited room" });
+            const invitedRoom = roomListView.getByRole("gridcell", { name: "invited room" });
             await expect(invitedRoom).toBeVisible();
             await expect(invitedRoom).toMatchScreenshot("room-list-item-invited.png");
         });
@@ -331,7 +327,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("option", { name: "2 notifications" });
+            const room = roomListView.getByRole("gridcell", { name: "2 notifications" });
             await expect(room).toBeVisible();
             await expect(room.getByTestId("notification-decoration")).toHaveText("2");
             await expect(room).toMatchScreenshot("room-list-item-notification.png");
@@ -362,7 +358,7 @@ test.describe("Room list", () => {
             );
             await bot.sendMessage(roomId, "I am a robot. Beep.");
 
-            const room = roomListView.getByRole("option", { name: "mention" });
+            const room = roomListView.getByRole("gridcell", { name: "mention" });
             await expect(room).toBeVisible();
             await expect(room).toMatchScreenshot("room-list-item-mention.png");
         });
@@ -383,7 +379,7 @@ test.describe("Room list", () => {
             await bot.joinRoom(roomId);
             await bot.sendMessage(roomId, "I am a robot. Beep.");
 
-            const room = roomListView.getByRole("option", { name: "activity" });
+            const room = roomListView.getByRole("gridcell", { name: "activity" });
             await expect(room.getByText("I am a robot. Beep.")).toBeVisible();
             await expect(room).toMatchScreenshot("room-list-item-message-preview.png");
         });
@@ -410,7 +406,7 @@ test.describe("Room list", () => {
             await app.viewRoomById(otherRoomId);
             await bot.sendMessage(roomId, "I am a robot. Beep.");
 
-            const room = roomListView.getByRole("option", { name: "activity" });
+            const room = roomListView.getByRole("gridcell", { name: "activity" });
             await expect(room.getByTestId("notification-decoration")).toBeVisible();
             await expect(room).toMatchScreenshot("room-list-item-activity.png");
         });
@@ -422,7 +418,7 @@ test.describe("Room list", () => {
             await app.client.inviteUser(roomId, bot.credentials.userId);
             await bot.joinRoom(roomId);
 
-            const room = roomListView.getByRole("option", { name: "mark as unread" });
+            const room = roomListView.getByRole("gridcell", { name: "mark as unread" });
             await room.hover();
             await room.getByRole("button", { name: "More Options" }).click();
             await page.getByRole("menuitem", { name: "mark as unread" }).click();
@@ -445,7 +441,7 @@ test.describe("Room list", () => {
             await page.getByText("Off").click();
             await app.settings.closeDialog();
 
-            const room = roomListView.getByRole("option", { name: "silent" });
+            const room = roomListView.getByRole("gridcell", { name: "silent" });
             await expect(room.getByTestId("notification-decoration")).toBeVisible();
             await expect(room).toMatchScreenshot("room-list-item-silent.png");
         });

playwright/e2e/messages/messages.spec.ts

@@ -13,7 +13,7 @@ import { type Locator, type Page } from "@playwright/test";
 import { test, expect } from "../../element-web-test";
 
 async function sendMessage(page: Page, message: string): Promise<Locator> {
-    await page.getByRole("textbox", { name: "Send an unencrypted message…" }).fill(message);
+    await page.getByRole("textbox", { name: "Send a message…" }).fill(message);
     await page.getByRole("button", { name: "Send message" }).click();
 
     const msgTile = page.locator(".mx_EventTile_last");
@@ -22,7 +22,7 @@ async function sendMessage(page: Page, message: string): Promise<Locator> {
 }
 
 async function sendMultilineMessages(page: Page, messages: string[]) {
-    await page.getByRole("textbox", { name: "Send an unencrypted message…" }).focus();
+    await page.getByRole("textbox", { name: "Send a message…" }).focus();
     for (let i = 0; i < messages.length; i++) {
         await page.keyboard.type(messages[i]);
         if (i < messages.length - 1) await page.keyboard.press("Shift+Enter");
@@ -40,7 +40,7 @@ async function replyMessage(page: Page, message: Locator, replyMessage: string):
     await line.hover();
     await line.getByRole("button", { name: "Reply", exact: true }).click();
 
-    await page.getByRole("textbox", { name: "Send an unencrypted reply…" }).fill(replyMessage);
+    await page.getByRole("textbox", { name: "Send a reply…" }).fill(replyMessage);
     await page.getByRole("button", { name: "Send message" }).click();
 
     const msgTile = page.locator(".mx_EventTile_last");

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

@@ -95,6 +95,10 @@ 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."),

playwright/e2e/permalinks/permalinks.spec.ts

@@ -100,51 +100,3 @@ 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/regression-tests/pills-click-in-app.spec.ts

@@ -29,7 +29,7 @@ test.describe("Pills", () => {
 
         // send a message using the built-in room mention functionality (autocomplete)
         await page
-            .getByRole("textbox", { name: "Send an unencrypted message…" })
+            .getByRole("textbox", { name: "Send a message…" })
             .pressSequentially(`Hello world! Join here: #${targetLocalpart.substring(0, 3)}`);
         await page.locator(".mx_Autocomplete_Completion_title").click();
         await page.getByRole("button", { name: "Send message" }).click();

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 Page } from "@playwright/test";
+import { type Download, type Page } from "@playwright/test";
 
 import { test, expect } from "../../element-web-test";
 import { viewRoomSummaryByName } from "./utils";
@@ -63,7 +63,9 @@ test.describe("FilePanel", () => {
             await expect(roomViewBody.locator(".mx_EventTile[data-layout='group'] img[alt='riot.png']")).toBeVisible();
 
             // Assert that the audio player is rendered
-            await expect(roomViewBody.getByRole("region", { name: "Audio player" })).toBeVisible();
+            await expect(
+                roomViewBody.locator(".mx_EventTile[data-layout='group'] .mx_AudioPlayer_container"),
+            ).toBeVisible();
 
             // Assert that the file button exists
             await expect(
@@ -95,7 +97,9 @@ test.describe("FilePanel", () => {
             await expect(image.locator("img[alt='riot.png']")).toBeVisible();
 
             // Detect the audio file
-            const audio = filePanelMessageList.getByRole("region", { name: "Audio player" });
+            const audio = filePanelMessageList.locator(
+                ".mx_EventTile_mediaLine .mx_MAudioBody .mx_AudioPlayer_container",
+            );
             // Assert that the play button is rendered
             await expect(audio.getByRole("button", { name: "Play" })).toBeVisible();
 
@@ -126,7 +130,7 @@ test.describe("FilePanel", () => {
             // Take a snapshot of file tiles list on FilePanel
             await expect(filePanelMessageList).toMatchScreenshot("file-tiles-list.png", {
                 // Exclude timestamps & flaky seek bar from snapshot
-                mask: [page.locator(".mx_MessageTimestamp"), page.getByTestId("audio-player-seek")],
+                mask: [page.locator(".mx_MessageTimestamp, .mx_AudioPlayer_seek")],
             });
         });
 
@@ -134,19 +138,21 @@ test.describe("FilePanel", () => {
             // Upload an image file
             await uploadFile(page, "playwright/sample-files/1sec.ogg");
 
-            const audioBody = page.getByTestId("right-panel").getByRole("region", { name: "Audio player" });
-
+            const audioBody = page.locator(
+                ".mx_FilePanel .mx_RoomView_MessageList .mx_EventTile_mediaLine .mx_MAudioBody .mx_AudioPlayer_container",
+            );
             // Assert that the audio player is rendered
-            // Assert that the audio file information is rendered;
-            await expect(audioBody.getByText("1sec.ogg")).toBeVisible(); // extension
-            await expect(audioBody.getByRole("time")).toHaveText("00:01"); // duration
-            await expect(audioBody.getByText("(3.56 KB)")).toBeVisible(); // actual size;
+            // Assert that the audio file information is rendered
+            const mediaInfo = audioBody.locator(".mx_AudioPlayer_mediaInfo");
+            await expect(mediaInfo.locator(".mx_AudioPlayer_mediaName").getByText("1sec.ogg")).toBeVisible();
+            await expect(mediaInfo.locator(".mx_AudioPlayer_byline", { hasText: "00:01" })).toBeVisible();
+            await expect(mediaInfo.locator(".mx_AudioPlayer_byline", { hasText: "(3.56 KB)" })).toBeVisible(); // actual size
 
             // Assert that the duration counter is 00:01 before clicking the play button
-            await expect(audioBody.getByRole("time")).toHaveText("00:01");
+            await expect(audioBody.locator(".mx_AudioPlayer_mediaInfo time", { hasText: "00:01" })).toBeVisible();
 
             // Assert that the counter is zero before clicking the play button
-            await expect(audioBody.getByRole("timer")).toHaveText("00:00");
+            await expect(audioBody.locator(".mx_AudioPlayer_seek [role='timer']", { hasText: "00:00" })).toBeVisible();
 
             // Click the play button
             await audioBody.getByRole("button", { name: "Play" }).click();
@@ -155,7 +161,7 @@ test.describe("FilePanel", () => {
             await expect(audioBody.getByRole("button", { name: "Pause" })).toBeVisible();
 
             // Assert that the timer is reset when the audio file finished playing
-            await expect(audioBody.getByRole("timer")).toHaveText("00:00");
+            await expect(audioBody.locator(".mx_AudioPlayer_seek [role='timer']", { hasText: "00:00" })).toBeVisible();
 
             // Assert that the play button is rendered
             await expect(audioBody.getByRole("button", { name: "Play" })).toBeVisible();
@@ -189,13 +195,23 @@ test.describe("FilePanel", () => {
 
             const link = imageBody.locator(".mx_MFileBody_download a");
 
-            const downloadPromise = page.waitForEvent("download");
+            const newPagePromise = context.waitForEvent("page");
+
+            const downloadPromise = new Promise<Download>((resolve) => {
+                page.once("download", resolve);
+            });
 
             // Click the anchor link (not the image itself)
             await link.click();
 
-            const download = await downloadPromise;
-            expect(download.suggestedFilename()).toBe("riot.png");
+            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");
+                });
         });
     });
 });

playwright/e2e/right-panel/memberlist.spec.ts

@@ -11,32 +11,6 @@ import { Bot } from "../../pages/bot";
 const ROOM_NAME = "Test room";
 const NAME = "Alice";
 
-async function setupRoomWithMembers(
-    app: any,
-    page: any,
-    homeserver: any,
-    roomName: string,
-    memberNames: string[],
-): Promise<string> {
-    const visibility = await page.evaluate(() => (window as any).matrixcs.Visibility.Public);
-    const id = await app.client.createRoom({ name: roomName, visibility });
-    const bots: Bot[] = [];
-
-    for (let i = 0; i < memberNames.length; i++) {
-        const displayName = memberNames[i];
-        const bot = new Bot(page, homeserver, { displayName, startClient: false, autoAcceptInvites: false });
-        if (displayName === "Susan") {
-            await bot.prepareClient();
-            await app.client.inviteUser(id, bot.credentials?.userId);
-        } else {
-            await bot.joinRoom(id);
-        }
-        bots.push(bot);
-    }
-
-    return id;
-}
-
 test.use({
     synapseConfig: {
         presence: {
@@ -51,8 +25,17 @@ test.use({
 test.describe("Memberlist", () => {
     test.beforeEach(async ({ app, user, page, homeserver }, testInfo) => {
         testInfo.setTimeout(testInfo.timeout + 30_000);
+        const id = await app.client.createRoom({ name: ROOM_NAME });
+        const newBots: Bot[] = [];
         const names = ["Bob", "Bob", "Susan"];
-        await setupRoomWithMembers(app, page, homeserver, ROOM_NAME, names);
+        for (let i = 0; i < 3; i++) {
+            const displayName = names[i];
+            const autoAcceptInvites = displayName !== "Susan";
+            const bot = new Bot(page, homeserver, { displayName, startClient: true, autoAcceptInvites });
+            await bot.prepareClient();
+            await app.client.inviteUser(id, bot.credentials?.userId);
+            newBots.push(bot);
+        }
     });
 
     test("Renders correctly", { tag: "@screenshot" }, async ({ page, app }) => {
@@ -62,37 +45,4 @@ test.describe("Memberlist", () => {
         await expect(memberlist.getByText("Invited")).toHaveCount(1);
         await expect(page.locator(".mx_MemberListView")).toMatchScreenshot("with-four-members.png");
     });
-
-    test("should handle scroll and click to view member profile", async ({ page, app, homeserver }) => {
-        // Create a room with many members to enable scrolling
-        const memberNames = Array.from({ length: 15 }, (_, i) => `Member${i.toString()}`);
-        await setupRoomWithMembers(app, page, homeserver, "Large Room", memberNames);
-
-        // Navigate to the room and open member list
-        await app.viewRoomByName("Large Room");
-
-        const memberlist = await app.toggleMemberlistPanel();
-
-        // Get the scrollable container
-        const memberListContainer = memberlist.locator(".mx_AutoHideScrollbar");
-
-        // Scroll down to the bottom of the member list
-        await app.scrollListToBottom(memberListContainer);
-
-        // Wait for the target member to be visible after scrolling
-        const targetName = "Member14";
-        const targetMember = memberlist.locator(".mx_MemberTileView_name").filter({ hasText: targetName });
-        await targetMember.waitFor({ state: "visible" });
-
-        // Verify Alice is not visible at this point
-        await expect(memberlist.locator(".mx_MemberTileView_name").filter({ hasText: "Alice" })).toHaveCount(0);
-
-        // Click on a member near the bottom of the list
-        await expect(targetMember).toBeVisible();
-        await targetMember.click();
-
-        // Verify that the user info screen is shown and hasn't scrolled back to top
-        await expect(page.locator(".mx_UserInfo")).toBeVisible();
-        await expect(page.locator(".mx_UserInfo_profile").getByText(targetName)).toBeVisible();
-    });
 });

playwright/e2e/room/room-header.spec.ts

@@ -37,8 +37,11 @@ test.describe("Room Header", () => {
             await expect(header.locator(".mx_FacePile")).toBeVisible();
 
             // There should be both a voice and a video call button
-            await expect(header.getByRole("button", { name: "Video call" })).toBeVisible();
-            await expect(header.getByRole("button", { name: "Voice call" })).toBeVisible();
+            // 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: "Threads" })).toBeVisible();
             await expect(header.getByRole("button", { name: "Notifications" })).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("switch", { name: "Match system theme" });
+        return this.getThemePanel().getByRole("checkbox", { name: "Match system theme" });
     }
 
     /**
@@ -219,7 +219,7 @@ class Helpers {
      * Return the compact layout checkbox
      */
     getCompactLayoutCheckbox() {
-        return this.getMessageLayoutPanel().getByRole("switch", { name: "Show compact text and messages" });
+        return this.getMessageLayoutPanel().getByRole("checkbox", { 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("switch", { name: "Allow key storage" }).click();
+            await page.getByRole("checkbox", { 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("switch", { name: "Allow key storage" })).not.toBeChecked();
+            await expect(page.getByRole("checkbox", { name: "Allow key storage" })).not.toBeChecked();
 
             for (const prom of deleteRequestPromises) {
                 const request = await prom;

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

@@ -18,14 +18,13 @@ 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 dialog.getByRole("listitem" /*, { name: "A test room" }*/).getByRole("button", { name: "Send" }).click();
-        await dialog.getByRole("button", { name: "Close" }).click();
+        await page.getByRole("listitem" /*, { name: "A test room" }*/).getByRole("button", { name: "Send" }).click();
+        await page.keyboard.press("Escape");
         await app.viewRoomByName("A test room");
         const lastMessage = page.locator(".mx_RoomView_MessageList .mx_EventTile_last");
         await expect(lastMessage).toBeVisible();

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

@@ -35,7 +35,7 @@ test.describe("Share dialog", () => {
 
         const rightPanel = await app.toggleRoomInfoPanel();
         await rightPanel.getByRole("menuitem", { name: "People" }).click();
-        await rightPanel.getByRole("option", { name: user.displayName }).click();
+        await rightPanel.getByRole("button", { name: `${user.userId} (power 100)` }).click();
         await rightPanel.getByRole("button", { name: "Share profile" }).click();
 
         const dialog = page.getByRole("dialog", { name: "Share User" });

playwright/e2e/spaces/spaces.spec.ts

@@ -23,7 +23,7 @@ async function openSpaceContextMenu(page: Page, app: ElementAppPage, spaceName:
     return page.locator(".mx_SpacePanel_contextMenu");
 }
 
-function spaceCreateOptions(serverName: string, spaceName: string, roomIds: string[] = []): ICreateRoomOpts {
+function spaceCreateOptions(spaceName: string, roomIds: string[] = []): ICreateRoomOpts {
     return {
         creation_content: {
             type: "m.space",
@@ -35,21 +35,17 @@ function spaceCreateOptions(serverName: string, spaceName: string, roomIds: stri
                     name: spaceName,
                 },
             },
-            ...roomIds.map((r) => spaceChildInitialState(serverName, r)),
+            ...roomIds.map((r) => spaceChildInitialState(r)),
         ],
     };
 }
 
-function spaceChildInitialState(
-    serverName: string,
-    roomId: string,
-    order?: string,
-): ICreateRoomOpts["initial_state"]["0"] {
+function spaceChildInitialState(roomId: string, order?: string): ICreateRoomOpts["initial_state"]["0"] {
     return {
         type: "m.space.child",
         state_key: roomId,
         content: {
-            via: [serverName],
+            via: [roomId.split(":")[1]],
             order,
         },
     };
@@ -244,7 +240,7 @@ test.describe("Spaces", () => {
         });
         await expect(await app.getSpacePanelButton("My Space")).toBeVisible();
 
-        const roomId = await bot.createRoom(spaceCreateOptions(user.homeServer, "Space Space"));
+        const roomId = await bot.createRoom(spaceCreateOptions("Space Space"));
         await bot.inviteUser(roomId, user.userId);
 
         // Assert that `Space Space` is above `My Space` due to it being an invite
@@ -264,10 +260,7 @@ test.describe("Spaces", () => {
         const spaceName = "Spacey Mc. Space Space";
         await app.client.createSpace({
             name: spaceName,
-            initial_state: [
-                spaceChildInitialState(user.homeServer, roomId1),
-                spaceChildInitialState(user.homeServer, roomId2),
-            ],
+            initial_state: [spaceChildInitialState(roomId1), spaceChildInitialState(roomId2)],
         });
 
         await app.viewSpaceHomeByName(spaceName);
@@ -294,7 +287,7 @@ test.describe("Spaces", () => {
             });
             await app.client.createSpace({
                 name: "Root Space",
-                initial_state: [spaceChildInitialState(user.homeServer, childSpaceId)],
+                initial_state: [spaceChildInitialState(childSpaceId)],
             });
 
             // Find collapsed Space panel
@@ -330,7 +323,7 @@ test.describe("Spaces", () => {
             name: "Test Room",
             topic: "This is a topic https://github.com/matrix-org/matrix-react-sdk/pull/10060 with a link",
         });
-        const spaceId = await bot.createRoom(spaceCreateOptions(user.homeServer, "Test Space", [roomId]));
+        const spaceId = await bot.createRoom(spaceCreateOptions("Test Space", [roomId]));
         await bot.inviteUser(spaceId, user.userId);
 
         await expect(await app.getSpacePanelButton("Test Space")).toBeVisible();
@@ -368,9 +361,9 @@ test.describe("Spaces", () => {
         await app.client.createSpace({
             name: "Root Space",
             initial_state: [
-                spaceChildInitialState(user.homeServer, childSpaceId1, "a"),
-                spaceChildInitialState(user.homeServer, childSpaceId2, "b"),
-                spaceChildInitialState(user.homeServer, childSpaceId3, "c"),
+                spaceChildInitialState(childSpaceId1, "a"),
+                spaceChildInitialState(childSpaceId2, "b"),
+                spaceChildInitialState(childSpaceId3, "c"),
             ],
         });
         await app.viewSpaceByName("Root Space");

playwright/e2e/spotlight/spotlight.spec.ts

@@ -30,7 +30,7 @@ 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");
@@ -260,7 +260,7 @@ 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");
 

playwright/e2e/threads/threads.spec.ts

@@ -43,7 +43,7 @@ test.describe("Threads", () => {
 
         const roomViewLocator = page.locator(".mx_RoomView_body");
         // User sends message
-        const textbox = roomViewLocator.getByRole("textbox", { name: "Send an unencrypted message…" });
+        const textbox = roomViewLocator.getByRole("textbox", { name: "Send a message…" });
         await textbox.fill("Hello Mr. Bot");
         await textbox.press("Enter");
 
@@ -108,7 +108,7 @@ test.describe("Threads", () => {
         await app.settings.setValue("layout", null, SettingLevel.DEVICE, Layout.Group);
 
         // User responds in thread
-        locator = page.locator(".mx_ThreadView").getByRole("textbox", { name: "Send an unencrypted message…" });
+        locator = page.locator(".mx_ThreadView").getByRole("textbox", { name: "Send a message…" });
         await locator.fill("Test");
         await locator.press("Enter");
 
@@ -262,7 +262,7 @@ test.describe("Threads", () => {
         await locator.locator(".mx_EventTile_line").click();
 
         // User responds & asserts
-        locator = page.locator(".mx_ThreadView").getByRole("textbox", { name: "Send an unencrypted message…" });
+        locator = page.locator(".mx_ThreadView").getByRole("textbox", { name: "Send a message…" });
         await locator.fill("Great!");
         await locator.press("Enter");
 
@@ -335,8 +335,8 @@ test.describe("Threads", () => {
 
             // Send message
             const locator = page.locator(".mx_RoomView_body");
-            await locator.getByRole("textbox", { name: "Send an unencrypted message…" }).fill("Hello Mr. Bot");
-            await locator.getByRole("textbox", { name: "Send an unencrypted message…" }).press("Enter");
+            await locator.getByRole("textbox", { name: "Send a message…" }).fill("Hello Mr. Bot");
+            await locator.getByRole("textbox", { name: "Send a message…" }).press("Enter");
             // Create thread
             const locator2 = locator.locator(".mx_EventTile[data-scroll-tokens]").filter({ hasText: "Hello Mr. Bot" });
             await locator2.hover();
@@ -366,7 +366,7 @@ test.describe("Threads", () => {
 
             let locator = page.locator(".mx_RoomView_body");
             // User sends message
-            let textbox = locator.getByRole("textbox", { name: "Send an unencrypted message…" });
+            let textbox = locator.getByRole("textbox", { name: "Send a message…" });
             await textbox.fill("Hello Mr. Bot");
             await textbox.press("Enter");
             // Wait for message to send, get its ID and save as @threadId
@@ -395,7 +395,7 @@ test.describe("Threads", () => {
             locator = page.locator(".mx_ThreadView");
             await locator.locator(".mx_EventTile_last").hover();
             await locator.locator(".mx_EventTile_last").getByRole("button", { name: "Reply" }).click();
-            textbox = locator.getByRole("textbox", { name: "Reply to unencrypted thread…" });
+            textbox = locator.getByRole("textbox", { name: "Reply to thread…" });
             await textbox.fill("Please come here");
             await textbox.press("Enter");
             // Wait until the reply is sent
@@ -414,7 +414,7 @@ test.describe("Threads", () => {
 
         // Send message
         let locator = page.locator(".mx_RoomView_body");
-        let textbox = locator.getByRole("textbox", { name: "Send an unencrypted message…" });
+        let textbox = locator.getByRole("textbox", { name: "Send a message…" });
         await textbox.fill("Hello Mr. Bot");
         await textbox.press("Enter");
         // Create thread
@@ -425,7 +425,7 @@ test.describe("Threads", () => {
 
         // Send message to thread
         locator = page.locator(".mx_ThreadPanel");
-        textbox = locator.getByRole("textbox", { name: "Send an unencrypted message…" });
+        textbox = locator.getByRole("textbox", { name: "Send a message…" });
         await textbox.fill("Hello Mr. User");
         await textbox.press("Enter");
         await expect(locator.locator(".mx_EventTile_last").getByText("Hello Mr. User")).toBeAttached();
@@ -456,7 +456,7 @@ test.describe("Threads", () => {
          */
         const sendMessage = async (message: string) => {
             const messageComposer = page.getByRole("region", { name: "Message composer" });
-            const textbox = messageComposer.getByRole("textbox", { name: "Send an unencrypted message…" });
+            const textbox = messageComposer.getByRole("textbox", { name: "Send a message…" });
             await textbox.fill(message);
             await textbox.press("Enter");
         };
@@ -478,7 +478,7 @@ test.describe("Threads", () => {
 
             // Send a message in the thread
             const threadPanel = page.locator(".mx_ThreadPanel");
-            const textbox = threadPanel.getByRole("textbox", { name: "Send an unencrypted message…" });
+            const textbox = threadPanel.getByRole("textbox", { name: "Send a message…" });
             await textbox.fill(threadMessage);
             await textbox.press("Enter");
             await expect(threadPanel.locator(".mx_EventTile_last").getByText(threadMessage)).toBeVisible();

playwright/e2e/timeline/timeline.spec.ts

@@ -461,11 +461,11 @@ test.describe("Timeline", () => {
                 // Send a emote
                 await page
                     .locator(".mx_RoomView_body")
-                    .getByRole("textbox", { name: "Send an unencrypted message…" })
+                    .getByRole("textbox", { name: "Send a message…" })
                     .fill("/me says hello to Mr. Bot");
                 await page
                     .locator(".mx_RoomView_body")
-                    .getByRole("textbox", { name: "Send an unencrypted message…" })
+                    .getByRole("textbox", { name: "Send a message…" })
                     .press("Enter");
                 // Check inline start margin of its avatar
                 // Here --right-padding is for the avatar on the message line

playwright/plugins/homeserver/synapse/masHomeserver.ts

@@ -1,49 +1,38 @@
 /*
-Copyright 2024-2025 New Vector Ltd.
+Copyright 2024 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 "../../../testcontainers/mas.ts";
+import { MatrixAuthenticationServiceContainer } from "@element-hq/element-web-playwright-common/lib/testcontainers";
+
 import { type Fixtures } from "../../../element-web-test.ts";
 
 export const masHomeserver: Fixtures = {
     mas: [
         async ({ _homeserver: homeserver, logger, network, postgres, mailpit }, use) => {
-            const secret = "AnotherRandomSecret";
+            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 limits = { burst: 10, per_second: 10 };
             const container = await new MatrixAuthenticationServiceContainer(postgres)
                 .withNetwork(network)
                 .withNetworkAliases("mas")
                 .withLogConsumer(logger.getConsumer("mas"))
-                .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,
-                        },
-                    },
-                })
+                .withConfig(config)
                 .start();
 
             homeserver.withConfig({
@@ -51,10 +40,16 @@ export const masHomeserver: Fixtures = {
                 enable_registration_without_verification: undefined,
                 disable_msisdn_registration: undefined,
                 password_config: undefined,
-                matrix_authentication_service: {
-                    enabled: true,
-                    endpoint: "http://mas:8080/",
-                    secret,
+                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,
+                    },
                 },
             });
 
@@ -64,6 +59,28 @@ 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);