// @bun
// src/components/docs/libraries/LibrariesAccessibilityPage.tsx
import Link from "@contractspec/lib.ui-link";
import { ChevronRight } from "lucide-react";
import { CodeBlock, InstallCommand } from "@contractspec/lib.design-system";
import { jsx, jsxs } from "react/jsx-runtime";
function LibrariesAccessibilityPage() {
  return /* @__PURE__ */ jsxs("div", {
    className: "space-y-8",
    children: [
      /* @__PURE__ */ jsxs("div", {
        className: "space-y-4",
        children: [
          /* @__PURE__ */ jsx("h1", {
            className: "text-4xl font-bold",
            children: "@contractspec/lib.accessibility"
          }),
          /* @__PURE__ */ jsx("p", {
            className: "text-muted-foreground",
            children: "Stable exports of accessibility primitives for LSSM web apps, ensuring WCAG compliance and inclusive design."
          })
        ]
      }),
      /* @__PURE__ */ jsxs("div", {
        className: "space-y-4",
        children: [
          /* @__PURE__ */ jsx("h2", {
            className: "text-2xl font-bold",
            children: "Installation"
          }),
          /* @__PURE__ */ jsx(InstallCommand, {
            package: "@contractspec/lib.accessibility"
          })
        ]
      }),
      /* @__PURE__ */ jsxs("div", {
        className: "space-y-4",
        children: [
          /* @__PURE__ */ jsx("h2", {
            className: "text-2xl font-bold",
            children: "Exports"
          }),
          /* @__PURE__ */ jsxs("ul", {
            className: "text-muted-foreground space-y-2",
            children: [
              /* @__PURE__ */ jsxs("li", {
                children: [
                  /* @__PURE__ */ jsx("code", {
                    className: "bg-background/50 rounded px-2 py-1",
                    children: "SkipLink"
                  }),
                  ": A link to skip navigation, visible on focus"
                ]
              }),
              /* @__PURE__ */ jsxs("li", {
                children: [
                  /* @__PURE__ */ jsx("code", {
                    className: "bg-background/50 rounded px-2 py-1",
                    children: "VisuallyHidden"
                  }),
                  ": Hide content visually but keep it for screen readers"
                ]
              }),
              /* @__PURE__ */ jsxs("li", {
                children: [
                  /* @__PURE__ */ jsx("code", {
                    className: "bg-background/50 rounded px-2 py-1",
                    children: "SRLiveRegionProvider"
                  }),
                  ",",
                  " ",
                  /* @__PURE__ */ jsx("code", {
                    className: "bg-background/50 rounded px-2 py-1",
                    children: "useSRLiveRegion"
                  }),
                  ": Manage live region announcements"
                ]
              }),
              /* @__PURE__ */ jsxs("li", {
                children: [
                  /* @__PURE__ */ jsx("code", {
                    className: "bg-background/50 rounded px-2 py-1",
                    children: "RouteAnnouncer"
                  }),
                  ": Announce page title/path changes on navigation"
                ]
              }),
              /* @__PURE__ */ jsxs("li", {
                children: [
                  /* @__PURE__ */ jsx("code", {
                    className: "bg-background/50 rounded px-2 py-1",
                    children: "FocusOnRouteChange"
                  }),
                  ": Reset focus to body or main content on navigation"
                ]
              }),
              /* @__PURE__ */ jsxs("li", {
                children: [
                  /* @__PURE__ */ jsx("code", {
                    className: "bg-background/50 rounded px-2 py-1",
                    children: "useReducedMotion"
                  }),
                  ": Detect if the user prefers reduced motion"
                ]
              })
            ]
          })
        ]
      }),
      /* @__PURE__ */ jsxs("div", {
        className: "space-y-4",
        children: [
          /* @__PURE__ */ jsx("h2", {
            className: "text-2xl font-bold",
            children: "Example: App Setup"
          }),
          /* @__PURE__ */ jsx(CodeBlock, {
            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>
  );
}`
          })
        ]
      }),
      /* @__PURE__ */ jsxs("div", {
        className: "space-y-4",
        children: [
          /* @__PURE__ */ jsx("h2", {
            className: "text-2xl font-bold",
            children: "Example: Live Announcements"
          }),
          /* @__PURE__ */ jsx(CodeBlock, {
            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>;
}`
          })
        ]
      }),
      /* @__PURE__ */ jsxs("div", {
        className: "space-y-4",
        children: [
          /* @__PURE__ */ jsx("h2", {
            className: "text-2xl font-bold",
            children: "WCAG Compliance"
          }),
          /* @__PURE__ */ jsxs("p", {
            className: "text-muted-foreground",
            children: [
              "These components map directly to WCAG 2.1 Level AA requirements documented in ",
              /* @__PURE__ */ jsx("code", {
                children: "docs/accessibility_wcag_compliance_specs.md"
              }),
              ":"
            ]
          }),
          /* @__PURE__ */ jsxs("ul", {
            className: "text-muted-foreground list-inside list-disc space-y-2",
            children: [
              /* @__PURE__ */ jsx("li", {
                children: "2.4.1 Bypass Blocks (SkipLink)"
              }),
              /* @__PURE__ */ jsx("li", {
                children: "4.1.3 Status Messages (LiveRegion)"
              }),
              /* @__PURE__ */ jsx("li", {
                children: "2.4.3 Focus Order (FocusOnRouteChange)"
              }),
              /* @__PURE__ */ jsx("li", {
                children: "2.3.3 Animation from Interactions (useReducedMotion)"
              })
            ]
          })
        ]
      }),
      /* @__PURE__ */ jsxs("div", {
        className: "flex items-center gap-4 pt-4",
        children: [
          /* @__PURE__ */ jsx(Link, {
            href: "/docs/libraries/design-system",
            className: "btn-ghost",
            children: "Previous: Design System"
          }),
          /* @__PURE__ */ jsxs(Link, {
            href: "/docs/libraries",
            className: "btn-primary",
            children: [
              "Back to Libraries ",
              /* @__PURE__ */ jsx(ChevronRight, {
                size: 16
              })
            ]
          })
        ]
      })
    ]
  });
}
export {
  LibrariesAccessibilityPage
};
