fix(a11y): disableImages not working when layoutBackgroundBlur is false

This commit is contained in:
ZhenShuo Leo
2025-08-05 16:39:50 +08:00
parent 10ffbca4c0
commit ade00547b3
4 changed files with 20 additions and 29 deletions

View File

@@ -16,14 +16,10 @@ window.A11yPanel = (() => {
disableImages: {
default: false,
apply: (enabled) => {
document.querySelectorAll("script[data-target-id]").forEach((script) => {
const image = document.getElementById(script.getAttribute("data-image-id"));
const imageUrl = script.getAttribute("data-image-url");
if (image) {
image.style.display = enabled ? "none" : "";
if (!enabled && imageUrl && !image.src) image.src = imageUrl;
}
});
const image = document.getElementById("background-image");
if (image) {
image.style.display = enabled ? "none" : "";
}
},
},

View File

@@ -198,14 +198,17 @@
</div>
<div class="space-y-5">
{{- $toggles := slice
(dict "id" (print $prefix "disable-blur") "label" (i18n "a11y.disable_blur"))
{{ $toggles := slice }}
{{ $shouldDisableBlur := or site.Params.homepage.layoutBackgroundBlur site.Params.article.layoutBackgroundBlur site.Params.list.layoutBackgroundBlur }}
{{ if $shouldDisableBlur }}
{{ $toggles = $toggles | append (dict "id" (print $prefix "disable-blur") "label" (i18n "a11y.disable_blur")) }}
{{ end }}
{{- $toggles = $toggles | append
(dict "id" (print $prefix "disable-images") "label" (i18n "a11y.disable_images"))
(dict "id" (print $prefix "underline-links") "label" (i18n "a11y.show_link_underline"))
(dict "id" (print $prefix "zen-mode") "label" (i18n "article.zen_mode_title.enable"))
-}}
{{- range $toggles }}
<div class="flex items-center justify-between">
<label for="{{ .id }}" class="text-sm font-medium text-neutral-700 dark:text-neutral-300">

View File

@@ -59,23 +59,15 @@
{{- with $background -}}
<div class="single_hero_background nozoom fixed inset-x-0 top-0 h-[800px]">
{{ if or $disableImageOptimization (strings.HasSuffix . ".svg") }}
{{ with . }}
<img
id="background-image-main"
src="{{ .RelPermalink }}"
alt="Background Image"
class="absolute inset-0 h-full w-full object-cover">
{{ end }}
{{ else }}
{{ with .Resize (print ($.Site.Params.backgroundImageWidth | default "1200") "x") }}
<img
id="background-image-main"
src="{{ .RelPermalink }}"
alt="Background Image"
class="absolute inset-0 h-full w-full object-cover">
{{ end }}
{{ $imageURL := .RelPermalink }}
{{ if not (or $disableImageOptimization (eq .MediaType.SubType "svg")) }}
{{ $imageURL = (.Resize (print ($.Site.Params.backgroundImageWidth | default "1200") "x")).RelPermalink }}
{{ end }}
<img
id="background-image"
src="{{ $imageURL }}"
alt="Background Image"
class="absolute inset-0 h-full w-full object-cover">
<div
class="from-neutral absolute inset-0 bg-gradient-to-t to-transparent mix-blend-normal dark:from-neutral-800"></div>
<div

View File

@@ -22,7 +22,7 @@
{{ end }}
{{ if $homepageImage }}
<img
id="homepage-background-image"
id="background-image"
class="nozoom mt-0 mr-0 mb-0 ml-0 h-[1000px] w-full object-cover"
src="{{ $homepageImage.RelPermalink }}"
role="presentation">
@@ -100,6 +100,6 @@
src="{{ $backgroundBlur.RelPermalink }}"
integrity="{{ $backgroundBlur.Data.Integrity }}"
data-target-id="background-blur"
data-image-id="homepage-background-image"
data-image-id="background-image"
{{ if $homepageImage }}data-image-url="{{ $homepageImage.RelPermalink }}"{{ end }}></script>
{{ end }}