Update strings for the verification dialog (#30880)

* Change 'Verify Session' to 'Start Verification' * Update strings for the verification dialog This completes the Element Web part of https://github.com/element-hq/element-meta/issues/2898 * fixup! Update strings for the verification dialog Remove separate _unsent string
2025-09-29 13:58:54 +01:00
parent dd8612d76b
commit 1415354f2a
11 changed files with 109 additions and 134 deletions
--- a/test/unit-tests/components/views/dialogs/VerificationRequestDialog-test.tsx
+++ b/test/unit-tests/components/views/dialogs/VerificationRequestDialog-test.tsx
@@ -35,8 +35,8 @@ describe("VerificationRequestDialog", () => {
    it("Initially, asks how you would like to verify this device", async () => {
        const dialog = renderComponent(VerificationPhase.Ready);

-        expect(screen.getByRole("heading", { name: "Verify other device" })).toBeInTheDocument();
-        expect(screen.getByText("Verify this device by completing one of the following:")).toBeInTheDocument();
+        expect(screen.getByRole("heading", { name: "Choose how to verify" })).toBeInTheDocument();
+        expect(screen.getByText("Verify by completing one of the following:")).toBeInTheDocument();

        expect(dialog.asFragment()).toMatchSnapshot();
    });
@@ -44,11 +44,8 @@ describe("VerificationRequestDialog", () => {
    it("After we started verification here, says we are waiting for the other device", async () => {
        const dialog = renderComponent(VerificationPhase.Requested);

-        expect(screen.getByRole("heading", { name: "Verify other device" })).toBeInTheDocument();
-
-        expect(
-            screen.getByText("To proceed, please accept the verification request on your other device."),
-        ).toBeInTheDocument();
+        expect(screen.getByRole("heading", { name: "Start verification on the other device" })).toBeInTheDocument();
+        expect(screen.getByText("Once accepted you'll be able to continue with the verification.")).toBeInTheDocument();

        expect(dialog.asFragment()).toMatchSnapshot();
    });
@@ -56,10 +53,10 @@ describe("VerificationRequestDialog", () => {
    it("When other device accepted emoji, displays emojis and asks for confirmation", async () => {
        const dialog = renderComponent(VerificationPhase.Started, "emoji");

-        expect(screen.getByRole("heading", { name: "Verify other device" })).toBeInTheDocument();
+        expect(screen.getByRole("heading", { name: "Compare emojis" })).toBeInTheDocument();

        expect(
-            screen.getByText("Confirm the emoji below are displayed on both devices, in the same order:"),
+            screen.getByText("Confirm that the emojis below match those shown on your other device."),
        ).toBeInTheDocument();

        expect(dialog.asFragment()).toMatchSnapshot();
@@ -68,10 +65,18 @@ describe("VerificationRequestDialog", () => {
    it("After scanning QR, shows confirmation dialog", async () => {
        const dialog = renderComponent(VerificationPhase.Started, "qr");

-        expect(screen.getByRole("heading", { name: "Verify other device" })).toBeInTheDocument();
-        expect(screen.getByRole("heading", { name: "Verify by scanning" })).toBeInTheDocument();
+        expect(
+            screen.getByRole("heading", {
+                name: "Confirm that you see a green shield on your other device",
+            }),
+        ).toBeInTheDocument();

-        expect(screen.getByText("Almost there! Is your other device showing the same shield?")).toBeInTheDocument();
+        // We used to have a subheading here: confirm it is not present.
+        expect(screen.queryByRole("heading", { name: "Verify by scanning" })).not.toBeInTheDocument();
+
+        expect(screen.getByText("Check again on your other device to finish verification.")).toBeInTheDocument();
+        expect(screen.getByRole("button", { name: "Yes, I see a green shield" })).toBeInTheDocument();
+        expect(screen.getByRole("button", { name: "No, I don't see a green shield" })).toBeInTheDocument();

        expect(dialog.asFragment()).toMatchSnapshot();
    });
@@ -79,8 +84,13 @@ describe("VerificationRequestDialog", () => {
    it("Shows a successful message if verification finished normally", async () => {
        const dialog = renderComponent(VerificationPhase.Done);

-        expect(screen.getByRole("heading", { name: "Verify other device" })).toBeInTheDocument();
-        expect(screen.getByText("You've successfully verified your device!")).toBeInTheDocument();
+        expect(screen.getByRole("heading", { name: "Device verified" })).toBeInTheDocument();
+
+        expect(
+            screen.getByText(
+                "Now you can read or send messages securely, and anyone you chat with can also trust this device.",
+            ),
+        ).toBeInTheDocument();

        expect(dialog.asFragment()).toMatchSnapshot();
    });
@@ -89,11 +99,13 @@ describe("VerificationRequestDialog", () => {
        const dialog = renderComponent(VerificationPhase.Cancelled);

        expect(screen.getByRole("heading", { name: "Verification failed" })).toBeInTheDocument();
-        expect(screen.getByRole("heading", { name: "Verification cancelled" })).toBeInTheDocument();
+
+        // We used to have a sub-heading here: confirm is it not present.
+        expect(screen.queryByRole("heading", { name: "Verification cancelled" })).not.toBeInTheDocument();

        expect(
            screen.getByText(
-                "You cancelled verification on your other device. Start verification again from the notification.",
+                "Either the request timed out, the request was denied, or there was a verification mismatch.",
            ),
        ).toBeInTheDocument();

@@ -119,11 +131,10 @@ describe("VerificationRequestDialog", () => {

        // Then it renders the resolved information
        expect(screen.getByRole("heading", { name: "Verification failed" })).toBeInTheDocument();
-        expect(screen.getByRole("heading", { name: "Verification cancelled" })).toBeInTheDocument();

        expect(
            screen.getByText(
-                "You cancelled verification on your other device. Start verification again from the notification.",
+                "Either the request timed out, the request was denied, or there was a verification mismatch.",
            ),
        ).toBeInTheDocument();
    });
@@ -149,11 +160,10 @@ describe("VerificationRequestDialog", () => {

        // Then it renders the information from the request in the promise
        expect(screen.getByRole("heading", { name: "Verification failed" })).toBeInTheDocument();
-        expect(screen.getByRole("heading", { name: "Verification cancelled" })).toBeInTheDocument();

        expect(
            screen.getByText(
-                "You cancelled verification on your other device. Start verification again from the notification.",
+                "Either the request timed out, the request was denied, or there was a verification mismatch.",
            ),
        ).toBeInTheDocument();
    });
@@ -170,11 +180,10 @@ describe("VerificationRequestDialog", () => {

        // Then the dialog is updated to reflect that
        expect(screen.getByRole("heading", { name: "Verification failed" })).toBeInTheDocument();
-        expect(screen.getByRole("heading", { name: "Verification cancelled" })).toBeInTheDocument();

        expect(
            screen.getByText(
-                "You cancelled verification on your other device. Start verification again from the notification.",
+                "Either the request timed out, the request was denied, or there was a verification mismatch.",
            ),
        ).toBeInTheDocument();
    });
@@ -327,7 +336,7 @@ class MockVerificationRequest
    }

    async generateQRCode(): Promise<Uint8ClampedArray | undefined> {
-        return undefined;
+        return new Uint8ClampedArray();
    }

    get cancellationCode(): string | null {
--- a/test/unit-tests/components/views/dialogs/snapshots/VerificationRequestDialog-test.tsx.snap
+++ b/test/unit-tests/components/views/dialogs/snapshots/VerificationRequestDialog-test.tsx.snap
@@ -22,17 +22,14 @@ exports[`VerificationRequestDialog After scanning QR, shows confirmation dialog
        class="mx_Heading_h3 mx_Dialog_title"
        id="mx_BaseDialog_title"
      >
-        Verify other device
+        Confirm that you see a green shield on your other device
      </h1>
    </div>
    <div
      class="mx_UserInfo_container mx_VerificationPanel_reciprocate_section"
    >
-      <h3>
-        Verify by scanning
-      </h3>
      <p>
-        Almost there! Is your other device showing the same shield?
+        Check again on your other device to finish verification.
      </p>
      <div
        class="mx_E2EIcon mx_E2EIcon_verified"
@@ -46,19 +43,19 @@ exports[`VerificationRequestDialog After scanning QR, shows confirmation dialog
      <div
        class="mx_VerificationPanel_reciprocateButtons"
      >
-        <div
-          class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_danger"
-          role="button"
-          tabindex="0"
-        >
-          No
-        </div>
        <div
          class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"
          role="button"
          tabindex="0"
        >
-          Yes
+          Yes, I see a green shield
+        </div>
+        <div
+          class="mx_AccessibleButton"
+          role="button"
+          tabindex="0"
+        >
+          No, I don't see a green shield
        </div>
      </div>
    </div>
@@ -99,11 +96,11 @@ exports[`VerificationRequestDialog After we started verification here, says we a
        class="mx_Heading_h3 mx_Dialog_title"
        id="mx_BaseDialog_title"
      >
-        Verify other device
+        Start verification on the other device
      </h1>
    </div>
    <div>
-      To proceed, please accept the verification request on your other device.
+      Once accepted you'll be able to continue with the verification.
    </div>
    <div
      aria-describedby="«r6»"
@@ -143,11 +140,11 @@ exports[`VerificationRequestDialog Initially, asks how you would like to verify
        class="mx_Heading_h3 mx_Dialog_title"
        id="mx_BaseDialog_title"
      >
-        Verify other device
+        Choose how to verify
      </h1>
    </div>
    <div>
-      Verify this device by completing one of the following:
+      Verify by completing one of the following:
      <div
        class="mx_VerificationPanel_QRPhase_startOptions"
      >
@@ -242,11 +239,8 @@ exports[`VerificationRequestDialog Shows a failure message if verification was c
    <div
      class="mx_UserInfo_container"
    >
-      <h3>
-        Verification cancelled
-      </h3>
      <p>
-        You cancelled verification on your other device. Start verification again from the notification.
+        Either the request timed out, the request was denied, or there was a verification mismatch.
      </p>
      <div
        class="mx_AccessibleButton mx_UserInfo_wideButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary"
@@ -293,14 +287,14 @@ exports[`VerificationRequestDialog Shows a successful message if verification fi
        class="mx_Heading_h3 mx_Dialog_title"
        id="mx_BaseDialog_title"
      >
-        Verify other device
+        Device verified
      </h1>
    </div>
    <div
      class="mx_UserInfo_container mx_VerificationPanel_verified_section"
    >
      <p>
-        You've successfully verified your device!
+        Now you can read or send messages securely, and anyone you chat with can also trust this device.
      </p>
      <div
        class="mx_E2EIcon mx_E2EIcon_verified"
@@ -356,7 +350,7 @@ exports[`VerificationRequestDialog When other device accepted emoji, displays em
        class="mx_Heading_h3 mx_Dialog_title"
        id="mx_BaseDialog_title"
      >
-        Verify other device
+        Compare emojis
      </h1>
    </div>
    <div
@@ -366,7 +360,7 @@ exports[`VerificationRequestDialog When other device accepted emoji, displays em
        class="mx_VerificationShowSas"
      >
        <p>
-          Confirm the emoji below are displayed on both devices, in the same order:
+          Confirm that the emojis below match those shown on your other device.
        </p>
        <div
          class="mx_VerificationShowSas_emojiSas"
--- a/test/unit-tests/components/views/toasts/snapshots/VerificationRequestToast-test.tsx.snap
+++ b/test/unit-tests/components/views/toasts/snapshots/VerificationRequestToast-test.tsx.snap
@@ -28,7 +28,7 @@ exports[`VerificationRequestToast should render a cross-user verification 1`] =
        role="button"
        tabindex="0"
      >
-        Verify Session
+        Start Verification
      </button>
    </div>
  </div>
@@ -68,7 +68,7 @@ exports[`VerificationRequestToast should render a self-verification 1`] = `
        role="button"
        tabindex="0"
      >
-        Verify Session
+        Start Verification
      </button>
    </div>
  </div>