Landmarks

1/** @jsxImportSource hono/jsx */
2import type { PropsWithChildren, Child } from "hono/jsx"
3import { cn, type ClassValue } from "@/registry/lib/cn"
4 
5// Landmarks — shadcn-htmx, htmx v4 + Tailwind v4.
6//
7// An accessible page-shell built from the native HTML landmark elements.
8// Pure structure — no JS. Each subcomponent is a thin semantic wrapper
9// around the native element that implicitly exposes the matching ARIA
10// landmark role, so assistive-tech users can jump between the major
11// regions of the page.
12//
13// Native element  →  implicit landmark role
14//   <header>  (in body context)  →  banner
15//   <nav>                          →  navigation
16//   <search>                       →  search
17//   <main>                         →  main
18//   <aside>                        →  complementary
19//   <section>  (when labelled)     →  region
20//   <form>     (when labelled)      →  form
21//   <footer>  (in body context)    →  contentinfo
22//
23// Labelling rules (when to pass an aria-label / aria-labelledby) come
24// straight from the APG. Several landmark roles must (region) or should
25// (navigation, complementary, search) carry a unique label so multiple
26// landmarks of the same type are distinguishable.
27//
28// APG (read for the per-role design patterns + labelling rules):
29//   repos/aria-practices/content/patterns/landmarks/examples/banner.html
30//   repos/aria-practices/content/patterns/landmarks/examples/navigation.html
31//   repos/aria-practices/content/patterns/landmarks/examples/main.html
32//   repos/aria-practices/content/patterns/landmarks/examples/complementary.html
33//   repos/aria-practices/content/patterns/landmarks/examples/region.html
34//   repos/aria-practices/content/patterns/landmarks/examples/search.html
35//   repos/aria-practices/content/patterns/landmarks/examples/contentinfo.html
36// MDN (the native <search> element defines a search landmark — no role=search needed):
37//   repos/mdn/files/en-us/web/html/reference/elements/search/index.md:20-22
38 
39type LandmarkProps = PropsWithChildren<
40  {
41    class?: ClassValue
42    id?: string
43    // The accessible name for this landmark. Where the APG calls for one
44    // (navigation, complementary, search when there is more than one; and
45    // always for region) pass either ariaLabel or ariaLabelledby.
46    ariaLabel?: string
47    ariaLabelledby?: string
48  } & Record<string, any>
49>
50 
51// <header> in body context = banner landmark. Top-level only: a <header>
52// … truncated