dbrun/blowfish
1
0
Fork 0
mirror of https://github.com/nunocoracao/blowfish.git synced 2026-01-30 15:31:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(a11y): preserve user CSS font-size when a11y panel not configured

Browse Source 
- 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
Download Patch File Download Diff File Expand all files Collapse all files
assets/js/a11y.js
+16 -3
View File
@@ -5,7 +5,7 @@ const getA11ySettings = () => {
: { : {
disableBlur: false, disableBlur: false,
disableImages: false, disableImages: false,
fontSize: "16px", // 1rem fontSize: "default",
underlineLinks: false, underlineLinks: false,
}; };
}; };
@@ -27,7 +27,10 @@ const applyImageState = (imageElement, imageUrl, disableImages) => {
}; };
const applyFontSize = (fontSizePx) => { 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) => { const applyUnderlineLinks = (enabled) => {
@@ -116,8 +119,18 @@ const initA11yPanel = (prefix = "") => {
checkboxBlur.addEventListener("change", (e) => updateA11ySetting("disableBlur", e.target.checked)); checkboxBlur.addEventListener("change", (e) => updateA11ySetting("disableBlur", e.target.checked));
checkboxImages.addEventListener("change", (e) => updateA11ySetting("disableImages", 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)); 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)); toggleButton.addEventListener("click", () => toggleA11yPanel(prefix));
closeButton.addEventListener("click", () => toggleA11yPanel(prefix)); closeButton.addEventListener("click", () => toggleA11yPanel(prefix));
layouts/partials/header/basic.html
+1 -1
View File
@@ -226,7 +226,7 @@
<select <select
id="{{ $prefix }}font-size-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"> 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 }} {{ range $fontSizes }}
<option value="{{ . }}">{{ . }}</option> <option value="{{ . }}">{{ . }}</option>
{{ end }} {{ end }}