fix(web): use primary headings on auth pages (#40192)

2026-09-03 23:47:16 +08:00 · 2026-08-10 10:26:10 +08:00 · 2026-08-10 10:26:10 +08:00 · 96960499ef
commit 96960499ef
parent c2687c16b3
14 changed files with 67 additions and 22 deletions
--- 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' })}
--- 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>
--- 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()
--- 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 () => {
--- 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()
--- 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' })}
--- 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 />)
--- 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 && (
--- 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>
--- 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>
--- 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' })}
--- 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>
--- 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 />)
--- 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>