fix(a11y): add skip link, landmark labels, and sidebar navigation for screen readers

apps/v4/app/(app)/layout.tsx

@@ -1,14 +1,22 @@
 import { SiteFooter } from "@/components/site-footer"
 import { SiteHeader } from "@/components/site-header"
+import { SkipToContent } from "@/components/skip-to-content"
 
 export default function AppLayout({ children }: { children: React.ReactNode }) {
   return (
     <div
       data-slot="layout"
       className="group/layout relative z-10 flex min-h-svh flex-col bg-background has-data-[slot=designer]:h-svh has-data-[slot=designer]:overflow-hidden"
     >
+      <SkipToContent />
       <SiteHeader />
-      <main className="flex min-h-0 flex-1 flex-col">{children}</main>
+      <main
+        id="content"
+        tabIndex={-1}
+        className="flex min-h-0 flex-1 flex-col outline-none"
+      >
+        {children}
+      </main>
       <SiteFooter />
     </div>
   )

apps/v4/components/main-nav.tsx

@@ -17,7 +17,11 @@ export function MainNav({
   const pathname = usePathname()
 
   return (
-    <nav className={cn("items-center gap-0", className)} {...props}>
+    <nav
+      aria-label="Main"
+      className={cn("items-center gap-0", className)}
+      {...props}
+    >
       {items.map((item) => (
         <Button
           key={item.href}

apps/v4/components/site-footer.tsx

@@ -2,7 +2,10 @@ import { siteConfig } from "@/lib/config"
 
 export function SiteFooter() {
   return (
-    <footer className="group-has-[.docs-nav]/body:pb-20 group-has-[.section-soft]/body:bg-surface/40 group-has-[[data-slot=designer]]/body:hidden group-has-[[data-slot=docs]]/body:hidden group-has-[.docs-nav]/body:sm:pb-0 dark:bg-transparent dark:group-has-[.section-soft]/body:bg-surface/40 3xl:fixed:bg-transparent">
+    <footer
+      aria-label="Site footer"
+      className="group-has-[.docs-nav]/body:pb-20 group-has-[.section-soft]/body:bg-surface/40 group-has-[[data-slot=designer]]/body:hidden group-has-[[data-slot=docs]]/body:hidden group-has-[.docs-nav]/body:sm:pb-0 dark:bg-transparent dark:group-has-[.section-soft]/body:bg-surface/40 3xl:fixed:bg-transparent"
+    >
       <div className="container-wrapper px-4 xl:px-6">
         <div className="flex h-(--footer-height) items-center justify-between">
           <div className="w-full px-1 text-center text-xs leading-loose text-muted-foreground sm:text-sm">

apps/v4/components/site-header.tsx

@@ -23,7 +23,10 @@ export function SiteHeader() {
   const pageTree = source.pageTree
 
   return (
-    <header className="sticky top-0 z-50 w-full bg-background">
+    <header
+      aria-label="Site header"
+      className="sticky top-0 z-50 w-full bg-background"
+    >
       <div className="container-wrapper px-6 group-has-data-[slot=designer]/layout:max-w-none 3xl:fixed:px-0">
         <div className="flex h-(--header-height) items-center **:data-[slot=separator]:h-4! group-has-data-[slot=designer]/layout:fixed:max-w-none 3xl:fixed:container">
           <MobileNav

apps/v4/components/skip-to-content.tsx

@@ -0,0 +1,10 @@
+export function SkipToContent() {
+  return (
+    <a
+      href="#content"
+      className="sr-only focus:not-sr-only focus:fixed focus:top-4 focus:left-4 focus:z-[100] focus:rounded-md focus:bg-background focus:px-4 focus:py-2 focus:text-sm focus:font-medium focus:shadow-md focus:ring-2 focus:ring-ring"
+    >
+      Skip to content
+    </a>
+  )
+}

apps/v4/registry/new-york-v4/ui/sidebar.tsx

@@ -167,7 +167,8 @@ function Sidebar({
 
   if (collapsible === "none") {
     return (
-      <div
+      <nav
+        aria-label="Docs sidebar"
         data-slot="sidebar"
         className={cn(
           "flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground",
@@ -176,7 +177,7 @@ function Sidebar({
         {...props}
       >
         {children}
-      </div>
+      </nav>
     )
   }