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
This commit is contained in:
ZhenShuo Leo
2025-07-23 03:57:47 +08:00
parent d7220bd0ee
commit b9bb959a48
2 changed files with 17 additions and 4 deletions

View File

@@ -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));

View File

@@ -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 }}