mirror of
https://github.com/nunocoracao/blowfish.git
synced 2026-01-30 16:31:52 +01:00
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:
@@ -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));
|
||||
|
||||
@@ -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 }}
|
||||
|
||||
Reference in New Issue
Block a user