import{CodeBlock as i,InstallCommand as a}from"@contractspec/lib.design-system";import n from"@contractspec/lib.ui-link";import{ChevronRight as c}from"lucide-react";import{jsx as e,jsxs as o}from"react/jsx-runtime";function r(){return o("div",{className:"space-y-8",children:[o("div",{className:"space-y-4",children:[e("h1",{className:"font-bold text-4xl",children:"@contractspec/lib.accessibility"}),e("p",{className:"text-muted-foreground",children:"Stable exports of accessibility primitives for LSSM web apps, ensuring WCAG compliance and inclusive design."})]}),o("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"Installation"}),e(a,{package:"@contractspec/lib.accessibility"})]}),o("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"Exports"}),o("ul",{className:"space-y-2 text-muted-foreground",children:[o("li",{children:[e("code",{className:"rounded bg-background/50 px-2 py-1",children:"SkipLink"}),": A link to skip navigation, visible on focus"]}),o("li",{children:[e("code",{className:"rounded bg-background/50 px-2 py-1",children:"VisuallyHidden"}),": Hide content visually but keep it for screen readers"]}),o("li",{children:[e("code",{className:"rounded bg-background/50 px-2 py-1",children:"SRLiveRegionProvider"}),","," ",e("code",{className:"rounded bg-background/50 px-2 py-1",children:"useSRLiveRegion"}),": Manage live region announcements"]}),o("li",{children:[e("code",{className:"rounded bg-background/50 px-2 py-1",children:"RouteAnnouncer"}),": Announce page title/path changes on navigation"]}),o("li",{children:[e("code",{className:"rounded bg-background/50 px-2 py-1",children:"FocusOnRouteChange"}),": Reset focus to body or main content on navigation"]}),o("li",{children:[e("code",{className:"rounded bg-background/50 px-2 py-1",children:"useReducedMotion"}),": Detect if the user prefers reduced motion"]})]})]}),o("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"Example: App Setup"}),e(i,{language:"tsx",code:`import {
  SRLiveRegionProvider,
  RouteAnnouncer,
  SkipLink
} from '@contractspec/lib.accessibility';

export function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <SRLiveRegionProvider>
          <SkipLink />
          <RouteAnnouncer />
          <main id="main-content">
            {children}
          </main>
        </SRLiveRegionProvider>
      </body>
    </html>
  );
}`})]}),o("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"Example: Live Announcements"}),e(i,{language:"tsx",code:`import { useSRLiveRegion } from '@contractspec/lib.accessibility';

export function TodoList() {
  const { announce } = useSRLiveRegion();

  const addTodo = () => {
    // ... add logic
    announce('Todo added successfully', 'polite');
  };

  return <button onClick={addTodo}>Add Todo</button>;
}`})]}),o("div",{className:"space-y-4",children:[e("h2",{className:"font-bold text-2xl",children:"WCAG Compliance"}),o("p",{className:"text-muted-foreground",children:["These components map directly to WCAG 2.1 Level AA requirements documented in ",e("code",{children:"docs/accessibility_wcag_compliance_specs.md"}),":"]}),o("ul",{className:"list-inside list-disc space-y-2 text-muted-foreground",children:[e("li",{children:"2.4.1 Bypass Blocks (SkipLink)"}),e("li",{children:"4.1.3 Status Messages (LiveRegion)"}),e("li",{children:"2.4.3 Focus Order (FocusOnRouteChange)"}),e("li",{children:"2.3.3 Animation from Interactions (useReducedMotion)"})]})]}),o("div",{className:"flex items-center gap-4 pt-4",children:[e(n,{href:"/docs/libraries/design-system",className:"btn-ghost",children:"Previous: Design System"}),o(n,{href:"/docs/libraries",className:"btn-primary",children:["Back to Libraries ",e(c,{size:16})]})]})]})}export{r as LibrariesAccessibilityPage};
