accessify-widget 0.3.42 → 0.3.44

package/dist/accessify.mjs

@@ -1,4 +1,4 @@
-import { d, i } from "./index-lQVz5TBk.js";
+import { d, i } from "./index-Moz7iASF.js";
 export {
   d as destroy,
   i as init

package/dist/{contrast-BcTWODsK.js → contrast-CgazHyn5.js}

@@ -43,12 +43,13 @@ const EX = ":not(#accessify-root):not(#accessify-root *)";
 function buildCSS(mode) {
   const t = TOKENS[mode];
   const isHigh = mode === "high";
+  const MEDIA_EX = ":not(img):not(video):not(picture):not(canvas):not(svg):not(iframe)";
   const base = `
     html {
       color-scheme: ${t.colorScheme} !important;
     }
     html, body,
-    body *${EX} {
+    body *${EX}${MEDIA_EX} {
       background-color: ${t.pageBg} !important;
     }
   `;
@@ -169,4 +170,4 @@ function createContrastModule() {
 export {
   createContrastModule as default
 };
-//# sourceMappingURL=contrast-BcTWODsK.js.map
+//# sourceMappingURL=contrast-CgazHyn5.js.map

package/dist/contrast-CgazHyn5.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"contrast-CgazHyn5.js","sources":["../src/features/contrast.ts"],"sourcesContent":["// ---------------------------------------------------------------------------\n// Accessify – Contrast Modes (Accessibility Feature)\n// ---------------------------------------------------------------------------\n//\n// Three modes: light, dark, high — each as a clearly defined token set.\n//\n// Design principles:\n//   1. CONTENT elements (text, headings, links, buttons, form controls) get\n//      explicit color overrides — these are what users need to read.\n//   2. STRUCTURAL elements (wrapper divs, sections, nav) get background only\n//      via `html` and `body` — not individually. This prevents breaking\n//      Framer/CSS-Grid/Flex layouts where divs use fit-content, overflow:hidden,\n//      or fixed heights.\n//   3. The widget itself (inside #accessify-root / Shadow DOM) is NEVER touched.\n//   4. Focus indicators are defined in ALL modes, not just high contrast.\n//   5. border-color is NOT globally overridden — only on elements that have\n//      visible borders for content separation (tables, fieldsets, hr).\n//\n// Selector strategy:\n//   - `:where()` for zero-specificity (site styles can still win if needed,\n//     but `!important` ensures accessibility overrides take priority).\n//   - `body :where(...)` scopes to page content.\n//   - `body *:not(#accessify-root):not(#accessify-root *)` used only where\n//     we need broad text color coverage.\n//   - Framer-safe: no background-color on generic div/section/article — only\n//     on html/body. Content readability comes from text color, not from\n//     painting every container.\n//\n// ---------------------------------------------------------------------------\n\nimport type { FeatureModule, FeatureState } from '../types';\n\ntype ContrastMode = 'off' | 'light' | 'dark' | 'high';\n\n// ---------------------------------------------------------------------------\n// Token definitions — each mode is a self-contained color system\n// ---------------------------------------------------------------------------\n\ninterface ContrastTokens {\n  colorScheme: string;\n  pageBg: string;\n  text: string;\n  textStrong: string;    // headings, bold\n  link: string;\n  linkVisited: string;\n  focusRing: string;\n  borderContent: string; // for tables, hr, fieldset — NOT every div\n  inputBg: string;\n  inputBorder: string;\n  imgFilter: string;     // empty string = no filter\n}\n\nconst TOKENS: Record<Exclude<ContrastMode, 'off'>, ContrastTokens> = {\n  light: {\n    colorScheme: 'light',\n    pageBg:       '#fbf7ef',\n    text:         '#1a1a1a',\n    textStrong:   '#0d0d0d',\n    link:         '#0047b3',\n    linkVisited:  '#3d2b85',\n    focusRing:    '#0047b3',\n    borderContent:'#888078',\n    inputBg:      '#ffffff',\n    inputBorder:  '#6f675d',\n    imgFilter:    '',\n  },\n  dark: {\n    colorScheme: 'dark',\n    pageBg:       '#101418',\n    text:         '#e8e4dc',\n    textStrong:   '#ffffff',\n    link:         '#7cc8f5',\n    linkVisited:  '#b8a0e8',\n    focusRing:    '#7cc8f5',\n    borderContent:'#3a4a58',\n    inputBg:      '#1a2028',\n    inputBorder:  '#4a5a68',\n    imgFilter:    'brightness(0.90) contrast(1.06)',\n  },\n  high: {\n    colorScheme: 'dark',\n    pageBg:       '#000000',\n    text:         '#ffffff',\n    textStrong:   '#ffffff',\n    link:         '#ffff00',\n    linkVisited:  '#ffff00',\n    focusRing:    '#ffff00',\n    borderContent:'#ffffff',\n    inputBg:      '#000000',\n    inputBorder:  '#ffffff',\n    imgFilter:    'contrast(1.25) brightness(0.95)',\n  },\n};\n\n// ---------------------------------------------------------------------------\n// CSS generation — separated into logical layers\n// ---------------------------------------------------------------------------\n\n/** Elements to exclude from page-level contrast (the widget itself) */\nconst EX = ':not(#accessify-root):not(#accessify-root *)';\n\nfunction buildCSS(mode: Exclude<ContrastMode, 'off'>): string {\n  const t = TOKENS[mode];\n  const isHigh = mode === 'high';\n\n  // ── Layer 1: Background on structural elements ──\n  // Override background-color broadly BUT exclude media elements (img, video,\n  // picture, canvas, svg, iframe) — changing their bg can break blend-modes,\n  // lazy-load opacity transitions, and transparent overlays on Shopify/etc.\n  const MEDIA_EX = ':not(img):not(video):not(picture):not(canvas):not(svg):not(iframe)';\n  const base = `\n    html {\n      color-scheme: ${t.colorScheme} !important;\n    }\n    html, body,\n    body *${EX}${MEDIA_EX} {\n      background-color: ${t.pageBg} !important;\n    }\n  `;\n\n  // ── Layer 2: Text color on ALL content elements ──\n  // Using body * ensures text inside any container is readable, without\n  // painting the container's background (which would break layouts).\n  const textColor = `\n    body *${EX} {\n      color: ${t.text} !important;\n    }\n    body :where(h1, h2, h3, h4, h5, h6, strong, b, th)${EX} {\n      color: ${t.textStrong} !important;\n    }\n  `;\n\n  // ── Layer 3: Links — distinct color + underline for visibility ──\n  const links = `\n    body :where(a)${EX} {\n      color: ${t.link} !important;\n      text-decoration: underline !important;\n      text-decoration-color: ${t.link} !important;\n      ${isHigh ? 'text-decoration-thickness: 2px !important; text-underline-offset: 3px !important;' : ''}\n    }\n    body :where(a:visited)${EX} {\n      color: ${t.linkVisited} !important;\n    }\n    body :where(a:hover, a:focus)${EX} {\n      opacity: 0.85 !important;\n    }\n  `;\n\n  // ── Layer 4: Form controls — explicit bg + border for readability ──\n  // These get background because they ARE content, not structural wrappers.\n  const forms = `\n    body :where(input, textarea, select)${EX} {\n      background-color: ${t.inputBg} !important;\n      color: ${t.text} !important;\n      border: 1px solid ${t.inputBorder} !important;\n      box-shadow: none !important;\n    }\n    body :where(button, [role=\"button\"])${EX} {\n      color: ${t.text} !important;\n      border-color: ${t.inputBorder} !important;\n      ${isHigh ? `background-color: ${t.pageBg} !important; border: 2px solid ${t.inputBorder} !important;` : ''}\n    }\n  `;\n\n  // ── Layer 5: Focus indicators — in ALL modes, stronger in high ──\n  const focus = `\n    body :where(a, button, input, textarea, select, [tabindex])${EX}:focus-visible {\n      outline: ${isHigh ? '3px' : '2px'} solid ${t.focusRing} !important;\n      outline-offset: 2px !important;\n    }\n  `;\n\n  // ── Layer 6: Content borders — only on elements that visually separate ──\n  // NOT on generic divs — that destroys Framer card layouts.\n  const borders = `\n    body :where(table, th, td, hr, fieldset)${EX} {\n      border-color: ${t.borderContent} !important;\n    }\n  `;\n\n  // ── Layer 7: Images — gentle filter, skip decorative SVG icons ──\n  const images = t.imgFilter ? `\n    body :where(img, video, picture)${EX} {\n      filter: ${t.imgFilter} !important;\n    }\n  ` : '';\n\n  // ── Layer 8: High contrast extras ──\n  const highExtras = isHigh ? `\n    body :where(::placeholder)${EX} {\n      color: #aaaaaa !important;\n      opacity: 1 !important;\n    }\n    body :where(::selection) {\n      background: #ffff00 !important;\n      color: #000000 !important;\n    }\n    body :where(mark)${EX} {\n      background: #ffff00 !important;\n      color: #000000 !important;\n    }\n  ` : '';\n\n  return base + textColor + links + forms + focus + borders + images + highExtras;\n}\n\n// ---------------------------------------------------------------------------\n// Module\n// ---------------------------------------------------------------------------\n\nexport default function createContrastModule(): FeatureModule {\n  let currentMode: ContrastMode = 'off';\n  const STYLE_ID = 'accessify-contrast';\n  const STORAGE_KEY = 'accessify-contrast-mode';\n\n  function applyStyles(mode: ContrastMode) {\n    let styleEl = document.getElementById(STYLE_ID);\n    if (mode === 'off') {\n      styleEl?.remove();\n      return;\n    }\n    if (!styleEl) {\n      styleEl = document.createElement('style');\n      styleEl.id = STYLE_ID;\n      document.head.appendChild(styleEl);\n    }\n    styleEl.textContent = buildCSS(mode);\n  }\n\n  function activate() {\n    const saved = localStorage.getItem(STORAGE_KEY) as ContrastMode;\n    currentMode = saved === 'light' || saved === 'dark' || saved === 'high' ? saved : 'dark';\n    applyStyles(currentMode);\n  }\n\n  function deactivate() {\n    currentMode = 'off';\n    applyStyles('off');\n    localStorage.removeItem(STORAGE_KEY);\n  }\n\n  return {\n    id: 'contrast',\n    name: () => 'Contrast',\n    description: 'Increase contrast for better readability',\n    icon: 'contrast',\n    category: 'visual',\n    activate,\n    deactivate,\n    getState: (): FeatureState => ({ id: 'contrast', enabled: currentMode !== 'off', value: currentMode }),\n    setState: (mode: ContrastMode) => {\n      currentMode = mode === 'light' || mode === 'dark' || mode === 'high' ? mode : 'off';\n      applyStyles(currentMode);\n      if (currentMode === 'off') {\n        localStorage.removeItem(STORAGE_KEY);\n      } else {\n        localStorage.setItem(STORAGE_KEY, currentMode);\n      }\n    },\n  };\n}\n"],"names":[],"mappings":"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"}

package/dist/{index-lQVz5TBk.js → index-Moz7iASF.js}

@@ -6618,16 +6618,16 @@ function FeatureGrid($$anchor, $$props) {
   const AI_FEATURES = /* @__PURE__ */ new Set(["text-simplify", "alt-text"]);
   const loadedModules = /* @__PURE__ */ new Map();
   const FEATURE_LOADERS = {
-    contrast: () => import("./contrast-BcTWODsK.js"),
+    contrast: () => import("./contrast-CgazHyn5.js"),
     "text-size": () => import("./text-size-m_mHNPWo.js"),
-    "keyboard-nav": () => import("./keyboard-nav-BqdopG_-.js"),
+    "keyboard-nav": () => import("./keyboard-nav-DAQ7XlGr.js"),
     "link-highlight": () => import("./link-highlight-DBGm067Y.js"),
     "reading-guide": () => import("./reading-guide-VT8NciIL.js"),
     "reading-mask": () => import("./reading-mask-BABChuCz.js"),
     "animation-stop": () => import("./animation-stop-_chC8bg1.js"),
     "hide-images": () => import("./hide-images-B_LeCBcd.js"),
     "big-cursor": () => import("./big-cursor-B2UKu9dQ.js"),
-    "page-structure": () => import("./page-structure-D74Eg0X5.js"),
+    "page-structure": () => import("./page-structure-Cw2GaogB.js"),
     tts: () => import("./tts-CjszLRnb.js"),
     "text-simplify": () => import("./text-simplify-CK2GFhq2.js"),
     "alt-text": () => Promise.resolve().then(() => altText)
@@ -7719,6 +7719,14 @@ function createWidgetStyles(config2) {
   return `
     :host {
       all: initial;
+      display: block !important;
+      position: fixed !important;
+      top: 0 !important; left: 0 !important;
+      width: 0 !important; height: 0 !important;
+      overflow: visible !important;
+      pointer-events: none !important;
+      z-index: ${z} !important;
+      contain: none !important;
       font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
       font-size: 16px;
       line-height: 1.5;
@@ -7759,6 +7767,7 @@ function createWidgetStyles(config2) {
       ${isBottom ? "bottom: 20px" : "top: 20px"};
       ${isRight ? "right: 20px" : "left: 20px"};
       z-index: ${z};
+      pointer-events: auto;
       width: 56px; height: 56px;
       border: none; border-radius: 16px;
       background: ${triggerBg || "linear-gradient(135deg, #545d8f, #3d4775)"};
@@ -7789,6 +7798,7 @@ function createWidgetStyles(config2) {
       position: fixed; top: 0; bottom: 0;
       ${isRight ? "right: 0" : "left: 0"};
       z-index: ${z - 1};
+      pointer-events: auto;
       width: min(${panelW}, 100vw); height: 100vh; height: 100dvh;
       display: flex; flex-direction: column;
       border-radius: ${panelRadius};
@@ -8323,7 +8333,12 @@ function createAltTextModule(aiService, initialLang = "de", serverConfig) {
   }
   function isValidImage(img) {
     if (img.closest("#accessify-root") || img.closest("accessify-widget")) return false;
-    if (img.complete && img.naturalWidth > 0 && (img.naturalWidth < 20 || img.naturalHeight < 20)) return false;
+    if (img.complete && img.naturalWidth > 0 && (img.naturalWidth < 50 || img.naturalHeight < 50)) return false;
+    const rect = img.getBoundingClientRect();
+    if (rect.width < 40 || rect.height < 40) return false;
+    const style = getComputedStyle(img);
+    if (style.display === "none" || style.visibility === "hidden" || style.opacity === "0") return false;
+    if (img.getAttribute("role") === "presentation" || img.getAttribute("aria-hidden") === "true") return false;
     return true;
   }
   function needsAltText(img) {
@@ -8411,7 +8426,7 @@ function createAltTextModule(aiService, initialLang = "de", serverConfig) {
   }
   function positionBadge(target, badge, tooltip) {
     const rect = target.getBoundingClientRect();
-    if (rect.width < 10 || rect.height < 10) {
+    if (rect.width < 40 || rect.height < 40 || rect.bottom < 0 || rect.top > window.innerHeight + 200 || rect.right < 0 || rect.left > window.innerWidth + 200) {
       badge.style.display = "none";
       tooltip.style.display = "none";
       return;
@@ -8866,6 +8881,7 @@ async function init(userConfig = {}) {
   containerEl.id = "accessify-root";
   containerEl.setAttribute("role", "complementary");
   containerEl.setAttribute("aria-label", t("widget.title", config.lang));
+  containerEl.style.cssText = "position:fixed!important;top:0!important;left:0!important;width:0!important;height:0!important;overflow:visible!important;pointer-events:none!important;z-index:" + (config.zIndex || 999999) + "!important;display:block!important;contain:none!important;";
   const shadow = containerEl.attachShadow({ mode: "open", delegatesFocus: true });
   const sheet = new CSSStyleSheet();
   sheet.replaceSync(createWidgetStyles(config));
@@ -8965,4 +8981,4 @@ export {
   init as i,
   t
 };
-//# sourceMappingURL=index-lQVz5TBk.js.map
+//# sourceMappingURL=index-Moz7iASF.js.map