@contractspec/lib.accessibility 1.57.0 → 1.58.0

package/dist/browser/next-route-announcer.js

@@ -0,0 +1,23 @@
+// src/next-route-announcer.tsx
+import * as React from "react";
+import { usePathname } from "next/navigation";
+import { jsxDEV } from "react/jsx-dev-runtime";
+"use client";
+function NextRouteAnnouncer() {
+  const pathname = usePathname();
+  const [message, setMessage] = React.useState("");
+  React.useEffect(() => {
+    if (typeof document !== "undefined") {
+      setMessage(document.title || pathname || "");
+    }
+  }, [pathname]);
+  return /* @__PURE__ */ jsxDEV("div", {
+    "aria-live": "polite",
+    "aria-atomic": "true",
+    className: "sr-only",
+    children: message
+  }, undefined, false, undefined, this);
+}
+export {
+  NextRouteAnnouncer
+};

package/dist/browser/preferences.js

@@ -0,0 +1,132 @@
+// src/preferences.tsx
+import React from "react";
+import { jsxDEV } from "react/jsx-dev-runtime";
+"use client";
+var DEFAULT_PREFERENCES = {
+  textSize: "m",
+  textSpacing: "normal",
+  lineHeight: "normal",
+  underlineLinks: false,
+  focusRing: "normal",
+  reduceMotion: "system",
+  highContrast: false,
+  dyslexiaFont: false
+};
+var STORAGE_KEY = "a11y:preferences:v1";
+function getStoredPreferences() {
+  try {
+    const raw = typeof window !== "undefined" ? window.localStorage.getItem(STORAGE_KEY) : null;
+    if (!raw)
+      return null;
+    const parsed = JSON.parse(raw);
+    return { ...DEFAULT_PREFERENCES, ...parsed };
+  } catch {
+    return null;
+  }
+}
+function savePreferences(prefs) {
+  try {
+    if (typeof window !== "undefined") {
+      window.localStorage.setItem(STORAGE_KEY, JSON.stringify(prefs));
+    }
+  } catch {}
+}
+function applyCssVariables(prefs) {
+  if (typeof document === "undefined")
+    return;
+  const root = document.documentElement;
+  const body = document.body;
+  const sizeMap = {
+    s: "0.95",
+    m: "1",
+    l: "1.1",
+    xl: "1.25"
+  };
+  root.style.setProperty("--a11y-text-scale", sizeMap[prefs.textSize]);
+  const targetMin = prefs.textSize === "l" || prefs.textSize === "xl" ? "44px" : "0px";
+  root.style.setProperty("--a11y-target-min", targetMin);
+  root.style.setProperty("--a11y-letter-spacing", prefs.textSpacing === "increased" ? "0.12em" : "normal");
+  root.style.setProperty("--a11y-word-spacing", prefs.textSpacing === "increased" ? "0.16em" : "normal");
+  root.style.setProperty("--a11y-line-height", prefs.lineHeight === "increased" ? "1.6" : "1.5");
+  root.style.setProperty("--a11y-underline-links", prefs.underlineLinks ? "underline" : "revert");
+  root.style.setProperty("--a11y-focus-ring-width", prefs.focusRing === "thick" ? "4px" : "2px");
+  root.style.setProperty("--a11y-reduce-motion", prefs.reduceMotion);
+  root.style.setProperty("--a11y-contrast-mode", prefs.highContrast ? "high" : "normal");
+  if (prefs.highContrast) {
+    root.setAttribute("data-contrast", "high");
+  } else {
+    root.removeAttribute("data-contrast");
+  }
+  root.style.setProperty("--a11y-font-family-alt-enabled", prefs.dyslexiaFont ? "1" : "0");
+  if (body) {
+    if (prefs.textSpacing === "increased") {
+      body.style.letterSpacing = "0.12em";
+      body.style.wordSpacing = "0.16em";
+    } else {
+      body.style.letterSpacing = "";
+      body.style.wordSpacing = "";
+    }
+    body.style.lineHeight = prefs.lineHeight === "increased" ? "1.6" : "";
+  }
+}
+var PreferencesContext = React.createContext(null);
+function useA11YPreferences() {
+  const ctx = React.useContext(PreferencesContext);
+  if (!ctx)
+    throw new Error("useA11YPreferences must be used within A11YPreferencesProvider");
+  return ctx;
+}
+function A11YPreferencesProvider({
+  children
+}) {
+  const [preferences, setPreferencesState] = React.useState(DEFAULT_PREFERENCES);
+  const [hydrated, setHydrated] = React.useState(false);
+  React.useEffect(() => {
+    const stored = getStoredPreferences();
+    const next = stored ?? DEFAULT_PREFERENCES;
+    setPreferencesState(next);
+    setHydrated(true);
+    applyCssVariables(next);
+  }, []);
+  const setPreferences = React.useCallback((updater) => {
+    setPreferencesState((prev) => {
+      const next = typeof updater === "function" ? updater(prev) : { ...prev, ...updater };
+      savePreferences(next);
+      applyCssVariables(next);
+      try {
+        if (typeof window !== "undefined") {
+          const changed = {};
+          for (const key of Object.keys(next)) {
+            if (next[key] !== prev[key]) {
+              changed[key] = next[key];
+            }
+          }
+          window.dispatchEvent(new CustomEvent("a11y:pref_changed", {
+            detail: {
+              previous: prev,
+              current: next,
+              changed
+            }
+          }));
+        }
+      } catch {}
+      return next;
+    });
+  }, []);
+  const value = React.useMemo(() => ({ preferences, setPreferences }), [preferences, setPreferences]);
+  return /* @__PURE__ */ jsxDEV(PreferencesContext, {
+    value,
+    children: [
+      children,
+      !hydrated ? null : null
+    ]
+  }, undefined, true, undefined, this);
+}
+function a11yRootClassName() {
+  return "a11y-root";
+}
+export {
+  useA11YPreferences,
+  a11yRootClassName,
+  A11YPreferencesProvider
+};

package/dist/index.css

@@ -0,0 +1,60 @@
+/* src/styles.css */
+:root {
+  --a11y-text-scale: 1;
+  --a11y-letter-spacing: normal;
+  --a11y-word-spacing: normal;
+  --a11y-line-height: 1.5;
+  --a11y-underline-links: auto;
+  --a11y-focus-ring-width: 2px;
+  --a11y-reduce-motion: system;
+  --a11y-contrast-mode: normal;
+  --a11y-font-family-alt-enabled: 0;
+}
+
+html, body {
+  font-size: calc(16px * var(--a11y-text-scale));
+}
+
+body, p, li {
+  letter-spacing: var(--a11y-letter-spacing);
+  word-spacing: var(--a11y-word-spacing);
+  line-height: var(--a11y-line-height);
+}
+
+a {
+  text-decoration: var(--a11y-underline-links);
+}
+
+:where(button, [role="button"], a, input, select, textarea) {
+  outline-offset: 2px;
+  min-height: var(--a11y-target-min, 0);
+  min-width: var(--a11y-target-min, 0);
+}
+
+:where(:focus-visible) {
+  outline: var(--a11y-focus-ring-width) solid currentColor;
+}
+
+:root[style*="--a11y-font-family-alt-enabled: 1"] body {
+  font-family: var(--font-dyslexia, system-ui, sans-serif);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :root[style*="--a11y-reduce-motion: system"] * {
+    animation: none !important;
+    scroll-behavior: auto !important;
+    transition: none !important;
+  }
+}
+
+:root[style*="--a11y-reduce-motion: reduce"] * {
+  animation: none !important;
+  scroll-behavior: auto !important;
+  transition: none !important;
+}
+
+body {
+  letter-spacing: var(--a11y-letter-spacing, normal);
+  word-spacing: var(--a11y-word-spacing, normal);
+  line-height: var(--a11y-line-height, 1.5);
+}

package/dist/index.d.ts

@@ -1,11 +1,12 @@
-import { AccessibilityPanel } from "./AccessibilityPanel.js";
-import { AccessibilityProvider } from "./AccessibilityProvider.js";
-import { A11YPreferencesProvider, AccessibilityPreferences, useA11YPreferences } from "./preferences.js";
-import { NextRouteAnnouncer } from "./next-route-announcer.js";
-import { SRLiveRegionProvider, useSRLiveRegion } from "@contractspec/lib.ui-kit-web/ui/live-region";
-import { SkipLink } from "@contractspec/lib.ui-kit-web/ui/skip-link";
-import { VisuallyHidden } from "@contractspec/lib.ui-kit-web/ui/visually-hidden";
-import { RouteAnnouncer } from "@contractspec/lib.ui-kit-web/ui/route-announcer";
-import { FocusOnRouteChange } from "@contractspec/lib.ui-kit-web/ui/focus-on-route-change";
-import { useReducedMotion } from "@contractspec/lib.ui-kit-web/ui/use-reduced-motion";
-export { A11YPreferencesProvider, AccessibilityPanel, type AccessibilityPreferences, AccessibilityProvider, FocusOnRouteChange, NextRouteAnnouncer, RouteAnnouncer, SRLiveRegionProvider, SkipLink, VisuallyHidden, useA11YPreferences, useReducedMotion, useSRLiveRegion };
+export { SkipLink } from '@contractspec/lib.ui-kit-web/ui/skip-link';
+export { VisuallyHidden } from '@contractspec/lib.ui-kit-web/ui/visually-hidden';
+export { SRLiveRegionProvider, useSRLiveRegion, } from '@contractspec/lib.ui-kit-web/ui/live-region';
+export { RouteAnnouncer } from '@contractspec/lib.ui-kit-web/ui/route-announcer';
+export { FocusOnRouteChange } from '@contractspec/lib.ui-kit-web/ui/focus-on-route-change';
+export { useReducedMotion } from '@contractspec/lib.ui-kit-web/ui/use-reduced-motion';
+export { A11YPreferencesProvider, useA11YPreferences, type AccessibilityPreferences, } from './preferences';
+import './styles.css';
+export { AccessibilityPanel } from './AccessibilityPanel';
+export { AccessibilityProvider } from './AccessibilityProvider';
+export { NextRouteAnnouncer } from './next-route-announcer';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,2CAA2C,CAAC;AACrE,OAAO,EAAE,cAAc,EAAE,MAAM,iDAAiD,CAAC;AACjF,OAAO,EACL,oBAAoB,EACpB,eAAe,GAChB,MAAM,6CAA6C,CAAC;AACrD,OAAO,EAAE,cAAc,EAAE,MAAM,iDAAiD,CAAC;AACjF,OAAO,EAAE,kBAAkB,EAAE,MAAM,uDAAuD,CAAC;AAC3F,OAAO,EAAE,gBAAgB,EAAE,MAAM,oDAAoD,CAAC;AACtF,OAAO,EACL,uBAAuB,EACvB,kBAAkB,EAClB,KAAK,wBAAwB,GAC9B,MAAM,eAAe,CAAC;AACvB,OAAO,cAAc,CAAC;AACtB,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC"}

package/dist/index.js

@@ -1,13 +1,428 @@
-import { A11YPreferencesProvider, useA11YPreferences } from "./preferences.js";
-import { AccessibilityPanel } from "./AccessibilityPanel.js";
-import { NextRouteAnnouncer } from "./next-route-announcer.js";
-import { AccessibilityProvider } from "./AccessibilityProvider.js";
-import "./styles.js";
-import { SRLiveRegionProvider, useSRLiveRegion } from "@contractspec/lib.ui-kit-web/ui/live-region";
+// @bun
+// src/preferences.tsx
+import React from "react";
+import { jsxDEV } from "react/jsx-dev-runtime";
+"use client";
+var DEFAULT_PREFERENCES = {
+  textSize: "m",
+  textSpacing: "normal",
+  lineHeight: "normal",
+  underlineLinks: false,
+  focusRing: "normal",
+  reduceMotion: "system",
+  highContrast: false,
+  dyslexiaFont: false
+};
+var STORAGE_KEY = "a11y:preferences:v1";
+function getStoredPreferences() {
+  try {
+    const raw = typeof window !== "undefined" ? window.localStorage.getItem(STORAGE_KEY) : null;
+    if (!raw)
+      return null;
+    const parsed = JSON.parse(raw);
+    return { ...DEFAULT_PREFERENCES, ...parsed };
+  } catch {
+    return null;
+  }
+}
+function savePreferences(prefs) {
+  try {
+    if (typeof window !== "undefined") {
+      window.localStorage.setItem(STORAGE_KEY, JSON.stringify(prefs));
+    }
+  } catch {}
+}
+function applyCssVariables(prefs) {
+  if (typeof document === "undefined")
+    return;
+  const root = document.documentElement;
+  const body = document.body;
+  const sizeMap = {
+    s: "0.95",
+    m: "1",
+    l: "1.1",
+    xl: "1.25"
+  };
+  root.style.setProperty("--a11y-text-scale", sizeMap[prefs.textSize]);
+  const targetMin = prefs.textSize === "l" || prefs.textSize === "xl" ? "44px" : "0px";
+  root.style.setProperty("--a11y-target-min", targetMin);
+  root.style.setProperty("--a11y-letter-spacing", prefs.textSpacing === "increased" ? "0.12em" : "normal");
+  root.style.setProperty("--a11y-word-spacing", prefs.textSpacing === "increased" ? "0.16em" : "normal");
+  root.style.setProperty("--a11y-line-height", prefs.lineHeight === "increased" ? "1.6" : "1.5");
+  root.style.setProperty("--a11y-underline-links", prefs.underlineLinks ? "underline" : "revert");
+  root.style.setProperty("--a11y-focus-ring-width", prefs.focusRing === "thick" ? "4px" : "2px");
+  root.style.setProperty("--a11y-reduce-motion", prefs.reduceMotion);
+  root.style.setProperty("--a11y-contrast-mode", prefs.highContrast ? "high" : "normal");
+  if (prefs.highContrast) {
+    root.setAttribute("data-contrast", "high");
+  } else {
+    root.removeAttribute("data-contrast");
+  }
+  root.style.setProperty("--a11y-font-family-alt-enabled", prefs.dyslexiaFont ? "1" : "0");
+  if (body) {
+    if (prefs.textSpacing === "increased") {
+      body.style.letterSpacing = "0.12em";
+      body.style.wordSpacing = "0.16em";
+    } else {
+      body.style.letterSpacing = "";
+      body.style.wordSpacing = "";
+    }
+    body.style.lineHeight = prefs.lineHeight === "increased" ? "1.6" : "";
+  }
+}
+var PreferencesContext = React.createContext(null);
+function useA11YPreferences() {
+  const ctx = React.useContext(PreferencesContext);
+  if (!ctx)
+    throw new Error("useA11YPreferences must be used within A11YPreferencesProvider");
+  return ctx;
+}
+function A11YPreferencesProvider({
+  children
+}) {
+  const [preferences, setPreferencesState] = React.useState(DEFAULT_PREFERENCES);
+  const [hydrated, setHydrated] = React.useState(false);
+  React.useEffect(() => {
+    const stored = getStoredPreferences();
+    const next = stored ?? DEFAULT_PREFERENCES;
+    setPreferencesState(next);
+    setHydrated(true);
+    applyCssVariables(next);
+  }, []);
+  const setPreferences = React.useCallback((updater) => {
+    setPreferencesState((prev) => {
+      const next = typeof updater === "function" ? updater(prev) : { ...prev, ...updater };
+      savePreferences(next);
+      applyCssVariables(next);
+      try {
+        if (typeof window !== "undefined") {
+          const changed = {};
+          for (const key of Object.keys(next)) {
+            if (next[key] !== prev[key]) {
+              changed[key] = next[key];
+            }
+          }
+          window.dispatchEvent(new CustomEvent("a11y:pref_changed", {
+            detail: {
+              previous: prev,
+              current: next,
+              changed
+            }
+          }));
+        }
+      } catch {}
+      return next;
+    });
+  }, []);
+  const value = React.useMemo(() => ({ preferences, setPreferences }), [preferences, setPreferences]);
+  return /* @__PURE__ */ jsxDEV(PreferencesContext, {
+    value,
+    children: [
+      children,
+      !hydrated ? null : null
+    ]
+  }, undefined, true, undefined, this);
+}
+function a11yRootClassName() {
+  return "a11y-root";
+}
+
+// src/AccessibilityPanel.tsx
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger
+} from "@contractspec/lib.ui-kit-web/ui/dialog";
+import { Button } from "@contractspec/lib.design-system";
+import { Switch } from "@contractspec/lib.ui-kit-web/ui/switch";
+import { Label } from "@contractspec/lib.ui-kit-web/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from "@contractspec/lib.ui-kit-web/ui/select";
+import { cn } from "@contractspec/lib.ui-kit-web/ui/utils";
+import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
+"use client";
+function AccessibilityPanel({ className }) {
+  const { preferences, setPreferences } = useA11YPreferences();
+  return /* @__PURE__ */ jsxDEV2(Dialog, {
+    children: [
+      /* @__PURE__ */ jsxDEV2(DialogTrigger, {
+        asChild: true,
+        children: /* @__PURE__ */ jsxDEV2(Button, {
+          variant: "outline",
+          "aria-haspopup": "dialog",
+          children: "Accessibility"
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV2(DialogPortal, {
+        children: [
+          /* @__PURE__ */ jsxDEV2(DialogOverlay, {
+            className: "fixed inset-0 z-50 bg-black/40"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV2(DialogContent, {
+            className: cn("bg-background focus-visible:ring-ring max-w-md p-6 shadow-lg outline-hidden focus-visible:ring-2", className),
+            "aria-describedby": "a11y-panel-desc",
+            children: [
+              /* @__PURE__ */ jsxDEV2(DialogTitle, {
+                className: "text-lg font-semibold",
+                children: "Accessibility settings"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV2("p", {
+                id: "a11y-panel-desc",
+                className: "text-muted-foreground text-sm",
+                children: "Adjust text size, spacing, focus and motion to suit your needs."
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV2("div", {
+                className: "mt-6 space-y-6",
+                children: [
+                  /* @__PURE__ */ jsxDEV2("div", {
+                    className: "space-y-2",
+                    children: [
+                      /* @__PURE__ */ jsxDEV2(Label, {
+                        children: "Text size"
+                      }, undefined, false, undefined, this),
+                      /* @__PURE__ */ jsxDEV2(Select, {
+                        value: preferences.textSize,
+                        onValueChange: (v) => setPreferences({ textSize: v }),
+                        children: [
+                          /* @__PURE__ */ jsxDEV2(SelectTrigger, {
+                            "aria-label": "Text size",
+                            children: /* @__PURE__ */ jsxDEV2(SelectValue, {}, undefined, false, undefined, this)
+                          }, undefined, false, undefined, this),
+                          /* @__PURE__ */ jsxDEV2(SelectContent, {
+                            children: [
+                              /* @__PURE__ */ jsxDEV2(SelectItem, {
+                                value: "s",
+                                children: "Small"
+                              }, undefined, false, undefined, this),
+                              /* @__PURE__ */ jsxDEV2(SelectItem, {
+                                value: "m",
+                                children: "Medium"
+                              }, undefined, false, undefined, this),
+                              /* @__PURE__ */ jsxDEV2(SelectItem, {
+                                value: "l",
+                                children: "Large"
+                              }, undefined, false, undefined, this),
+                              /* @__PURE__ */ jsxDEV2(SelectItem, {
+                                value: "xl",
+                                children: "Extra Large"
+                              }, undefined, false, undefined, this)
+                            ]
+                          }, undefined, true, undefined, this)
+                        ]
+                      }, undefined, true, undefined, this)
+                    ]
+                  }, undefined, true, undefined, this),
+                  /* @__PURE__ */ jsxDEV2("div", {
+                    className: "flex items-center justify-between",
+                    children: [
+                      /* @__PURE__ */ jsxDEV2(Label, {
+                        htmlFor: "text-spacing",
+                        children: "Increase text spacing (WCAG 1.4.12)"
+                      }, undefined, false, undefined, this),
+                      /* @__PURE__ */ jsxDEV2(Switch, {
+                        id: "text-spacing",
+                        checked: preferences.textSpacing === "increased",
+                        onCheckedChange: (c) => setPreferences({ textSpacing: c ? "increased" : "normal" })
+                      }, undefined, false, undefined, this)
+                    ]
+                  }, undefined, true, undefined, this),
+                  /* @__PURE__ */ jsxDEV2("div", {
+                    className: "flex items-center justify-between",
+                    children: [
+                      /* @__PURE__ */ jsxDEV2(Label, {
+                        htmlFor: "line-height",
+                        children: "Increase line height"
+                      }, undefined, false, undefined, this),
+                      /* @__PURE__ */ jsxDEV2(Switch, {
+                        id: "line-height",
+                        checked: preferences.lineHeight === "increased",
+                        onCheckedChange: (c) => setPreferences({ lineHeight: c ? "increased" : "normal" })
+                      }, undefined, false, undefined, this)
+                    ]
+                  }, undefined, true, undefined, this),
+                  /* @__PURE__ */ jsxDEV2("div", {
+                    className: "flex items-center justify-between",
+                    children: [
+                      /* @__PURE__ */ jsxDEV2(Label, {
+                        htmlFor: "underline-links",
+                        children: "Always underline links"
+                      }, undefined, false, undefined, this),
+                      /* @__PURE__ */ jsxDEV2(Switch, {
+                        id: "underline-links",
+                        checked: preferences.underlineLinks,
+                        onCheckedChange: (c) => setPreferences({ underlineLinks: c })
+                      }, undefined, false, undefined, this)
+                    ]
+                  }, undefined, true, undefined, this),
+                  /* @__PURE__ */ jsxDEV2("div", {
+                    className: "flex items-center justify-between",
+                    children: [
+                      /* @__PURE__ */ jsxDEV2(Label, {
+                        htmlFor: "focus-ring",
+                        children: "Thick focus ring"
+                      }, undefined, false, undefined, this),
+                      /* @__PURE__ */ jsxDEV2(Switch, {
+                        id: "focus-ring",
+                        checked: preferences.focusRing === "thick",
+                        onCheckedChange: (c) => setPreferences({ focusRing: c ? "thick" : "normal" })
+                      }, undefined, false, undefined, this)
+                    ]
+                  }, undefined, true, undefined, this),
+                  /* @__PURE__ */ jsxDEV2("div", {
+                    className: "space-y-2",
+                    children: [
+                      /* @__PURE__ */ jsxDEV2(Label, {
+                        children: "Motion"
+                      }, undefined, false, undefined, this),
+                      /* @__PURE__ */ jsxDEV2(Select, {
+                        value: preferences.reduceMotion,
+                        onValueChange: (v) => setPreferences({ reduceMotion: v }),
+                        children: [
+                          /* @__PURE__ */ jsxDEV2(SelectTrigger, {
+                            "aria-label": "Motion preferences",
+                            children: /* @__PURE__ */ jsxDEV2(SelectValue, {}, undefined, false, undefined, this)
+                          }, undefined, false, undefined, this),
+                          /* @__PURE__ */ jsxDEV2(SelectContent, {
+                            children: [
+                              /* @__PURE__ */ jsxDEV2(SelectItem, {
+                                value: "system",
+                                children: "Follow system"
+                              }, undefined, false, undefined, this),
+                              /* @__PURE__ */ jsxDEV2(SelectItem, {
+                                value: "reduce",
+                                children: "Reduce motion"
+                              }, undefined, false, undefined, this),
+                              /* @__PURE__ */ jsxDEV2(SelectItem, {
+                                value: "no-preference",
+                                children: "Allow motion"
+                              }, undefined, false, undefined, this)
+                            ]
+                          }, undefined, true, undefined, this)
+                        ]
+                      }, undefined, true, undefined, this)
+                    ]
+                  }, undefined, true, undefined, this),
+                  /* @__PURE__ */ jsxDEV2("div", {
+                    className: "flex items-center justify-between",
+                    children: [
+                      /* @__PURE__ */ jsxDEV2(Label, {
+                        htmlFor: "contrast",
+                        children: "High contrast"
+                      }, undefined, false, undefined, this),
+                      /* @__PURE__ */ jsxDEV2(Switch, {
+                        id: "contrast",
+                        checked: preferences.highContrast,
+                        onCheckedChange: (c) => setPreferences({ highContrast: c })
+                      }, undefined, false, undefined, this)
+                    ]
+                  }, undefined, true, undefined, this),
+                  /* @__PURE__ */ jsxDEV2("div", {
+                    className: "flex items-center justify-between",
+                    children: [
+                      /* @__PURE__ */ jsxDEV2(Label, {
+                        htmlFor: "dyslexia-font",
+                        children: "Dyslexia-friendly font"
+                      }, undefined, false, undefined, this),
+                      /* @__PURE__ */ jsxDEV2(Switch, {
+                        id: "dyslexia-font",
+                        checked: preferences.dyslexiaFont,
+                        onCheckedChange: (c) => setPreferences({ dyslexiaFont: c })
+                      }, undefined, false, undefined, this)
+                    ]
+                  }, undefined, true, undefined, this)
+                ]
+              }, undefined, true, undefined, this),
+              /* @__PURE__ */ jsxDEV2("div", {
+                className: "mt-8 flex justify-end gap-2",
+                children: /* @__PURE__ */ jsxDEV2(DialogClose, {
+                  asChild: true,
+                  children: /* @__PURE__ */ jsxDEV2(Button, {
+                    variant: "secondary",
+                    children: "Close"
+                  }, undefined, false, undefined, this)
+                }, undefined, false, undefined, this)
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/next-route-announcer.tsx
+import * as React2 from "react";
+import { usePathname } from "next/navigation";
+import { jsxDEV as jsxDEV3 } from "react/jsx-dev-runtime";
+"use client";
+function NextRouteAnnouncer() {
+  const pathname = usePathname();
+  const [message, setMessage] = React2.useState("");
+  React2.useEffect(() => {
+    if (typeof document !== "undefined") {
+      setMessage(document.title || pathname || "");
+    }
+  }, [pathname]);
+  return /* @__PURE__ */ jsxDEV3("div", {
+    "aria-live": "polite",
+    "aria-atomic": "true",
+    className: "sr-only",
+    children: message
+  }, undefined, false, undefined, this);
+}
+
+// src/AccessibilityProvider.tsx
+import { SRLiveRegionProvider } from "@contractspec/lib.ui-kit-web/ui/live-region";
 import { SkipLink } from "@contractspec/lib.ui-kit-web/ui/skip-link";
+import { jsxDEV as jsxDEV4 } from "react/jsx-dev-runtime";
+"use client";
+function AccessibilityProvider({
+  children,
+  skipTargetId = "main"
+}) {
+  return /* @__PURE__ */ jsxDEV4(A11YPreferencesProvider, {
+    children: /* @__PURE__ */ jsxDEV4(SRLiveRegionProvider, {
+      children: [
+        /* @__PURE__ */ jsxDEV4(SkipLink, {
+          targetId: skipTargetId
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ jsxDEV4(NextRouteAnnouncer, {}, undefined, false, undefined, this),
+        children
+      ]
+    }, undefined, true, undefined, this)
+  }, undefined, false, undefined, this);
+}
+
+// src/index.ts
+import { SkipLink as SkipLink2 } from "@contractspec/lib.ui-kit-web/ui/skip-link";
 import { VisuallyHidden } from "@contractspec/lib.ui-kit-web/ui/visually-hidden";
+import {
+  SRLiveRegionProvider as SRLiveRegionProvider2,
+  useSRLiveRegion
+} from "@contractspec/lib.ui-kit-web/ui/live-region";
 import { RouteAnnouncer } from "@contractspec/lib.ui-kit-web/ui/route-announcer";
 import { FocusOnRouteChange } from "@contractspec/lib.ui-kit-web/ui/focus-on-route-change";
 import { useReducedMotion } from "@contractspec/lib.ui-kit-web/ui/use-reduced-motion";
-
-export { A11YPreferencesProvider, AccessibilityPanel, AccessibilityProvider, FocusOnRouteChange, NextRouteAnnouncer, RouteAnnouncer, SRLiveRegionProvider, SkipLink, VisuallyHidden, useA11YPreferences, useReducedMotion, useSRLiveRegion };
+export {
+  useSRLiveRegion,
+  useReducedMotion,
+  useA11YPreferences,
+  VisuallyHidden,
+  SkipLink2 as SkipLink,
+  SRLiveRegionProvider2 as SRLiveRegionProvider,
+  RouteAnnouncer,
+  NextRouteAnnouncer,
+  FocusOnRouteChange,
+  AccessibilityProvider,
+  AccessibilityPanel,
+  A11YPreferencesProvider
+};