Skip to content

fix(a11y): remove nested <main> landmarks under (home) layout#1237

Merged
MODSetter merged 1 commit intoMODSetter:devfrom
xr843:a11y/nested-main-landmark
Apr 16, 2026
Merged

fix(a11y): remove nested <main> landmarks under (home) layout#1237
MODSetter merged 1 commit intoMODSetter:devfrom
xr843:a11y/nested-main-landmark

Conversation

@xr843
Copy link
Copy Markdown
Contributor

@xr843 xr843 commented Apr 16, 2026

Closes #1191.

Summary

The (home)/layout.tsx already wraps every child page in <main>. Two pages also wrapped their own content in <main>, producing nested landmarks — invalid HTML that confuses screen readers / assistive tech.

Swapped the outermost wrapper from <main><div> in:

  • surfsense_web/app/(home)/page.tsx (homepage)
  • surfsense_web/app/(home)/free/page.tsx (free AI chat landing)

Pure structural tag change, no styling or behavior touched.

Other pages in (home) checked

Scanned all descendants of surfsense_web/app/(home)/ for <main>:

  • login/page.tsx — already <div>
  • register/page.tsx — already <div>
  • privacy/page.tsx, terms/page.tsx, changelog/page.tsx, announcements/page.tsx, blog/page.tsx, blog/[slug]/page.tsx, contact/page.tsx, free/[model_slug]/page.tsx — all already <div> or no top-level landmark

Only the 2 files above were still using <main>.

Test plan

  • grep -r '<main' surfsense_web/app/(home)/ returns zero matches post-edit
  • Visual appearance unchanged (wrapper is positional, no flex/block-context difference)
  • Verify in browser DevTools that rendered HTML has exactly one <main> (the one from layout.tsx)
  • Run Lighthouse a11y audit — "multiple <main> landmarks" warning should be gone

🤖 Generated with Claude Code

High-level PR Summary

This PR fixes an accessibility issue by removing nested <main> landmarks from two pages under the (home) layout. Since the layout already wraps all child pages in a <main> tag, the homepage and free AI chat landing page had redundant <main> elements that were replaced with <div> tags. This change eliminates invalid HTML structure that can confuse screen readers and assistive technologies, while maintaining all existing styling and behavior.

⏱️ Estimated Review Time: 5-15 minutes

💡 Review Order Suggestion
Order File Path
1 surfsense_web/app/(home)/page.tsx
2 surfsense_web/app/(home)/free/page.tsx

Need help? Join our Discord

Analyze latest changes

The (home)/layout.tsx already wraps children in <main>. Having another
<main> inside each child page produces nested landmarks, which is
invalid HTML and confuses screen readers.

Changed the outermost wrapper from <main> → <div> in:
- surfsense_web/app/(home)/page.tsx (homepage)
- surfsense_web/app/(home)/free/page.tsx (free AI chat landing)

Other (home) descendants (login/register/privacy/terms/changelog/
announcements/blog/contact/free/[model_slug]) were already using <div>.

Closes MODSetter#1191
@vercel
Copy link
Copy Markdown

vercel bot commented Apr 16, 2026

@xr843 is attempting to deploy a commit to the Rohan Verma's projects Team on Vercel.

A member of the Team first needs to authorize it.

Copy link
Copy Markdown

@recurseml recurseml bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Review by RecurseML

🔍 Review performed on 4e68565..3f85f2a

✨ No bugs found, your code is sparkling clean

✅ Files analyzed, no issues (2)

surfsense_web/app/(home)/free/page.tsx
surfsense_web/app/(home)/page.tsx

@MODSetter MODSetter merged commit 69ded37 into MODSetter:dev Apr 16, 2026
7 of 10 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants