From 96960499ef197ae1ddf70b08994d4d94f24027ef Mon Sep 17 00:00:00 2001
From: yyh <92089059+lyzno1@users.noreply.github.com>
Date: Mon, 10 Aug 2026 10:26:10 +0800
Subject: [PATCH] fix(web): use primary headings on auth pages (#40192)

---
 .../(shareLayout)/webapp-signin/check-code/page.tsx   |  4 ++--
 web/app/(shareLayout)/webapp-signin/normalForm.tsx    |  4 ++--
 web/app/signin/__tests__/normal-form.spec.tsx         | 11 +++++++++++
 web/app/signin/__tests__/one-more-step.spec.tsx       | 11 +++++++++++
 web/app/signin/check-code/__tests__/page.spec.tsx     | 11 +++++++++++
 web/app/signin/check-code/page.tsx                    |  4 ++--
 .../signin/invite-settings/__tests__/page.spec.tsx    |  6 ++++++
 web/app/signin/invite-settings/page.tsx               |  8 ++++----
 web/app/signin/normal-form.tsx                        |  8 ++++----
 web/app/signin/one-more-step.tsx                      |  4 ++--
 web/app/signup/check-code/page.tsx                    |  4 ++--
 web/app/signup/page.tsx                               |  4 ++--
 web/app/signup/set-password/__tests__/page.spec.tsx   |  6 ++++++
 web/app/signup/set-password/page.tsx                  |  4 ++--
 14 files changed, 67 insertions(+), 22 deletions(-)

diff --git a/web/app/(shareLayout)/webapp-signin/check-code/page.tsx b/web/app/(shareLayout)/webapp-signin/check-code/page.tsx
index 28518e998cc..f0d9e122856 100644
--- a/web/app/(shareLayout)/webapp-signin/check-code/page.tsx
+++ b/web/app/(shareLayout)/webapp-signin/check-code/page.tsx
@@ -110,9 +110,9 @@ export default function CheckCode() {
         <RiMailSendFill className="size-6 text-2xl text-text-accent-light-mode-only" />
       </div>
       <div className="pt-2 pb-4">
-        <h2 className="title-4xl-semi-bold text-text-primary">
+        <h1 className="title-4xl-semi-bold text-text-primary">
           {t(($) => $['checkCode.checkYourEmail'], { ns: 'login' })}
-        </h2>
+        </h1>
         <p className="mt-2 body-md-regular text-text-secondary">
           <span>
             {t(($) => $['checkCode.tipsPrefix'], { ns: 'login' })}
diff --git a/web/app/(shareLayout)/webapp-signin/normalForm.tsx b/web/app/(shareLayout)/webapp-signin/normalForm.tsx
index 8e4f085670c..542b85492ac 100644
--- a/web/app/(shareLayout)/webapp-signin/normalForm.tsx
+++ b/web/app/(shareLayout)/webapp-signin/normalForm.tsx
@@ -124,11 +124,11 @@ const NormalForm = () => {
     <>
       <div className="mx-auto mt-8 w-full">
         <div className="mx-auto w-full">
-          <h2 className="title-4xl-semi-bold text-text-primary">
+          <h1 className="title-4xl-semi-bold text-text-primary">
             {systemFeatures.branding.enabled
               ? t(($) => $.pageTitleForE, { ns: 'login' })
               : t(($) => $.pageTitle, { ns: 'login' })}
-          </h2>
+          </h1>
           <p className="mt-2 body-md-regular text-text-tertiary">
             {t(($) => $.welcome, { ns: 'login' })}
           </p>
diff --git a/web/app/signin/__tests__/normal-form.spec.tsx b/web/app/signin/__tests__/normal-form.spec.tsx
index 7272be8617b..1abd1e59daf 100644
--- a/web/app/signin/__tests__/normal-form.spec.tsx
+++ b/web/app/signin/__tests__/normal-form.spec.tsx
@@ -87,6 +87,17 @@ describe('NormalForm', () => {
     mockUseSearchParams.mockReturnValue(new URLSearchParams())
   })
 
+  it('exposes the page title as the main heading', () => {
+    mockQueryResults(
+      nonInviteQueryResult as unknown as ReturnType<typeof useQuery>,
+      nonInviteQueryResult as unknown as ReturnType<typeof useQuery>,
+    )
+
+    render(<NormalForm />)
+
+    expect(screen.getByRole('heading', { level: 1 })).toBeInTheDocument()
+  })
+
   describe('Default Redirects', () => {
     it('should send logged-in visitors without a redirect target to the console home', async () => {
       const searchParams = new URLSearchParams()
diff --git a/web/app/signin/__tests__/one-more-step.spec.tsx b/web/app/signin/__tests__/one-more-step.spec.tsx
index de0eec84078..129a707d604 100644
--- a/web/app/signin/__tests__/one-more-step.spec.tsx
+++ b/web/app/signin/__tests__/one-more-step.spec.tsx
@@ -41,6 +41,17 @@ describe('OneMoreStep', () => {
     mockSubmitOneMoreStep.mockResolvedValue({ result: 'success' })
   })
 
+  it('exposes the page title as the main heading', () => {
+    const queryClient = new QueryClient()
+    render(
+      <QueryClientProvider client={queryClient}>
+        <OneMoreStep />
+      </QueryClientProvider>,
+    )
+
+    expect(screen.getByRole('heading', { level: 1 })).toBeInTheDocument()
+  })
+
   // Successful account initialization returns users to their original console destination.
   describe('Post-registration redirect', () => {
     it('should return to the requested console page when account initialization succeeds', async () => {
diff --git a/web/app/signin/check-code/__tests__/page.spec.tsx b/web/app/signin/check-code/__tests__/page.spec.tsx
index b8c4f7f5fa1..45ef48a8ad5 100644
--- a/web/app/signin/check-code/__tests__/page.spec.tsx
+++ b/web/app/signin/check-code/__tests__/page.spec.tsx
@@ -87,6 +87,17 @@ describe('CheckCode', () => {
     vi.unstubAllGlobals()
   })
 
+  it('exposes the page title as the main heading', () => {
+    const queryClient = createQueryClient()
+    render(
+      <QueryClientProvider client={queryClient}>
+        <CheckCode />
+      </QueryClientProvider>,
+    )
+
+    expect(screen.getByRole('heading', { level: 1 })).toBeInTheDocument()
+  })
+
   describe('Post-login profile bootstrap', () => {
     it('should resolve an inactive profile query before navigating to the console home', async () => {
       const user = userEvent.setup()
diff --git a/web/app/signin/check-code/page.tsx b/web/app/signin/check-code/page.tsx
index 422bdb175a8..09a548e42a6 100644
--- a/web/app/signin/check-code/page.tsx
+++ b/web/app/signin/check-code/page.tsx
@@ -102,9 +102,9 @@ export default function CheckCode() {
         <RiMailSendFill className="size-6 text-2xl text-text-accent-light-mode-only" />
       </div>
       <div className="pt-2 pb-4">
-        <h2 className="title-4xl-semi-bold text-text-primary">
+        <h1 className="title-4xl-semi-bold text-text-primary">
           {t(($) => $['checkCode.checkYourEmail'], { ns: 'login' })}
-        </h2>
+        </h1>
         <p className="mt-2 body-md-regular text-text-secondary">
           <span>
             {t(($) => $['checkCode.tipsPrefix'], { ns: 'login' })}
diff --git a/web/app/signin/invite-settings/__tests__/page.spec.tsx b/web/app/signin/invite-settings/__tests__/page.spec.tsx
index 907f95893a5..1fca054409b 100644
--- a/web/app/signin/invite-settings/__tests__/page.spec.tsx
+++ b/web/app/signin/invite-settings/__tests__/page.spec.tsx
@@ -113,6 +113,12 @@ describe('InviteSettingsPage', () => {
     mockActivateMember.mockResolvedValue({ result: 'success' })
   })
 
+  it('exposes the page title as the main heading', () => {
+    render(<InviteSettingsPage />)
+
+    expect(screen.getByRole('heading', { level: 1 })).toBeInTheDocument()
+  })
+
   describe('Activation payload', () => {
     it('should default language to the current UI locale', async () => {
       render(<InviteSettingsPage />)
diff --git a/web/app/signin/invite-settings/page.tsx b/web/app/signin/invite-settings/page.tsx
index 1ad3e50b85e..45fa9d5f388 100644
--- a/web/app/signin/invite-settings/page.tsx
+++ b/web/app/signin/invite-settings/page.tsx
@@ -176,9 +176,9 @@ export default function InviteSettingsPage() {
           <div className="mb-3 flex size-14 items-center justify-center rounded-2xl border border-components-panel-border-subtle text-2xl font-bold shadow-lg">
             🤷‍♂️
           </div>
-          <h2 className="title-4xl-semi-bold text-text-primary">
+          <h1 className="title-4xl-semi-bold text-text-primary">
             {t(($) => $.invalid, { ns: 'login' })}
-          </h2>
+          </h1>
         </div>
         <div className="mx-auto mt-6 w-full">
           <Button variant="primary" className="w-full text-sm!">
@@ -195,11 +195,11 @@ export default function InviteSettingsPage() {
         <RiAccountCircleLine className="size-6 text-2xl text-text-accent-light-mode-only" />
       </div>
       <div className="pt-2 pb-4">
-        <h2 className="title-4xl-semi-bold text-text-primary">
+        <h1 className="title-4xl-semi-bold text-text-primary">
           {requiresAccountSetup
             ? t(($) => $.setYourAccount, { ns: 'login' })
             : `${t(($) => $.join, { ns: 'login' })}${checkRes?.data?.workspace_name}`}
-        </h2>
+        </h1>
       </div>
       <form onSubmit={noop}>
         {requiresAccountSetup && (
diff --git a/web/app/signin/normal-form.tsx b/web/app/signin/normal-form.tsx
index 9bc55d0121c..1a013c3e9ac 100644
--- a/web/app/signin/normal-form.tsx
+++ b/web/app/signin/normal-form.tsx
@@ -186,10 +186,10 @@ function NormalForm() {
       <div className="mx-auto mt-8 w-full">
         {isInviteLink ? (
           <div className="mx-auto w-full">
-            <h2 className="title-4xl-semi-bold text-text-primary">
+            <h1 className="title-4xl-semi-bold text-text-primary">
               {t(($) => $.join, { ns: 'login' })}
               {workspaceName}
-            </h2>
+            </h1>
             {!systemFeatures.branding.enabled && (
               <p className="mt-2 body-md-regular text-text-tertiary">
                 {t(($) => $.joinTipStart, { ns: 'login' })}
@@ -200,11 +200,11 @@ function NormalForm() {
           </div>
         ) : (
           <div className="mx-auto w-full">
-            <h2 className="title-4xl-semi-bold text-text-primary">
+            <h1 className="title-4xl-semi-bold text-text-primary">
               {systemFeatures.branding.enabled
                 ? t(($) => $.pageTitleForE, { ns: 'login' })
                 : t(($) => $.pageTitle, { ns: 'login' })}
-            </h2>
+            </h1>
             <p className="mt-2 body-md-regular text-text-tertiary">
               {t(($) => $.welcome, { ns: 'login' })}
             </p>
diff --git a/web/app/signin/one-more-step.tsx b/web/app/signin/one-more-step.tsx
index c97dc5e4256..325c0727e93 100644
--- a/web/app/signin/one-more-step.tsx
+++ b/web/app/signin/one-more-step.tsx
@@ -122,9 +122,9 @@ const OneMoreStep = () => {
   return (
     <>
       <div className="mx-auto w-full">
-        <h2 className="title-4xl-semi-bold text-text-secondary">
+        <h1 className="title-4xl-semi-bold text-text-secondary">
           {t(($) => $.oneMoreStep, { ns: 'login' })}
-        </h2>
+        </h1>
         <p className="mt-1 body-md-regular text-text-tertiary">
           {t(($) => $.createSample, { ns: 'login' })}
         </p>
diff --git a/web/app/signup/check-code/page.tsx b/web/app/signup/check-code/page.tsx
index 0cf12c91899..d5ec8a3808f 100644
--- a/web/app/signup/check-code/page.tsx
+++ b/web/app/signup/check-code/page.tsx
@@ -70,9 +70,9 @@ export default function CheckCode() {
         <RiMailSendFill className="size-6 text-2xl text-text-accent-light-mode-only" />
       </div>
       <div className="pt-2 pb-4">
-        <h2 className="title-4xl-semi-bold text-text-primary">
+        <h1 className="title-4xl-semi-bold text-text-primary">
           {t(($) => $['checkCode.checkYourEmail'], { ns: 'login' })}
-        </h2>
+        </h1>
         <p className="mt-2 body-md-regular text-text-secondary">
           <span>
             {t(($) => $['checkCode.tipsPrefix'], { ns: 'login' })}
diff --git a/web/app/signup/page.tsx b/web/app/signup/page.tsx
index c30c6654005..ac476935535 100644
--- a/web/app/signup/page.tsx
+++ b/web/app/signup/page.tsx
@@ -22,9 +22,9 @@ const Signup = () => {
   return (
     <div className="mx-auto mt-8 w-full">
       <div className="mx-auto mb-10 w-full">
-        <h2 className="title-4xl-semi-bold text-text-primary">
+        <h1 className="title-4xl-semi-bold text-text-primary">
           {t(($) => $['signup.createAccount'], { ns: 'login' })}
-        </h2>
+        </h1>
         <p className="mt-2 body-md-regular text-text-tertiary">
           {t(($) => $['signup.welcome'], { ns: 'login' })}
         </p>
diff --git a/web/app/signup/set-password/__tests__/page.spec.tsx b/web/app/signup/set-password/__tests__/page.spec.tsx
index 35821b51281..568290c3085 100644
--- a/web/app/signup/set-password/__tests__/page.spec.tsx
+++ b/web/app/signup/set-password/__tests__/page.spec.tsx
@@ -90,6 +90,12 @@ describe('Signup Set Password Page', () => {
     mockRegister.mockResolvedValue({ result: 'fail', data: {} })
   })
 
+  it('exposes the page title as the main heading', () => {
+    renderWithQueryClient(<ChangePasswordForm />)
+
+    expect(screen.getByRole('heading', { level: 1 })).toBeInTheDocument()
+  })
+
   describe('Registration payload', () => {
     it('should submit locale and browser timezone when setting password', async () => {
       renderWithQueryClient(<ChangePasswordForm />)
diff --git a/web/app/signup/set-password/page.tsx b/web/app/signup/set-password/page.tsx
index 485b46cb2c9..d3a72917e64 100644
--- a/web/app/signup/set-password/page.tsx
+++ b/web/app/signup/set-password/page.tsx
@@ -115,9 +115,9 @@ const ChangePasswordForm = () => {
     >
       <div className="flex flex-col md:w-100">
         <div className="mx-auto w-full">
-          <h2 className="title-4xl-semi-bold text-text-primary">
+          <h1 className="title-4xl-semi-bold text-text-primary">
             {t(($) => $.changePassword, { ns: 'login' })}
-          </h2>
+          </h1>
           <p className="mt-2 body-md-regular text-text-secondary">
             {t(($) => $.changePasswordTip, { ns: 'login' })}
           </p>