From db2eeb4965e043b485e3561ec443c8430b723e36 Mon Sep 17 00:00:00 2001
From: Khairul <khaixd756@gmail.com>
Date: Wed, 19 Aug 2026 11:37:35 +0800
Subject: [PATCH 1/2] a11y: skip-to-main link and main landmark (#34)

Mirror Create-Python-App layout: first focusable skip link targets
#main-content wrapped around page children.
---
 src/components/layout-shell.tsx | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/components/layout-shell.tsx b/src/components/layout-shell.tsx
index ae693c2..7e1ede0 100644
--- a/src/components/layout-shell.tsx
+++ b/src/components/layout-shell.tsx
@@ -14,9 +14,17 @@ export function LayoutShell({ children }: { children: ReactNode }) {
     <PerformanceProvider>
       <ThemeProvider defaultTheme="dark">
         <div className="flex min-h-screen flex-col">
+          <a
+            href="#main-content"
+            className="sr-only focus:not-sr-only focus:fixed focus:left-4 focus:top-4 focus:z-[100] focus:rounded-md focus:bg-primary focus:px-3 focus:py-2 focus:text-sm focus:font-medium focus:text-primary-foreground"
+          >
+            Skip to main content
+          </a>
           <SiteHeader onOpenCommand={() => setOpen(true)} />
           <CommandMenu open={open} onOpenChange={setOpen} />
-          {children}
+          <main id="main-content" className="flex-1" tabIndex={-1}>
+            {children}
+          </main>
           <footer className="w-full border-t mt-16">
             {/* Stats row */}
             <div className="border-b border-border/50">

From e74c9255903689a892f7d65462f944d2669189ad Mon Sep 17 00:00:00 2001
From: Khairul <khaixd756@gmail.com>
Date: Mon, 24 Aug 2026 09:15:24 +0800
Subject: [PATCH 2/2] a11y: single main landmark in LayoutShell (#34)

Keep skip link + <main id="main-content"> in the shell; replace
page-level <main> wrappers with <div> so routes no longer nest landmarks.
---
 src/app/docs/agents-md/page.tsx                              | 4 ++--
 src/app/docs/layout.tsx                                      | 4 ++--
 src/app/extensions/ExtensionsPageClient.tsx                  | 4 ++--
 src/app/extensions/[slug]/page.tsx                           | 4 ++--
 src/app/page.tsx                                             | 4 ++--
 src/app/templates/TemplatesPageClient.tsx                    | 4 ++--
 src/app/templates/[slug]/extensions/[extensionSlug]/page.tsx | 4 ++--
 src/app/templates/[slug]/page.tsx                            | 4 ++--
 8 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/src/app/docs/agents-md/page.tsx b/src/app/docs/agents-md/page.tsx
index 415cd4c..50da456 100644
--- a/src/app/docs/agents-md/page.tsx
+++ b/src/app/docs/agents-md/page.tsx
@@ -13,7 +13,7 @@ export const metadata = {
 export default function AgentsMdPage() {
   return (
     <div className="flex min-h-screen flex-col">
-      <main className="flex-1">
+      <div className="flex-1">
         <section className="w-full py-12 md:py-24 lg:py-32 bg-gradient-to-b from-background to-background/80 relative overflow-hidden">
           <div className="absolute inset-0 z-0 opacity-50">
             <AnimatedGradient />
@@ -201,7 +201,7 @@ Humans: stop reading—go to CONTRIBUTING.md + docs/.
             </div>
           </div>
         </section>
-      </main>
+      </div>
     </div>
   );
 }
diff --git a/src/app/docs/layout.tsx b/src/app/docs/layout.tsx
index 13bb28f..eca00ca 100644
--- a/src/app/docs/layout.tsx
+++ b/src/app/docs/layout.tsx
@@ -7,12 +7,12 @@ export default function DocsLayout({ children }: { children: ReactNode }) {
   return (
     <div className="flex flex-1 min-h-0">
       <DocsSidebar />
-      <main className="flex-1 min-w-0 overflow-auto">
+      <div className="flex-1 min-w-0 overflow-auto">
         <div className="container pt-6 pb-0">
           <DocsBreadcrumb />
         </div>
         {children}
-      </main>
+      </div>
     </div>
   );
 }
diff --git a/src/app/extensions/ExtensionsPageClient.tsx b/src/app/extensions/ExtensionsPageClient.tsx
index daeaaa2..0fdc746 100644
--- a/src/app/extensions/ExtensionsPageClient.tsx
+++ b/src/app/extensions/ExtensionsPageClient.tsx
@@ -80,7 +80,7 @@ export function ExtensionsPageClient() {
 
   return (
     <div className="flex min-h-screen flex-col">
-      <main className="flex-1">
+      <div className="flex-1">
         <div className="w-full bg-gradient-to-r from-violet-600 via-violet-500 to-cyan-500 text-white py-3 relative">
           <div className="absolute inset-0 overflow-hidden pointer-events-none" aria-hidden>
             <div className="absolute inset-0 bg-[url('/grid.svg')] bg-center [mask-image:linear-gradient(180deg,white,rgba(255,255,255,0))] animate-pulse" />
@@ -209,7 +209,7 @@ export function ExtensionsPageClient() {
             </div>
           </div>
         </section>
-      </main>
+      </div>
     </div>
   );
 }
diff --git a/src/app/extensions/[slug]/page.tsx b/src/app/extensions/[slug]/page.tsx
index 88bd7d0..e45a387 100644
--- a/src/app/extensions/[slug]/page.tsx
+++ b/src/app/extensions/[slug]/page.tsx
@@ -54,7 +54,7 @@ export default async function ExtensionPage({ params }: ExtensionPageProps) {
   const softwareJsonLd = extensionSoftwareJsonLd(extension);
   return (
     <div className="flex min-h-screen flex-col">
-      <main className="flex-1">
+      <div className="flex-1">
         <script
           type="application/ld+json"
           // biome-ignore lint/security/noDangerouslySetInnerHtml: data controlado
@@ -66,7 +66,7 @@ export default async function ExtensionPage({ params }: ExtensionPageProps) {
           dangerouslySetInnerHTML={{ __html: jsonLdScript(softwareJsonLd) }}
         />
         <ExtensionDetailsClient extension={extension} compatibleTemplates={compatibleTemplates} />
-      </main>
+      </div>
     </div>
   );
 }
diff --git a/src/app/page.tsx b/src/app/page.tsx
index b2834ab..897d6d6 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -32,7 +32,7 @@ export default async function Home() {
 
   return (
     <div className="flex min-h-screen flex-col">
-      <main className="flex-1">
+      <div className="flex-1">
         <AnnouncementBanner
           icon={<CommunityLogo size={20} className="shrink-0 rounded" />}
           label="NEW"
@@ -247,7 +247,7 @@ export default async function Home() {
             </div>
           </div>
         </section>
-      </main>
+      </div>
     </div>
   );
 }
diff --git a/src/app/templates/TemplatesPageClient.tsx b/src/app/templates/TemplatesPageClient.tsx
index a192ace..26ddb8a 100644
--- a/src/app/templates/TemplatesPageClient.tsx
+++ b/src/app/templates/TemplatesPageClient.tsx
@@ -83,7 +83,7 @@ export function TemplatesPageClient() {
 
   return (
     <div className="flex min-h-screen flex-col">
-      <main className="flex-1">
+      <div className="flex-1">
         <AnnouncementBanner
           message={
             <>
@@ -197,7 +197,7 @@ export function TemplatesPageClient() {
             </div>
           </div>
         </section>
-      </main>
+      </div>
     </div>
   );
 }
diff --git a/src/app/templates/[slug]/extensions/[extensionSlug]/page.tsx b/src/app/templates/[slug]/extensions/[extensionSlug]/page.tsx
index 76a291e..4cb5cf2 100644
--- a/src/app/templates/[slug]/extensions/[extensionSlug]/page.tsx
+++ b/src/app/templates/[slug]/extensions/[extensionSlug]/page.tsx
@@ -73,7 +73,7 @@ export default function TemplateExtensionPage({
 
   return (
     <div className="flex min-h-screen flex-col">
-      <main className="flex-1">
+      <div className="flex-1">
         <section className="w-full py-12 md:py-24 lg:py-32 bg-gradient-to-b from-background to-background/80 relative overflow-hidden">
           <div className="absolute inset-0 z-0 opacity-50">
             <AnimatedGradient />
@@ -416,7 +416,7 @@ export default function TemplateExtensionPage({
             </div>
           </div>
         </section>
-      </main>
+      </div>
     </div>
   );
 }
diff --git a/src/app/templates/[slug]/page.tsx b/src/app/templates/[slug]/page.tsx
index 82ff158..21ad4a0 100644
--- a/src/app/templates/[slug]/page.tsx
+++ b/src/app/templates/[slug]/page.tsx
@@ -69,7 +69,7 @@ export default async function TemplatePage({ params }: TemplatePageProps) {
 
   return (
     <div className="flex min-h-screen flex-col">
-      <main className="flex-1">
+      <div className="flex-1">
         <script
           type="application/ld+json"
           // biome-ignore lint/security/noDangerouslySetInnerHtml: data controlado
@@ -81,7 +81,7 @@ export default async function TemplatePage({ params }: TemplatePageProps) {
           dangerouslySetInnerHTML={{ __html: jsonLdScript(softwareJsonLd) }}
         />
         <TemplateDetailsClient template={template} compatibleExtensions={compatibleExtensions} />
-      </main>
+      </div>
     </div>
   );
 }