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
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>:surfsense_web/app/(home)/page.tsx(line 46) renders as{children}inside the layout, and wraps its own content in another<main>:This results in nested
<main>tags in the rendered HTML.What to do
Change the
<main>inpage.tsx(line 46) to a<div>, since the layout already provides the<main>landmark:Also check other pages rendered inside this layout (
login,register) for the same pattern.Verify after changes:
<main>element<main>landmarks" warning should be goneAcceptance criteria
<main>element in the rendered homepage HTMLnext buildsucceeds