@contractspec/lib.accessibility 1.57.0 → 1.58.0

package/dist/AccessibilityProvider.js

@@ -1,21 +1,174 @@
-'use client';
+// @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/next-route-announcer.tsx
+import * as React2 from "react";
+import { usePathname } from "next/navigation";
+import { jsxDEV as jsxDEV2 } 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__ */ jsxDEV2("div", {
+    "aria-live": "polite",
+    "aria-atomic": "true",
+    className: "sr-only",
+    children: message
+  }, undefined, false, undefined, this);
+}
 
-import { A11YPreferencesProvider } from "./preferences.js";
-import { NextRouteAnnouncer } from "./next-route-announcer.js";
-import "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+// 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";
-
-//#region src/AccessibilityProvider.tsx
-function AccessibilityProvider({ children, skipTargetId = "main" }) {
-	return /* @__PURE__ */ jsx(A11YPreferencesProvider, { children: /* @__PURE__ */ jsxs(SRLiveRegionProvider, { children: [
-		/* @__PURE__ */ jsx(SkipLink, { targetId: skipTargetId }),
-		/* @__PURE__ */ jsx(NextRouteAnnouncer, {}),
-		children
-	] }) });
+import { jsxDEV as jsxDEV3 } from "react/jsx-dev-runtime";
+"use client";
+function AccessibilityProvider({
+  children,
+  skipTargetId = "main"
+}) {
+  return /* @__PURE__ */ jsxDEV3(A11YPreferencesProvider, {
+    children: /* @__PURE__ */ jsxDEV3(SRLiveRegionProvider, {
+      children: [
+        /* @__PURE__ */ jsxDEV3(SkipLink, {
+          targetId: skipTargetId
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ jsxDEV3(NextRouteAnnouncer, {}, undefined, false, undefined, this),
+        children
+      ]
+    }, undefined, true, undefined, this)
+  }, undefined, false, undefined, this);
 }
-
-//#endregion
-export { AccessibilityProvider };
-//# sourceMappingURL=AccessibilityProvider.js.map
+export {
+  AccessibilityProvider
+};

package/dist/browser/AccessibilityPanel.js

@@ -0,0 +1,362 @@
+// 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);
+}
+export {
+  AccessibilityPanel
+};