@oksigenia/access-panel 0.6.0 → 0.7.0

package/dist/web-component.js

@@ -60,13 +60,7 @@ function resolveEnabledControls(controlsAttr, excludeAttr) {
   }
   return enabled;
 }
-var NON_SCOPABLE_CONTROLS = [
-  "grayscale",
-  "reading-guide",
-  "reading-mask",
-  "big-cursor",
-  "colorblind"
-];
+var NON_SCOPABLE_CONTROLS = ["grayscale", "colorblind"];
 function scopedControls(enabled) {
   const out = new Set(enabled);
   for (const id of NON_SCOPABLE_CONTROLS) out.delete(id);
@@ -124,6 +118,7 @@ function buildPanelHtml(opts) {
   const enabled = opts.enabled ?? new Set(ALL_CONTROLS);
   const showTrigger = opts.showTrigger ?? true;
   const showPresets = opts.showPresets ?? true;
+  const flatLayout = opts.flatLayout ?? false;
   const trig = TRIGGER_ICONS[triggerIcon];
   const multi = (id, prefix, levels, label, icon, full = false) => {
     if (!enabled.has(id)) return "";
@@ -158,44 +153,61 @@ function buildPanelHtml(opts) {
   };
   const presetButtons = showPresets ? PRESET_IDS.filter((id) => presetIsAvailable(id, enabled)).map((id) => preset(id, presetLabels[id])) : [];
   const presetsBlock = presetButtons.length ? `<h4 class="oks-access-title">${escapeHtml(t.presets)}</h4><div class="oks-access-presets">${presetButtons.join("")}</div>` : "";
-  const triggerBlock = showTrigger ? `
-<div class="oks-access-wrapper" id="oks-wrapper" data-position="${opts.position}">
-  <button class="oks-access-btn" id="oks-trigger" part="trigger" data-trigger-icon="${triggerIcon}" aria-label="${escapeAttr(t.title)}" aria-expanded="false" aria-controls="oks-panel" type="button">
-    ${trig}
-  </button>
-  <span class="oks-active-badge"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4"><polyline points="20 6 9 17 4 12"/></svg></span>
-</div>` : "";
-  return `${triggerBlock}
-<div class="oks-access-panel" id="oks-panel" role="dialog" aria-modal="true" aria-labelledby="oks-panel-title" inert>
-  <div class="oks-access-header">
-    <h3 id="oks-panel-title">${escapeHtml(t.title)}</h3>
-    <button class="oks-access-close" id="oks-close" aria-label="${escapeAttr(t.close)}" type="button">${ICON_CLOSE}</button>
-  </div>
-  <div class="oks-access-content">
-    ${presetsBlock}
-    ${section(t.txt, [
+  const textBtns = [
     multi("text-size", "oks-zoom", 4, t.size, ICON_TXT),
     multi("line-height", "oks-lh", 3, t.lh, ICON_LH),
     multi("text-align", "oks-align", 3, t.align, ICON_ALIGN),
     toggle("readable-font", "oks-a11y-font", t.font, ICON_FONT),
     toggle("dyslexia-font", "oks-dyslexia", t.dyslexia, ICON_DYSLEXIA),
     multi("letter-spacing", "oks-ls", 3, t.ls, ICON_LS)
-  ])}
-    ${section(t.vis, [
+  ];
+  const visBtns = [
     toggle("contrast", "oks-a11y-contrast", t.contrast, ICON_CONTRAST),
     overlay("grayscale", "oks-overlay-gray", t.gray, ICON_GRAY),
     toggle("hide-images", "oks-a11y-hide", t.hide, ICON_HIDE),
     toggle("highlight-links", "oks-a11y-links", t.links, ICON_LINK),
-    multi("colorblind", "oks-colorblind", 3, t.cb, ICON_COLORBLIND, true)
-  ])}
-    ${section(t.ori, [
+    multi("colorblind", "oks-colorblind", 3, t.cb, ICON_COLORBLIND, !flatLayout)
+  ];
+  const oriBtns = [
     simple("reading-guide", "guide", t.guide, ICON_GUIDE),
     simple("reading-mask", "mask", t.mask, ICON_MASK),
     toggle("big-cursor", "oks-big-cursor", t.cursor, ICON_CURSOR),
     toggle("big-targets", "oks-a11y-bigtargets", t.targets, ICON_TARGETS),
     toggle("pause-anim", "oks-a11y-pause", t.pause, ICON_PAUSE),
     toggle("focus", "oks-a11y-focus", t.focus, ICON_FOCUS)
-  ])}
+  ];
+  const addFullWidth = (btn) => btn.replace('class="oks-access-opt', 'class="oks-access-opt full-width');
+  const flatContent = () => {
+    const groups = [
+      { title: t.txt, items: textBtns.filter(Boolean) },
+      { title: t.vis, items: visBtns.filter(Boolean) },
+      { title: t.ori, items: oriBtns.filter(Boolean) }
+    ].filter((g) => g.items.length > 0);
+    const total = groups.reduce((n, g) => n + g.items.length, 0);
+    if (total % 2 === 1 && groups.length > 0) {
+      const last = groups[groups.length - 1];
+      last.items[last.items.length - 1] = addFullWidth(last.items[last.items.length - 1]);
+    }
+    const inner = groups.map((g) => `<h4 class="oks-access-title oks-sr-only">${escapeHtml(g.title)}</h4>${g.items.join("")}`).join("");
+    return `<div class="oks-access-grid oks-flat">${inner}</div>`;
+  };
+  const controlsHtml = flatLayout ? flatContent() : section(t.txt, textBtns) + section(t.vis, visBtns) + section(t.ori, oriBtns);
+  const triggerBlock = showTrigger ? `
+<div class="oks-access-wrapper" id="oks-wrapper" data-position="${opts.position}">
+  <button class="oks-access-btn" id="oks-trigger" part="trigger" data-trigger-icon="${triggerIcon}" aria-label="${escapeAttr(t.title)}" aria-expanded="false" aria-controls="oks-panel" type="button">
+    ${trig}
+  </button>
+  <span class="oks-active-badge"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4"><polyline points="20 6 9 17 4 12"/></svg></span>
+</div>` : "";
+  return `${triggerBlock}
+<div class="oks-access-panel" id="oks-panel" role="dialog" aria-modal="true" aria-labelledby="oks-panel-title" inert>
+  <div class="oks-access-header">
+    <h3 id="oks-panel-title">${escapeHtml(t.title)}</h3>
+    <button class="oks-access-close" id="oks-close" aria-label="${escapeAttr(t.close)}" type="button">${ICON_CLOSE}</button>
+  </div>
+  <div class="oks-access-content">
+    ${presetsBlock}
+    ${controlsHtml}
   </div>
   <div class="oks-access-footer">
     <button class="oks-access-reset" id="oks-reset" type="button">${escapeHtml(t.reset)}</button>
@@ -371,8 +383,69 @@ function bindPanelBehavior(root, opts = {}) {
     return noopController();
   }
   let state = loadState(storageKey);
+  const scoped = opts.scopeEl !== void 0;
+  const GLOBAL_KEY = "oksiac::global";
+  const GLOBAL_MAP = [
+    { flag: "bigCursor", cls: "oks-big-cursor", match: (b) => b.getAttribute("data-class") === "oks-big-cursor" },
+    { flag: "readingGuide", cls: "oks-a11y-guide", match: (b) => b.getAttribute("data-action") === "guide" },
+    { flag: "readingMask", cls: "oks-a11y-mask", match: (b) => b.getAttribute("data-action") === "mask" }
+  ];
+  const globalOfferableOf = (b) => GLOBAL_MAP.find((x) => x.match(b));
+  const loadGlobal = () => {
+    try {
+      const r = JSON.parse(localStorage.getItem(GLOBAL_KEY) ?? "{}");
+      return { bigCursor: !!r.bigCursor, readingGuide: !!r.readingGuide, readingMask: !!r.readingMask };
+    } catch {
+      return { bigCursor: false, readingGuide: false, readingMask: false };
+    }
+  };
+  const saveGlobal = (g) => {
+    try {
+      if (g.bigCursor || g.readingGuide || g.readingMask) localStorage.setItem(GLOBAL_KEY, JSON.stringify(g));
+      else localStorage.removeItem(GLOBAL_KEY);
+    } catch {
+    }
+  };
+  const applyGlobal = (g) => {
+    document.body.classList.toggle("oks-big-cursor", g.bigCursor);
+    document.body.classList.toggle("oks-a11y-guide", g.readingGuide);
+    document.body.classList.toggle("oks-a11y-mask", g.readingMask);
+    for (const btn of opts$) {
+      const m = globalOfferableOf(btn);
+      if (!m) continue;
+      btn.classList.toggle("is-active", g[m.flag]);
+      btn.setAttribute("aria-pressed", g[m.flag] ? "true" : "false");
+    }
+  };
+  const refreshGlobal = () => {
+    if (scoped) applyGlobal(loadGlobal());
+  };
+  const syncGlobalFromState = () => {
+    if (!scoped) return;
+    const g = loadGlobal();
+    let changed = false;
+    if (state.bigCursor) {
+      g.bigCursor = true;
+      state.bigCursor = false;
+      changed = true;
+    }
+    if (state.readingGuide) {
+      g.readingGuide = true;
+      state.readingGuide = false;
+      changed = true;
+    }
+    if (state.readingMask) {
+      g.readingMask = true;
+      state.readingMask = false;
+      changed = true;
+    }
+    if (changed) {
+      saveGlobal(g);
+      applyGlobal(g);
+      document.dispatchEvent(new CustomEvent("oksiac:globalchange"));
+    }
+  };
   function applyState() {
-    const scoped = opts.scopeEl !== void 0;
     const fxRoot = scoped ? opts.scopeEl ?? null : document.body;
     const rootEl = document.documentElement;
     if (fxRoot) {
@@ -407,6 +480,7 @@ function bindPanelBehavior(root, opts = {}) {
   }
   function syncButtonsFromState() {
     for (const btn of opts$) {
+      if (scoped && globalOfferableOf(btn)) continue;
       const action = btn.getAttribute("data-action");
       if (action === "multi" || action === "colorblind") {
         const prefix = btn.getAttribute("data-prefix") ?? "";
@@ -441,6 +515,17 @@ function bindPanelBehavior(root, opts = {}) {
   }
   const onOptClick = (e) => {
     const btn = e.currentTarget;
+    if (scoped) {
+      const go = globalOfferableOf(btn);
+      if (go) {
+        const g = loadGlobal();
+        g[go.flag] = !g[go.flag];
+        saveGlobal(g);
+        applyGlobal(g);
+        document.dispatchEvent(new CustomEvent("oksiac:globalchange"));
+        return;
+      }
+    }
     const action = btn.getAttribute("data-action");
     if (action === "multi") {
       const prefix = btn.getAttribute("data-prefix") ?? "";
@@ -469,6 +554,7 @@ function bindPanelBehavior(root, opts = {}) {
       if (id && PRESETS[id]) Object.assign(state, filterPresetForEnabled(id, enabled));
       btn.classList.add("is-flashing");
       setTimeout(() => btn.classList.remove("is-flashing"), 250);
+      syncGlobalFromState();
     }
     applyState();
     saveState(storageKey, state);
@@ -477,6 +563,12 @@ function bindPanelBehavior(root, opts = {}) {
     state = { ...DEFAULT_STATE };
     applyState();
     saveState(storageKey, state);
+    if (scoped) {
+      const cleared = { bigCursor: false, readingGuide: false, readingMask: false };
+      saveGlobal(cleared);
+      applyGlobal(cleared);
+      document.dispatchEvent(new CustomEvent("oksiac:globalchange"));
+    }
   };
   let opener = null;
   let ignoreDocClose = false;
@@ -644,14 +736,16 @@ function bindPanelBehavior(root, opts = {}) {
     saveNudge();
   };
   const onMove = (e) => {
-    if (!state.readingGuide && !state.readingMask) return;
+    const guideOn = document.body.classList.contains("oks-a11y-guide");
+    const maskOn = document.body.classList.contains("oks-a11y-mask");
+    if (!guideOn && !maskOn) return;
     const y = e.touches?.[0]?.clientY ?? e.clientY;
     if (typeof y !== "number") return;
-    if (state.readingGuide) {
+    if (guideOn) {
       const guide = document.getElementById("oks-reading-guide");
       if (guide) guide.style.top = `${y}px`;
     }
-    if (state.readingMask) {
+    if (maskOn) {
       const mask = document.getElementById("oks-reading-mask");
       if (mask) mask.style.setProperty("--oks-mask-y", `${y}px`);
     }
@@ -667,9 +761,15 @@ function bindPanelBehavior(root, opts = {}) {
   const onReposition = () => {
     if (opts.scopeEl && panel.classList.contains("is-open")) positionScopedDialog();
   };
-  if (opts.scopeEl !== void 0) {
+  const onGlobalChange = () => refreshGlobal();
+  const onStorage = (e) => {
+    if (e.key === GLOBAL_KEY) refreshGlobal();
+  };
+  if (scoped) {
     window.addEventListener("scroll", onReposition, true);
     window.addEventListener("resize", onReposition);
+    document.addEventListener("oksiac:globalchange", onGlobalChange);
+    window.addEventListener("storage", onStorage);
   }
   if (nudgeMax > 0 && trigger) {
     loadNudge();
@@ -682,6 +782,7 @@ function bindPanelBehavior(root, opts = {}) {
     trigger.addEventListener("keydown", onTriggerKey);
   }
   applyState();
+  refreshGlobal();
   const dispose = () => {
     trigger?.removeEventListener("click", onTriggerClick);
     closeBtn.removeEventListener("click", closePanel);
@@ -691,9 +792,11 @@ function bindPanelBehavior(root, opts = {}) {
     document.removeEventListener("keydown", onKeyDown);
     document.removeEventListener("mousemove", onMove);
     document.removeEventListener("touchmove", onMove);
-    if (opts.scopeEl !== void 0) {
+    if (scoped) {
       window.removeEventListener("scroll", onReposition, true);
       window.removeEventListener("resize", onReposition);
+      document.removeEventListener("oksiac:globalchange", onGlobalChange);
+      window.removeEventListener("storage", onStorage);
     }
     trigger?.removeEventListener("pointerdown", onPointerDown);
     document.removeEventListener("pointermove", onPointerMove);
@@ -830,6 +933,19 @@ var PANEL_CSS = `
   text-transform: uppercase;
   color: #888;
 }
+/* Screen-reader-only: keeps the category headings in the accessibility tree
+   (flat scoped layout) while taking them out of the grid flow so they don't
+   force a visual row break or occupy a cell. */
+.oks-sr-only {
+  position: absolute !important;
+  width: 1px; height: 1px;
+  margin: 0; padding: 0;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
 .oks-access-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
 .oks-access-presets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
 .oks-preset {
@@ -1001,18 +1117,22 @@ body.oks-ls-1 * { letter-spacing: 0.05em !important; }
 body.oks-ls-2 * { letter-spacing: 0.10em !important; }
 body.oks-ls-3 * { letter-spacing: 0.16em !important; }
 
+/* Focus highlight colour is themeable via --oks-focus-color (default #005fcc):
+   set it on :root for a dark theme so the highlight stays visible. The
+   persistent "all interactive" dashed derives a 45% tint from it; the glow can
+   be overridden on its own with --oks-focus-glow. */
 body.oks-a11y-focus a:not(oksigenia-access-panel):not(oksigenia-access-panel *),
 body.oks-a11y-focus button:not(oksigenia-access-panel):not(oksigenia-access-panel *),
 body.oks-a11y-focus input,
 body.oks-a11y-focus select,
 body.oks-a11y-focus textarea {
-  outline: 2px dashed rgba(0, 95, 204, 0.45) !important;
+  outline: 2px dashed color-mix(in srgb, var(--oks-focus-color, #005fcc) 45%, transparent) !important;
   outline-offset: 2px !important;
 }
 body.oks-a11y-focus *:focus-visible {
-  outline: 3px solid #005fcc !important;
+  outline: 3px solid var(--oks-focus-color, #005fcc) !important;
   outline-offset: 3px !important;
-  box-shadow: 0 0 0 6px rgba(0, 95, 204, 0.25) !important;
+  box-shadow: 0 0 0 6px var(--oks-focus-glow, color-mix(in srgb, var(--oks-focus-color, #005fcc) 25%, transparent)) !important;
 }
 
 body.oks-a11y-contrast.oks-a11y-focus *:focus,
@@ -1149,13 +1269,13 @@ ${s}.oks-a11y-focus button,
 ${s}.oks-a11y-focus input,
 ${s}.oks-a11y-focus select,
 ${s}.oks-a11y-focus textarea {
-  outline: 2px dashed rgba(0, 95, 204, 0.45) !important;
+  outline: 2px dashed color-mix(in srgb, var(--oks-focus-color, #005fcc) 45%, transparent) !important;
   outline-offset: 2px !important;
 }
 ${s}.oks-a11y-focus *:focus-visible {
-  outline: 3px solid #005fcc !important;
+  outline: 3px solid var(--oks-focus-color, #005fcc) !important;
   outline-offset: 3px !important;
-  box-shadow: 0 0 0 6px rgba(0, 95, 204, 0.25) !important;
+  box-shadow: 0 0 0 6px var(--oks-focus-glow, color-mix(in srgb, var(--oks-focus-color, #005fcc) 25%, transparent)) !important;
 }
 
 ${s}.oks-a11y-contrast, ${s}.oks-a11y-contrast * {
@@ -1360,7 +1480,9 @@ var OksigeniaAccessPanelElement = class extends HTMLElement {
       position,
       enabled,
       showTrigger,
-      showPresets
+      showPresets,
+      flatLayout: scope != null
+      // scoped panels use the flat (no-category) layout
     });
     shadow.innerHTML = `<style>${PANEL_CSS}${positionCss(position, positionMobile)}</style>${html}`;
     const scopeEl = scope ? document.querySelector(scope) : void 0;