fix(a11y): prevent zen mode toggle requiring double-click

Add state comparison in applyZenMode to only toggle when
current state differs from desired state
This commit is contained in:
ZhenShuo Leo
2025-07-23 04:25:22 +08:00
parent 352130c6a8
commit 7f4e4dab40

View File

@@ -51,9 +51,13 @@ const applyUnderlineLinks = (enabled) => {
};
const applyZenMode = (enabled) => {
if (enabled && typeof _toggleZenMode === 'function') {
const body = document.querySelector("body");
const isZenModeActive = body && body.classList.contains("zen-mode-enable");
// Toggle only if current state doesn't match desired state
if (enabled !== isZenModeActive) {
const zenModeCheckbox = document.querySelector('[id$="zen-mode"]');
if (zenModeCheckbox) {
if (zenModeCheckbox && typeof _toggleZenMode === "function") {
_toggleZenMode(zenModeCheckbox, { scrollToHeader: false });
}
}
@@ -135,9 +139,9 @@ const initA11yPanel = (prefix = "") => {
checkboxImages.addEventListener("change", (e) => updateA11ySetting("disableImages", e.target.checked));
checkboxUnderline.addEventListener("change", (e) => updateA11ySetting("underlineLinks", e.target.checked));
checkboxZenMode.addEventListener("change", (e) => {
updateA11ySetting("zenMode", e.target.checked)
_toggleZenMode(checkboxZenMode, { scrollToHeader: false })
})
// Only save setting, let applyZenMode handle the toggle logic
updateA11ySetting("zenMode", e.target.checked);
});
fontSizeSelect.addEventListener("change", (e) => {
// Remove fontSize from localStorage when default is selected
if (e.target.value === "default") {