Landmarks should have a unique role or role/label/title (i.e. accessible name) combination

Author: sc-ArshadHannan

src/app/(registry)/page.tsx

@@ -345,6 +345,7 @@ export default function Home() {
             alias:
           </p>
           <CodeBlock
+            ariaLabel="Test setup App.jsx example"
             code={`import { Button } from "@/components/ui/button"
 
 export default function MyComponent() {

src/app/(registry)/rtl/page.tsx

@@ -242,6 +242,7 @@ export default function RTLPage() {
           </p>
           <CodeBlock
             code={UseDirectionCode}
+            ariaLabel="useDirection hook code"
             lang="tsx"
             showLineNumbers={true}
             className="bg-body-bg border"
@@ -310,6 +311,7 @@ export default function RTLPage() {
             <div>
               <h3 className="font-semibold text-xl mb-2">Basic Usage</h3>
               <CodeBlock
+                ariaLabel="Basic RTL DirectionProvider example"
                 code={`import { Direction } from "radix-ui";
 
 export default function App() {
@@ -330,6 +332,7 @@ export default function App() {
                 Using the Hook in Components
               </h3>
               <CodeBlock
+                ariaLabel="Sidebar RTL useDirection example"
                 code={`import { Direction } from "radix-ui";
 import { cn } from "@/lib/utils";
 
@@ -361,6 +364,7 @@ export function Sidebar() {
                 Code blocks should always remain LTR for readability:
               </p>
               <CodeBlock
+                ariaLabel="Keep code blocks LTR example"
                 code={`export function CodeBlock({ code }: { code: string }) {
   return (
     <div dir="ltr">

src/components/code-block.tsx

@@ -162,7 +162,7 @@ export function CodeBlock({
   return (
     <div
       dir="ltr"
-      role="region"
+      role={ariaLabel ? "region" : undefined}
       aria-label={ariaLabel}
       className={cn(
         "relative rounded-md bg-muted max-h-[400px] overflow-auto",

src/components/docsite/component-card.tsx

@@ -11,7 +11,7 @@ const DemoWrapper = dynamic(() => import("@/components/demo-wrapper"), {
 
 export function ComponentCard({ component }: ComponentCardProps) {
   return (
-    <section>
+    <section aria-label="Component preview">
       <div id="starting-kit">
         <div className="w-full min-w-0 overflow-x-hidden">
           <DemoWrapper name={component.name} />

src/components/layout/topbar.tsx

@@ -522,7 +522,10 @@ export default function TopBar() {
 
           {/* Top navigation */}
           <nav aria-label="Top navigation">
-            <NavigationMenu className="hidden lg:flex">
+            <NavigationMenu
+              className="hidden lg:flex"
+              aria-label="Site navigation"
+            >
               <NavigationMenuList className="flex gap-3">
                 {navItems.map((item) => {
                   const normalizedPathname = pathname.replace(/\/$/, "") || "/";

src/components/ui/calendar.tsx

@@ -92,6 +92,7 @@ function Calendar({
       className={cn("p-3", className)}
       captionLayout={captionLayout}
       labels={{
+        labelNav: () => "Month navigation",
         ...labels,
         ...(monthDropdownAriaLabel != null && !labels?.labelMonthDropdown
           ? { labelMonthDropdown: () => monthDropdownAriaLabel }

src/components/ui/navigation-menu.tsx

@@ -18,6 +18,7 @@ function NavigationMenu({
     <NavigationMenuPrimitive.Root
       data-slot="navigation-menu"
       data-viewport={viewport}
+      aria-label="Navigation menu"
       className={cn(
         "group/navigation-menu relative flex max-w-max flex-1 items-center justify-center",
         className,

src/components/ui/stack-navigation.tsx

@@ -285,6 +285,7 @@ export function StackNavigation({
         )}
       >
         <nav
+          aria-label={isHorizontal ? "Sidebar navigation" : "Stack navigation"}
           className={cn(
             !isHorizontal && "flex flex-col gap-1",
             isHorizontal &&