Skip to content

Fix nested <main> landmarks in homepage layout and page #1191

@MODSetter

Description

@MODSetter

Description

The homepage has two nested <main> elements, which is invalid HTML and confuses assistive technology (screen readers).

surfsense_web/app/(home)/layout.tsx (line 12) wraps the entire homepage shell in <main>:

return (
    <main className="min-h-screen bg-linear-to-b from-gray-50 to-gray-100 text-gray-900 dark:from-black dark:to-gray-900 dark:text-white overflow-x-hidden">
        <Navbar />
        {children}
        {!isAuthPage && <FooterNew />}
    </main>
);

surfsense_web/app/(home)/page.tsx (line 46) renders as {children} inside the layout, and wraps its own content in another <main>:

return (
    <main className="min-h-screen bg-gradient-to-b from-gray-50 to-gray-100 text-gray-900 dark:from-black dark:to-gray-900 dark:text-white">
        <HeroSection />
        <WhySurfSense />
        ...
    </main>
);

This results in nested <main> tags in the rendered HTML.

What to do

Change the <main> in page.tsx (line 46) to a <div>, since the layout already provides the <main> landmark:

// In surfsense_web/app/(home)/page.tsx
return (
    <div className="min-h-screen bg-gradient-to-b from-gray-50 to-gray-100 text-gray-900 dark:from-black dark:to-gray-900 dark:text-white">
        <HeroSection />
        <WhySurfSense />
        ...
    </div>
);

Also check other pages rendered inside this layout (login, register) for the same pattern.

Verify after changes:

  • View the homepage in browser, inspect the DOM — there should be exactly ONE <main> element
  • The styling/appearance should be unchanged
  • Run an accessibility checker (e.g. Lighthouse) — the "multiple <main> landmarks" warning should be gone

Acceptance criteria

  • Only one <main> element in the rendered homepage HTML
  • Visual appearance is unchanged
  • next build succeeds

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions