lint

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

.storybook/main.ts

@@ -31,9 +31,6 @@ const config: StorybookConfig = {
             },
             // Needed for counterpart to work
             plugins: [nodePolyfills({ include: ["process", "util"] })],
-            server: {
-                allowedHosts: ["localhost", ".docker.internal"],
-            },
         });
     },
 };

.storybook/preview.tsx

@@ -5,8 +5,7 @@ import "../res/css/shared.pcss";
 import "./preview.css";
 import React, { useLayoutEffect } from "react";
 import { FORCE_RE_RENDER } from "storybook/internal/core-events";
-import { setLanguage } from "../src/shared-components/utils/i18n";
-import { TooltipProvider } from "@vector-im/compound-web";
+import { setLanguage } from "../src/shared-components/i18n";
 
 export const globalTypes = {
     theme: {
@@ -83,24 +82,9 @@ export const withLanguageProvider: Decorator = (Story, context) => {
     );
 };
 
-const withTooltipProvider: Decorator = (Story) => {
-    return (
-        <TooltipProvider>
-            <Story />
-        </TooltipProvider>
-    );
-};
-
 const preview: Preview = {
     tags: ["autodocs"],
-    decorators: [withThemeProvider, withLanguageProvider, withTooltipProvider],
-    parameters: {
-        options: {
-            storySort: {
-                method: "alphabetical",
-            },
-        },
-    },
+    decorators: [withThemeProvider, withLanguageProvider],
 };
 
 export default preview;

.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:125996cb2451482467fc2aa4d7653075894b08e9b7711bcd761044ca270a083e 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:ef0100e39ffe377a42ad99e1f644b78097a84f1ac60a90eac3b888196b2eeb00
 
 # Need root user to install packages & manipulate the usr directory
 USER root

jest.config.ts

@@ -22,8 +22,6 @@ const config: Config = {
     setupFiles: ["jest-canvas-mock", "web-streams-polyfill/polyfill"],
     setupFilesAfterEnv: ["<rootDir>/test/setupTests.ts"],
     moduleNameMapper: {
-        // Support CSS module
-        "\\.(module.css)$": "identity-obj-proxy",
         "\\.(css|scss|pcss)$": "<rootDir>/__mocks__/cssMock.js",
         "\\.(gif|png|ttf|woff2)$": "<rootDir>/__mocks__/imageMock.js",
         "\\.svg$": "<rootDir>/__mocks__/svg.js",
@@ -40,6 +38,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": {
@@ -69,14 +69,13 @@
         "storybook": "storybook dev -p 6007",
         "build-storybook": "storybook build",
         "test:storybook": "test-storybook --url http://localhost:6007/",
-        "test:storybook:ci": "concurrently -k -s first -n \"SB,TEST\" \"yarn storybook --no-open\" \"wait-on tcp:6007 && yarn test-storybook --url http://localhost:6007/ --ci --maxWorkers=2\"",
-        "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"
+        "test:storybook:ci": "concurrently -k -s first -n \"SB,TEST\" \"yarn storybook\" \"wait-on tcp:6007 && yarn test-storybook --url http://localhost:6007/ --ci --maxWorkers=2\""
     },
     "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.53.2",
+        "@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 +85,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,12 +93,12 @@
         "@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",
         "@types/react-virtualized": "^9.21.30",
-        "@vector-im/compound-design-tokens": "^6.0.0",
+        "@vector-im/compound-design-tokens": "^5.0.0",
         "@vector-im/compound-web": "^8.1.2",
-        "@vector-im/matrix-wysiwyg": "2.39.0",
+        "@vector-im/matrix-wysiwyg": "2.38.4",
         "@zxcvbn-ts/core": "^3.0.4",
         "@zxcvbn-ts/language-common": "^3.0.4",
         "@zxcvbn-ts/language-en": "^3.0.2",
@@ -117,7 +116,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",
@@ -128,9 +127,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",
@@ -143,7 +142,7 @@
         "opus-recorder": "^8.0.3",
         "pako": "^2.0.3",
         "png-chunks-extract": "^1.0.0",
-        "posthog-js": "1.260.1",
+        "posthog-js": "1.256.2",
         "qrcode": "1.5.4",
         "re-resizable": "6.11.2",
         "react": "^19.0.0",
@@ -154,7 +153,6 @@
         "react-string-replace": "^1.1.1",
         "react-transition-group": "^4.4.1",
         "react-virtualized": "^9.22.5",
-        "react-virtuoso": "^4.12.6",
         "rfc4648": "^1.4.0",
         "sanitize-filename": "^1.6.3",
         "sanitize-html": "2.17.0",
@@ -186,13 +184,13 @@
         "@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.2",
         "@peculiar/webcrypto": "^1.4.3",
         "@playwright/test": "^1.50.1",
         "@principalstudio/html-webpack-inject-preload": "^1.2.7",
         "@rrweb/types": "^2.0.0-alpha.18",
-        "@sentry/webpack-plugin": "^4.0.0",
+        "@sentry/webpack-plugin": "^3.0.0",
         "@storybook/addon-designs": "^10.0.1",
         "@storybook/addon-docs": "^9.0.12",
         "@storybook/icons": "^1.4.0",
@@ -223,9 +221,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",
@@ -266,7 +264,6 @@
         "file-loader": "^6.0.0",
         "html-webpack-plugin": "^5.5.3",
         "husky": "^9.0.0",
-        "identity-obj-proxy": "^3.0.0",
         "jest": "^29.6.2",
         "jest-canvas-mock": "^2.5.2",
         "jest-environment-jsdom": "^29.7.0",
@@ -300,14 +297,14 @@
         "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",
         "testcontainers": "^11.0.0",
         "ts-node": "^10.9.1",
-        "typescript": "5.9.2",
+        "typescript": "5.8.3",
         "util": "^0.12.5",
         "vite": "^7.0.1",
         "vite-plugin-node-polyfills": "^0.24.0",

patches/@matrix-org+react-sdk-module-api+2.5.0.patch

@@ -11,50 +11,3 @@ index 917a7fc..a2710c6 100644
          didOkOrSubmit: boolean;
          model: M;
      }>;
-diff --git a/node_modules/@matrix-org/react-sdk-module-api/lib/lifecycles/CryptoSetupExtensions.d.ts b/node_modules/@matrix-org/react-sdk-module-api/lib/lifecycles/CryptoSetupExtensions.d.ts
-index cb5f2e5..51daa51 100644
---- a/node_modules/@matrix-org/react-sdk-module-api/lib/lifecycles/CryptoSetupExtensions.d.ts
-+++ b/node_modules/@matrix-org/react-sdk-module-api/lib/lifecycles/CryptoSetupExtensions.d.ts
-@@ -66,23 +66,23 @@ export interface SetupEncryptionStoreProjection {
- export interface ProvideCryptoSetupExtensions {
-     examineLoginResponse(response: any, credentials: ExtendedMatrixClientCreds): void;
-     persistCredentials(credentials: ExtendedMatrixClientCreds): void;
--    getSecretStorageKey(): Uint8Array | null;
--    createSecretStorageKey(): Uint8Array | null;
-+    getSecretStorageKey(): Uint8Array<ArrayBuffer> | null;
-+    createSecretStorageKey(): Uint8Array<ArrayBuffer> | null;
-     catchAccessSecretStorageError(e: Error): void;
-     setupEncryptionNeeded: (args: CryptoSetupArgs) => boolean;
-     /** @deprecated This callback is no longer used by matrix-react-sdk */
--    getDehydrationKeyCallback(): ((keyInfo: SecretStorageKeyDescription, checkFunc: (key: Uint8Array) => void) => Promise<Uint8Array>) | null;
-+    getDehydrationKeyCallback(): ((keyInfo: SecretStorageKeyDescription, checkFunc: (key: Uint8Array<ArrayBuffer>) => void) => Promise<Uint8Array<ArrayBuffer>>) | null;
-     SHOW_ENCRYPTION_SETUP_UI: boolean;
- }
- export declare abstract class CryptoSetupExtensionsBase implements ProvideCryptoSetupExtensions {
-     abstract examineLoginResponse(response: any, credentials: ExtendedMatrixClientCreds): void;
-     abstract persistCredentials(credentials: ExtendedMatrixClientCreds): void;
--    abstract getSecretStorageKey(): Uint8Array | null;
--    abstract createSecretStorageKey(): Uint8Array | null;
-+    abstract getSecretStorageKey(): Uint8Array<ArrayBuffer> | null;
-+    abstract createSecretStorageKey(): Uint8Array<ArrayBuffer> | null;
-     abstract catchAccessSecretStorageError(e: Error): void;
-     abstract setupEncryptionNeeded(args: CryptoSetupArgs): boolean;
-     /** `getDehydrationKeyCallback` is no longer used; we provide an empty impl for type compatibility. */
--    getDehydrationKeyCallback(): ((keyInfo: SecretStorageKeyDescription, checkFunc: (key: Uint8Array) => void) => Promise<Uint8Array>) | null;
-+    getDehydrationKeyCallback(): ((keyInfo: SecretStorageKeyDescription, checkFunc: (key: Uint8Array<ArrayBuffer>) => void) => Promise<Uint8Array<ArrayBuffer>>) | null;
-     abstract SHOW_ENCRYPTION_SETUP_UI: boolean;
- }
- export interface CryptoSetupArgs {
-@@ -98,9 +98,9 @@ export declare class DefaultCryptoSetupExtensions extends CryptoSetupExtensionsB
-     SHOW_ENCRYPTION_SETUP_UI: boolean;
-     examineLoginResponse(response: any, credentials: ExtendedMatrixClientCreds): void;
-     persistCredentials(credentials: ExtendedMatrixClientCreds): void;
--    getSecretStorageKey(): Uint8Array | null;
--    createSecretStorageKey(): Uint8Array | null;
-+    getSecretStorageKey(): Uint8Array<ArrayBuffer> | null;
-+    createSecretStorageKey(): Uint8Array<ArrayBuffer> | null;
-     catchAccessSecretStorageError(e: Error): void;
-     setupEncryptionNeeded(args: CryptoSetupArgs): boolean;
--    getDehydrationKeyCallback(): ((keyInfo: SecretStorageKeyDescription, checkFunc: (key: Uint8Array) => void) => Promise<Uint8Array>) | null;
-+    getDehydrationKeyCallback(): ((keyInfo: SecretStorageKeyDescription, checkFunc: (key: Uint8Array<ArrayBuffer>) => void) => Promise<Uint8Array<ArrayBuffer>>) | null;
- }

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,13 +154,10 @@ 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 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/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();

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