From a2875e8c106f7b8e8c7fd57ec59b43cd295d20f7 Mon Sep 17 00:00:00 2001
From: Marc LeBlanc <7050295+marcleblanc2@users.noreply.github.com>
Date: Thu, 17 Sep 2026 02:50:39 -0600
Subject: [PATCH] a11y: Add main and region landmarks

axe-core flags every page with landmark-one-main and region
violations (moderate): there is no <main>, so page content sits
outside any landmark and screen reader users cannot jump to it.

Make the page content container a <main> on the home, docs and 404
pages, and make the home page hero a <section> labelled by its
heading. Both keep their classes, so the layout does not change.

Amp-Thread-ID: https://ampcode.com/threads/T-01a0ae7e-ae2c-7423-be36-eb9c5884b1e0
Co-authored-by: Amp <amp@ampcode.com>
---
 src/app/[...slug]/page.tsx | 4 ++--
 src/app/not-found.tsx      | 4 ++--
 src/app/page.tsx           | 4 ++--
 src/components/Hero.tsx    | 8 ++++++--
 4 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/app/[...slug]/page.tsx b/src/app/[...slug]/page.tsx
index 9b5f38d8a..01681c596 100644
--- a/src/app/[...slug]/page.tsx
+++ b/src/app/[...slug]/page.tsx
@@ -58,7 +58,7 @@ const PostLayout = async ({params}: Props) => {
 
 	const content = (
 		<>
-			<div className="min-w-0 max-w-2xl flex-auto px-4 py-16 lg:max-w-none lg:pl-8 lg:pr-0 xl:px-16">
+			<main className="min-w-0 max-w-2xl flex-auto px-4 py-16 lg:max-w-none lg:pl-8 lg:pr-0 xl:px-16">
 				<Breadcrumbs path={slug} />
 				<article>
 					<Prose>
@@ -66,7 +66,7 @@ const PostLayout = async ({params}: Props) => {
 					</Prose>
 				</article>
 				<PrevNextLinks />
-			</div>
+			</main>
 			<TableOfContents
 				headings={post.headings}
 				rawMarkdown={post.body.raw}
diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
index 6765f1152..979a7bcaa 100644
--- a/src/app/not-found.tsx
+++ b/src/app/not-found.tsx
@@ -6,7 +6,7 @@ const pagePaths = allPosts.filter(post => !post.preview).map(post => post.url);
 
 export default function NotFound() {
 	return (
-		<div className="min-w-0 max-w-2xl flex-auto px-4 py-16 lg:max-w-none lg:pl-8 lg:pr-0 xl:px-16">
+		<main className="min-w-0 max-w-2xl flex-auto px-4 py-16 lg:max-w-none lg:pl-8 lg:pr-0 xl:px-16">
 			<div className="flex h-full flex-col items-center justify-center text-center">
 				<p className="font-display text-sm font-medium text-slate-900 dark:text-white">
 					404
@@ -19,6 +19,6 @@ export default function NotFound() {
 				</p>
 				<NotFoundLinks pagePaths={pagePaths} />
 			</div>
-		</div>
+		</main>
 	);
 }
diff --git a/src/app/page.tsx b/src/app/page.tsx
index ab6f7e380..01a78b0fe 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -24,13 +24,13 @@ const PostLayout = () => {
 
 	return (
 		<>
-			<div className="min-w-0 max-w-2xl flex-auto px-4 py-16 lg:max-w-none lg:pl-8 lg:pr-0 xl:px-16">
+			<main className="min-w-0 max-w-2xl flex-auto px-4 py-16 lg:max-w-none lg:pl-8 lg:pr-0 xl:px-16">
 				<article>
 					<Prose suppressHydrationWarning>
 						<Content components={MdxComponents()} />
 					</Prose>
 				</article>
-			</div>
+			</main>
 		</>
 	);
 };
diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx
index 8da0f8072..863981f70 100644
--- a/src/components/Hero.tsx
+++ b/src/components/Hero.tsx
@@ -15,12 +15,16 @@ function TrafficLightsIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
 
 export function Hero() {
 	return (
-		<div className="overflow-hidden dark:-mb-32 dark:mt-[-4.75rem] dark:bg-dark-bg dark:pb-32 dark:pt-[4.75rem]">
+		<section
+			aria-labelledby="hero-title"
+			className="overflow-hidden dark:-mb-32 dark:mt-[-4.75rem] dark:bg-dark-bg dark:pb-32 dark:pt-[4.75rem]"
+		>
 			<div className="py-16 sm:px-2 lg:relative lg:px-0 lg:py-20">
 				<div className="mx-auto grid max-w-2xl grid-cols-1 items-center gap-x-8 gap-y-16 px-4 lg:max-w-8xl lg:grid-cols-2 lg:px-8 xl:gap-x-16 xl:px-12">
 					<div className="relative z-10 md:text-center lg:text-left">
 						<div className="relative">
 							<h1
+								id="hero-title"
 								className={clsx(
 									'inline bg-clip-text font-display text-4xl tracking-tight text-black sm:text-5xl dark:text-transparent dark:text-white'
 								)}
@@ -48,6 +52,6 @@ export function Hero() {
 					</div>
 				</div>
 			</div>
-		</div>
+		</section>
 	);
 }