feat: add a11y panel

2025-12-05 14:17:50 +08:00 · 2025-07-21 21:11:22 +08:00
parent dc778836f1
commit 5b376cc116
5 changed files with 433 additions and 71 deletions
--- a/assets/css/compiled/main.css
+++ b/assets/css/compiled/main.css
@@ -174,6 +174,69 @@ body.zen-mode-enable {
 .chroma .gl {
  text-decoration-line: underline;
 }
+.a11y-panel-enter-active {
+  animation: slideInFromTop 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+}
+.a11y-panel-leave-active {
+  animation: slideOutToTop 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+}
+.ios-toggle {
+  position: relative;
+  width: 42px;
+  height: 24px;
+  background: #e5e5e5;
+  border-radius: 12px;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+  pointer-events: auto;
+}
+.ios-toggle input {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  cursor: pointer;
+  z-index: 1;
+}
+.ios-toggle::after {
+  content: "";
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 20px;
+  height: 20px;
+  background: white;
+  border-radius: 50%;
+  transition: transform 0.3s ease, background-color 0.3s ease;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+  z-index: 0;
+}
+.ios-toggle input:checked + .toggle-track::after {
+  transform: translateX(18px);
+}
+.ios-toggle input:checked + .toggle-track {
+  background: rgba(var(--color-primary-500), 1);
+}
+.ios-toggle input:checked ~ .ios-toggle-ball {
+  transform: translateX(18px);
+}
+.ios-toggle.is-checked {
+  background: rgba(var(--color-primary-500), 1);
+}
+.ios-toggle:has(input:checked) {
+  background: rgba(var(--color-primary-500), 1);
+}
+.ios-toggle:has(input:checked)::after {
+  transform: translateX(18px);
+}
+.dark .ios-toggle {
+  background: #404040;
+}
+.dark .ios-toggle::after {
+  background: #f5f5f5;
+}
@layer theme, base, components, utilities;
@layer theme {
  :root, :host {
@@ -428,6 +491,9 @@ body.zen-mode-enable {
  .top-0 {
    top: calc(var(--spacing) * 0);
  }
+  .top-1\/2 {
+    top: calc(1/2 * 100%);
+  }
  .top-20 {
    top: calc(var(--spacing) * 20);
  }
@@ -446,6 +512,9 @@ body.zen-mode-enable {
  .left-0 {
    left: calc(var(--spacing) * 0);
  }
+  .left-1\/2 {
+    left: calc(1/2 * 100%);
+  }
  .left-\[calc\(max\(-50vw\,-800px\)\+50\%\)\] {
    left: calc(max(-50vw, -800px) + 50%);
  }
@@ -1245,6 +1314,9 @@ body.zen-mode-enable {
  .h-3 {
    height: calc(var(--spacing) * 3);
  }
+  .h-5 {
+    height: calc(var(--spacing) * 5);
+  }
  .h-6 {
    height: calc(var(--spacing) * 6);
  }
@@ -1320,6 +1392,9 @@ body.zen-mode-enable {
  .w-3 {
    width: calc(var(--spacing) * 3);
  }
+  .w-5 {
+    width: calc(var(--spacing) * 5);
+  }
  .w-6 {
    width: calc(var(--spacing) * 6);
  }
@@ -1335,6 +1410,9 @@ body.zen-mode-enable {
  .w-36 {
    width: calc(var(--spacing) * 36);
  }
+  .w-80 {
+    width: calc(var(--spacing) * 80);
+  }
  .w-\[15\%\] {
    width: 15%;
  }
@@ -1434,6 +1512,10 @@ body.zen-mode-enable {
  .border-collapse {
    border-collapse: collapse;
  }
+  .-translate-x-1\/2 {
+    --tw-translate-x: calc(calc(1/2 * 100%) * -1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
  .-translate-x-full {
    --tw-translate-x: -100%;
    translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -1442,6 +1524,10 @@ body.zen-mode-enable {
    --tw-translate-x: 100%;
    translate: var(--tw-translate-x) var(--tw-translate-y);
  }
+  .-translate-y-1\/2 {
+    --tw-translate-y: calc(calc(1/2 * 100%) * -1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
  .-translate-y-8 {
    --tw-translate-y: calc(var(--spacing) * -8);
    translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -1533,6 +1619,13 @@ body.zen-mode-enable {
      margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
    }
  }
+  .space-y-5 {
+    :where(& > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(calc(var(--spacing) * 5) * var(--tw-space-y-reverse));
+      margin-block-end: calc(calc(var(--spacing) * 5) * calc(1 - var(--tw-space-y-reverse)));
+    }
+  }
  .space-y-10 {
    :where(& > :not(:last-child)) {
      --tw-space-y-reverse: 0;
@@ -1755,6 +1848,9 @@ body.zen-mode-enable {
  .bg-neutral {
    background-color: rgba(var(--color-neutral), 1);
  }
+  .bg-neutral-50 {
+    background-color: rgba(var(--color-neutral-50), 1);
+  }
  .bg-neutral-100 {
    background-color: rgba(var(--color-neutral-100), 1);
  }
@@ -1956,6 +2052,9 @@ body.zen-mode-enable {
  .pr-0 {
    padding-right: calc(var(--spacing) * 0);
  }
+  .pr-8 {
+    padding-right: calc(var(--spacing) * 8);
+  }
  .pr-\[24px\] {
    padding-right: 24px;
  }
@@ -2563,6 +2662,13 @@ body.zen-mode-enable {
      }
    }
  }
+  .hover\:text-neutral-700 {
+    &:hover {
+      @media (hover: hover) {
+        color: rgba(var(--color-neutral-700), 1);
+      }
+    }
+  }
  .hover\:text-primary-400 {
    &:hover {
      @media (hover: hover) {
@@ -2661,6 +2767,11 @@ body.zen-mode-enable {
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }
+  .focus\:border-primary-500 {
+    &:focus {
+      border-color: rgba(var(--color-primary-500), 1);
+    }
+  }
  .focus\:bg-primary-100 {
    &:focus {
      background-color: rgba(var(--color-primary-100), 1);
@@ -2676,6 +2787,11 @@ body.zen-mode-enable {
      opacity: 90%;
    }
  }
+  .focus\:ring-primary-500 {
+    &:focus {
+      --tw-ring-color: rgba(var(--color-primary-500), 1);
+    }
+  }
  .focus\:outline-2 {
    &:focus {
      outline-style: var(--tw-outline-style);
@@ -3513,6 +3629,15 @@ body.zen-mode-enable {
      }
    }
  }
+  .dark\:hover\:text-neutral-200 {
+    &:is(.dark *) {
+      &:hover {
+        @media (hover: hover) {
+          color: rgba(var(--color-neutral-200), 1);
+        }
+      }
+    }
+  }
  .dark\:hover\:text-neutral-800 {
    &:is(.dark *) {
      &:hover {
@@ -3721,44 +3846,29 @@ a {
 pre {
  text-align: left;
 }
+.thumbnail, .thumbnail_card, .thumbnail_card_related, .thumbnail_card_term, .single_hero_basic, .single_hero_background {
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center;
+}
 .thumbnail {
  min-width: 300px;
  height: 180px;
-  background-repeat: no-repeat;
-  background-size: cover;
-  background-position: center;
 }
 .thumbnail_card {
  height: 200px;
-  background-repeat: no-repeat;
-  background-size: cover;
-  background-position: center;
 }
 .thumbnail_card_related {
  height: 150px;
-  background-repeat: no-repeat;
-  background-size: cover;
-  background-position: center;
 }
 .thumbnail_card_term {
  height: 150px;
-  background-repeat: no-repeat;
-  background-size: cover;
-  background-position: center;
-}
-.single_hero_basic {
-  background-repeat: no-repeat;
-  background-size: cover;
-  background-position: center;
 }
 .single_hero_round {
  max-height: 50vh;
  object-fit: cover;
 }
 .single_hero_background {
-  background-repeat: no-repeat;
-  background-size: cover;
-  background-position: center;
  z-index: -10;
 }
 .hero_gradient {
--- a/assets/css/components/a11y.css
+++ b/assets/css/components/a11y.css
@@ -0,0 +1,77 @@
+.a11y-panel-enter-active {
+  animation: slideInFromTop 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+}
+
+.a11y-panel-leave-active {
+  animation: slideOutToTop 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+}
+
+.ios-toggle {
+  position: relative;
+  width: 42px;
+  height: 24px;
+  background: #e5e5e5;
+  border-radius: 12px;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+  pointer-events: auto;
+}
+
+.ios-toggle input {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  cursor: pointer;
+  z-index: 1;
+}
+
+.ios-toggle::after {
+  content: "";
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 20px;
+  height: 20px;
+  background: white;
+  border-radius: 50%;
+  transition:
+    transform 0.3s ease,
+    background-color 0.3s ease;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+  z-index: 0;
+}
+
+.ios-toggle input:checked + .toggle-track::after {
+  transform: translateX(18px);
+}
+
+.ios-toggle input:checked + .toggle-track {
+  background: rgba(var(--color-primary-500), 1);
+}
+
+.ios-toggle input:checked ~ .ios-toggle-ball {
+  transform: translateX(18px);
+}
+
+.ios-toggle.is-checked {
+  background: rgba(var(--color-primary-500), 1);
+}
+
+.ios-toggle:has(input:checked) {
+  background: rgba(var(--color-primary-500), 1);
+}
+
+.ios-toggle:has(input:checked)::after {
+  transform: translateX(18px);
+}
+
+.dark .ios-toggle {
+  background: #404040;
+}
+
+.dark .ios-toggle::after {
+  background: #f5f5f5;
+}
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -2,6 +2,7 @@

@import "./components/zen-mode.css";
@import "./components/chroma.css";
+@import "./components/a11y.css";

@import "tailwindcss";
@config "../../tailwind.config.js";
--- a/assets/js/background-blur.js
+++ b/assets/js/background-blur.js
@@ -1,8 +1,20 @@
 (() => {
-  const scripts = document.querySelectorAll('script[data-target-id]');
-  
-  const isA11yMode = () => {
-    return localStorage.getItem("a11yMode") === "true";
+  const scripts = document.querySelectorAll("script[data-target-id]");
+
+  const getA11ySettings = () => {
+    const settings = localStorage.getItem("a11ySettings");
+    return settings
+      ? JSON.parse(settings)
+      : {
+          disableBlur: false,
+          disableImages: false,
+          fontSize: "16px",
+          underlineLinks: false,
+        };
+  };
+
+  const saveA11ySettings = (settings) => {
+    localStorage.setItem("a11ySettings", JSON.stringify(settings));
  };

  const getScrollOpacity = (scrollDivisor) => {
@@ -12,9 +24,10 @@

  const applyBlurState = (blurElement, scrollDivisor, targetId, imageElement, imageUrl) => {
    if (!blurElement) return;
+    const settings = getA11ySettings();
    const isMenuBlur = targetId === "menu-blur";

-    if (isA11yMode()) {
+    if (settings.disableBlur) {
      blurElement.setAttribute("aria-hidden", "true");
      if (!isMenuBlur) {
        blurElement.style.display = "none";
@@ -23,30 +36,139 @@
        blurElement.style.display = "";
        blurElement.style.opacity = getScrollOpacity(scrollDivisor);
      }
-      // Hide image in a11y mode
-      if (imageElement) {
-        imageElement.style.display = "none";
-      }
    } else {
      blurElement.style.display = "";
      blurElement.style.opacity = getScrollOpacity(scrollDivisor);
      blurElement.removeAttribute("aria-hidden");
-      // Show image in normal mode
-      if (imageElement) {
+    }
+
+    if (imageElement) {
+      if (settings.disableImages) {
+        imageElement.style.display = "none";
+      } else {
        imageElement.style.display = "";
-        // Re-apply image source if it was removed
-        if (imageUrl && !imageElement.getAttribute('src')) {
-          imageElement.setAttribute('src', imageUrl);
+        if (imageUrl && !imageElement.getAttribute("src")) {
+          imageElement.setAttribute("src", imageUrl);
        }
      }
    }
  };

-  scripts.forEach(script => {
+  const applyFontSize = (fontSizePx) => {
+    document.documentElement.style.fontSize = fontSizePx;
+  };
+
+  const applyUnderlineLinks = (enabled) => {
+    let styleElement = document.getElementById("a11y-underline-links");
+    if (enabled) {
+      if (!styleElement) {
+        styleElement = document.createElement("style");
+        styleElement.id = "a11y-underline-links";
+        styleElement.textContent = "a { text-decoration: underline !important; }";
+        document.head.appendChild(styleElement);
+      }
+    } else {
+      if (styleElement) {
+        styleElement.remove();
+      }
+    }
+  };
+
+  const applyA11ySettings = () => {
+    const settings = getA11ySettings();
+
+    scripts.forEach((script) => {
+      const targetId = script.getAttribute("data-target-id");
+      const scrollDivisor = Number(script.getAttribute("data-scroll-divisor") || 300);
+      const imageId = script.getAttribute("data-image-id");
+      const imageUrl = script.getAttribute("data-image-url");
+
+      const blurElement = document.getElementById(targetId);
+      const imageElement = imageId ? document.getElementById(imageId) : null;
+      applyBlurState(blurElement, scrollDivisor, targetId, imageElement, imageUrl);
+    });
+
+    applyFontSize(settings.fontSize);
+    applyUnderlineLinks(settings.underlineLinks);
+  };
+
+  const updateA11ySetting = (key, value) => {
+    const settings = getA11ySettings();
+    settings[key] = value;
+    saveA11ySettings(settings);
+    applyA11ySettings();
+  };
+
+  const toggleA11yPanel = () => {
+    const panel = document.getElementById("a11y-panel");
+    const overlay = document.getElementById("a11y-overlay");
+    const button = document.getElementById("a11y-toggle");
+
+    if (overlay.classList.contains("hidden")) {
+      overlay.classList.remove("hidden");
+      panel.classList.remove("hidden");
+      button.setAttribute("aria-pressed", "true");
+      button.setAttribute("aria-expanded", "true");
+    } else {
+      overlay.classList.add("hidden");
+      panel.classList.add("hidden");
+      button.setAttribute("aria-pressed", "false");
+      button.setAttribute("aria-expanded", "false");
+    }
+  };
+
+  const initA11yPanel = () => {
+    const settings = getA11ySettings();
+
+    document.getElementById("disable-blur").checked = settings.disableBlur;
+    document.getElementById("disable-images").checked = settings.disableImages;
+
+    const fontSizeSelect = document.getElementById("font-size-select");
+    fontSizeSelect.value = settings.fontSize;
+
+    document.getElementById("underline-links").checked = settings.underlineLinks;
+
+    document.getElementById("disable-blur").addEventListener("change", (e) => {
+      updateA11ySetting("disableBlur", e.target.checked);
+    });
+
+    document.getElementById("disable-images").addEventListener("change", (e) => {
+      updateA11ySetting("disableImages", e.target.checked);
+    });
+
+    document.getElementById("font-size-select").addEventListener("change", (e) => {
+      updateA11ySetting("fontSize", e.target.value);
+    });
+
+    document.getElementById("underline-links").addEventListener("change", (e) => {
+      updateA11ySetting("underlineLinks", e.target.checked);
+    });
+
+    document.querySelectorAll(".ios-toggle").forEach((toggle) => {
+      toggle.addEventListener("click", () => {
+        const checkbox = toggle.querySelector('input[type="checkbox"]');
+        checkbox.checked = !checkbox.checked;
+        checkbox.dispatchEvent(new Event("change"));
+      });
+    });
+
+    document.addEventListener("click", (e) => {
+      const overlay = document.getElementById("a11y-overlay");
+      const button = document.getElementById("a11y-toggle");
+      if (e.target === overlay) {
+        overlay.classList.add("hidden");
+        document.getElementById("a11y-panel").classList.add("hidden");
+        button.setAttribute("aria-pressed", "false");
+        button.setAttribute("aria-expanded", "false");
+      }
+    });
+  };
+
+  scripts.forEach((script) => {
    const targetId = script.getAttribute("data-target-id");
    const scrollDivisor = Number(script.getAttribute("data-scroll-divisor") || 300);
    const imageId = script.getAttribute("data-image-id");
-    const imageUrl = script.getAttribute("data-image-url"); // Get image URL from data attribute
+    const imageUrl = script.getAttribute("data-image-url");

    const blurElement = document.getElementById(targetId);
    const imageElement = imageId ? document.getElementById(imageId) : null;
@@ -57,24 +179,20 @@
      applyBlurState(blurElement, scrollDivisor, targetId, imageElement, imageUrl);

      window.addEventListener("scroll", () => {
-        if (!isA11yMode() || targetId === "menu-blur") {
+        const settings = getA11ySettings();
+        if (!settings.disableBlur || targetId === "menu-blur") {
          blurElement.style.opacity = getScrollOpacity(scrollDivisor);
        }
      });
    }
  });

-  window.toggleA11yMode = function() {
-    localStorage.setItem("a11yMode", String(!isA11yMode()));
-    scripts.forEach(script => {
-      const targetId = script.getAttribute("data-target-id");
-      const scrollDivisor = Number(script.getAttribute("data-scroll-divisor") || 300);
-      const imageId = script.getAttribute("data-image-id");
-      const imageUrl = script.getAttribute("data-image-url"); // Get image URL from data attribute
+  window.toggleA11yPanel = toggleA11yPanel;

-      const blurElement = document.getElementById(targetId);
-      const imageElement = imageId ? document.getElementById(imageId) : null;
-      applyBlurState(blurElement, scrollDivisor, targetId, imageElement, imageUrl);
-    });
-  };
+  document.addEventListener("DOMContentLoaded", () => {
+    applyA11ySettings();
+    if (document.getElementById("a11y-panel")) {
+      initA11yPanel();
+    }
+  });
 })();
--- a/layouts/partials/header/basic.html
+++ b/layouts/partials/header/basic.html
@@ -35,16 +35,7 @@

    {{ partial "translations.html" . }}
    {{ if .Site.Params.enableA11y | default false }}
-      <button
-        id="a11y-toggle"
-        aria-label="Toggle accessibility background animation"
-        type="button"
-        class="text-base hover:text-primary-600 dark:hover:text-primary-400"
-        onclick="toggleA11yMode()"
-        role="button"
-        aria-pressed="false">
-        {{ partial "icon.html" "a11y" }}
-      </button>
+      {{ template "HeaderA11y" . }}
    {{ end }}

    {{ if .Site.Params.enableSearch | default false }}
@@ -82,18 +73,8 @@
    <span></span>

    {{ partial "translations.html" . }}
-
    {{ if .Site.Params.enableA11y | default false }}
-      <button
-        id="a11y-toggle"
-        aria-label="Toggle accessibility background animation"
-        type="button"
-        class="text-base hover:text-primary-600 dark:hover:text-primary-400"
-        onclick="toggleA11yMode()"
-        role="button"
-        aria-pressed="false">
-        {{ partial "icon.html" "a11y" }}
-      </button>
+      {{ template "HeaderA11y" . }}
    {{ end }}

    {{ if .Site.Params.enableSearch | default false }}
@@ -178,6 +159,79 @@
  </div>
 {{ end }}

+{{ define "HeaderA11y" }}
+  <div class="flex items-center">
+    <button
+      id="a11y-toggle"
+      aria-label="Open accessibility panel"
+      aria-expanded="false"
+      type="button"
+      class="text-base hover:text-primary-600 dark:hover:text-primary-400"
+      onclick="toggleA11yPanel()"
+      role="button"
+      aria-pressed="false">
+      {{ partial "icon.html" "a11y" }}
+    </button>
+
+    <div id="a11y-overlay" class="fixed inset-0 z-500 hidden"></div>
+
+    <div
+      id="a11y-panel"
+      role="dialog"
+      aria-labelledby="a11y-panel-title"
+      class="a11y-panel-enter fixed hidden z-500 p-6 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-80 rounded-lg shadow-xl bg-neutral-50 dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700"
+      style="min-width: 20rem;">
+      <div class="flex items-center justify-between mb-6">
+        <h3 id="a11y-panel-title" class="text-lg font-semibold text-neutral-900 dark:text-neutral-100">
+          Accessibility settings
+        </h3>
+        <button
+          onclick="toggleA11yPanel()"
+          class="text-neutral-500 hover:text-neutral-700 dark:text-neutral-400 dark:hover:text-neutral-200"
+          aria-label="Close a11y panel">
+          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+          </svg>
+        </button>
+      </div>
+
+      <div class="space-y-5">
+        {{ $toggles := slice
+          (dict "id" "disable-blur" "label" "Disable background blur")
+          (dict "id" "disable-images" "label" "Disable background image")
+          (dict "id" "underline-links" "label" "Show link underline")
+        }}
+
+        {{ range $toggles }}
+          <div class="flex items-center justify-between">
+            <label for="{{ .id }}" class="text-sm font-medium text-neutral-700 dark:text-neutral-300">
+              {{ .label }}
+            </label>
+            <div class="ios-toggle">
+              <input type="checkbox" id="{{ .id }}">
+            </div>
+          </div>
+        {{ end }}
+
+
+        <div class="flex items-center justify-between">
+          <label for="font-size-select" class="text-sm font-medium text-neutral-700 dark:text-neutral-300">
+            Font size
+          </label>
+          <select
+            id="font-size-select"
+            class="border rounded-lg px-3 py-1.5 pr-8 text-neutral-900 text-sm dark:bg-neutral-700 dark:text-neutral-200 focus:ring-primary-500 focus:border-primary-500">
+            {{ $fontSizes := slice "12px" "14px" "16px" "18px" "20px" "22px" "24px" }}
+            {{ range $fontSizes }}
+              <option value="{{ . }}">{{ . }}</option>
+            {{ end }}
+          </select>
+        </div>
+      </div>
+    </div>
+  </div>
+{{ end }}
+
 {{/* ========== Render HTML ========== */}}
 <div
  class="main-menu flex items-center justify-between px-4 py-6 sm:px-6 md:justify-start gap-x-3 pt-[2px] pr-0 pb-[3px] pl-0">
@@ -198,7 +252,9 @@

 {{ if .Site.Menus.subnavigation }}
  <div
-    class="main-menu flex pb-3 flex-col items-end justify-between md:justify-start space-x-3{{ if .Site.Params.Logo }} -mt-[15px]{{ end }}">
+    class="main-menu flex pb-3 flex-col items-end justify-between md:justify-start space-x-3 {{ if .Site.Params.Logo }}
+      -mt-[15px]
+    {{ end }}">
    <div class="hidden md:flex items-center space-x-5">
      {{ range .Site.Menus.subnavigation }}
        <a