From b9bb959a48370e1c88d69ca001e7d0e4427db481 Mon Sep 17 00:00:00 2001
From: ZhenShuo Leo <98386542+ZhenShuo2021@users.noreply.github.com>
Date: Wed, 23 Jul 2025 03:57:47 +0800
Subject: [PATCH] fix(a11y): preserve user CSS font-size when a11y panel not
 configured

- Add "default" option to font size selector to respect user's original CSS
- Clear localStorage font setting when "default" is selected
- This prevent overriding user's custom font-size declarations on first load
---
 assets/js/a11y.js                  | 19 ++++++++++++++++---
 layouts/partials/header/basic.html |  2 +-
 2 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/assets/js/a11y.js b/assets/js/a11y.js
index f49c78fe..6fb2e150 100644
--- a/assets/js/a11y.js
+++ b/assets/js/a11y.js
@@ -5,7 +5,7 @@ const getA11ySettings = () => {
     : {
         disableBlur: false,
         disableImages: false,
-        fontSize: "16px", // 1rem
+        fontSize: "default",
         underlineLinks: false,
       };
 };
@@ -27,7 +27,10 @@ const applyImageState = (imageElement, imageUrl, disableImages) => {
 };
 
 const applyFontSize = (fontSizePx) => {
-  document.documentElement.style.fontSize = fontSizePx;
+  const isDefaultSettings = localStorage.getItem("a11ySettings") === null;
+  if (!isDefaultSettings && fontSizePx !== "default") {
+    document.documentElement.style.fontSize = fontSizePx;
+  }
 };
 
 const applyUnderlineLinks = (enabled) => {
@@ -116,8 +119,18 @@ const initA11yPanel = (prefix = "") => {
 
   checkboxBlur.addEventListener("change", (e) => updateA11ySetting("disableBlur", e.target.checked));
   checkboxImages.addEventListener("change", (e) => updateA11ySetting("disableImages", e.target.checked));
-  fontSizeSelect.addEventListener("change", (e) => updateA11ySetting("fontSize", e.target.value));
   checkboxUnderline.addEventListener("change", (e) => updateA11ySetting("underlineLinks", e.target.checked));
+  fontSizeSelect.addEventListener("change", (e) => {
+    // Remove fontSize from localStorage when default is selected
+    if (e.target.value === "default") {
+      const settings = getA11ySettings();
+      delete settings.fontSize;
+      saveA11ySettings(settings);
+      document.documentElement.style.fontSize = "";
+    } else {
+      updateA11ySetting("fontSize", e.target.value);
+    }
+  });
 
   toggleButton.addEventListener("click", () => toggleA11yPanel(prefix));
   closeButton.addEventListener("click", () => toggleA11yPanel(prefix));
diff --git a/layouts/partials/header/basic.html b/layouts/partials/header/basic.html
index 3bea85a0..4f9c132e 100644
--- a/layouts/partials/header/basic.html
+++ b/layouts/partials/header/basic.html
@@ -226,7 +226,7 @@
           <select
             id="{{ $prefix }}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" }}
+            {{ $fontSizes := slice "default" "12px" "14px" "16px" "18px" "20px" "22px" "24px" }}
             {{ range $fontSizes }}
               <option value="{{ . }}">{{ . }}</option>
             {{ end }}