From dc778836f13ab2167f3522d858195883be21a98e Mon Sep 17 00:00:00 2001
From: ZhenShuo Leo <98386542+ZhenShuo2021@users.noreply.github.com>
Date: Mon, 21 Jul 2025 16:33:47 +0800
Subject: [PATCH] feat: hide image in a11y mode

---
 assets/js/background-blur.js                  | 26 ++++++++--
 layouts/partials/hero/background.html         | 25 +++++-----
 layouts/partials/hero/thumbAndBackground.html | 49 ++++++++++---------
 layouts/partials/home/background.html         | 19 ++++---
 4 files changed, 73 insertions(+), 46 deletions(-)

diff --git a/assets/js/background-blur.js b/assets/js/background-blur.js
index 310b9d95..dc8d491b 100644
--- a/assets/js/background-blur.js
+++ b/assets/js/background-blur.js
@@ -10,7 +10,7 @@
     return scrollY / scrollDivisor;
   };
 
-  const applyBlurState = (blurElement, scrollDivisor, targetId) => {
+  const applyBlurState = (blurElement, scrollDivisor, targetId, imageElement, imageUrl) => {
     if (!blurElement) return;
     const isMenuBlur = targetId === "menu-blur";
 
@@ -23,22 +23,38 @@
         blurElement.style.display = "";
         blurElement.style.opacity = getScrollOpacity(scrollDivisor);
       }
+      // Hide image in a11y mode
+      if (imageElement) {
+        imageElement.style.display = "none";
+      }
     } else {
       blurElement.style.display = "";
       blurElement.style.opacity = getScrollOpacity(scrollDivisor);
       blurElement.removeAttribute("aria-hidden");
+      // Show image in normal mode
+      if (imageElement) {
+        imageElement.style.display = "";
+        // Re-apply image source if it was removed
+        if (imageUrl && !imageElement.getAttribute('src')) {
+          imageElement.setAttribute('src', imageUrl);
+        }
+      }
     }
   };
 
   scripts.forEach(script => {
     const targetId = script.getAttribute("data-target-id");
     const scrollDivisor = Number(script.getAttribute("data-scroll-divisor") || 300);
+    const imageId = script.getAttribute("data-image-id");
+    const imageUrl = script.getAttribute("data-image-url"); // Get image URL from data attribute
+
     const blurElement = document.getElementById(targetId);
+    const imageElement = imageId ? document.getElementById(imageId) : null;
 
     if (blurElement) {
       blurElement.setAttribute("role", "presentation");
       blurElement.setAttribute("tabindex", "-1");
-      applyBlurState(blurElement, scrollDivisor, targetId);
+      applyBlurState(blurElement, scrollDivisor, targetId, imageElement, imageUrl);
 
       window.addEventListener("scroll", () => {
         if (!isA11yMode() || targetId === "menu-blur") {
@@ -53,8 +69,12 @@
     scripts.forEach(script => {
       const targetId = script.getAttribute("data-target-id");
       const scrollDivisor = Number(script.getAttribute("data-scroll-divisor") || 300);
+      const imageId = script.getAttribute("data-image-id");
+      const imageUrl = script.getAttribute("data-image-url"); // Get image URL from data attribute
+
       const blurElement = document.getElementById(targetId);
-      applyBlurState(blurElement, scrollDivisor, targetId);
+      const imageElement = imageId ? document.getElementById(imageId) : null;
+      applyBlurState(blurElement, scrollDivisor, targetId, imageElement, imageUrl);
     });
   };
 })();
diff --git a/layouts/partials/hero/background.html b/layouts/partials/hero/background.html
index c3adf2e0..a2c83d7a 100644
--- a/layouts/partials/hero/background.html
+++ b/layouts/partials/hero/background.html
@@ -35,17 +35,16 @@
 <div id="hero" class="h-[150px] md:h-[200px]"></div>
 {{ end }}
 
-{{ if or $disableImageOptimization (strings.HasSuffix $featured ".svg")}}
-    {{ with . }}
-    <div class="fixed inset-x-0 top-0 h-[800px] single_hero_background nozoom"
-    style="background-image:url({{ .RelPermalink }});">
+<div class="fixed inset-x-0 top-0 h-[800px] single_hero_background nozoom">
+    {{ if or $disableImageOptimization (strings.HasSuffix $featured ".svg")}}
+        {{ with . }}
+        <img id="background-image" src="{{ .RelPermalink }}" alt="Background Image" class="absolute inset-0 w-full h-full object-cover">
+        {{ end }}
+    {{ else }}
+        {{ with .Resize (print ($.Site.Params.backgroundImageWidth | default "1200") "x") }}
+        <img id="background-image" src="{{ .RelPermalink }}" alt="Background Image" class="absolute inset-0 w-full h-full object-cover">
+        {{ end }}
     {{ end }}
-{{ else }}
-    {{ with .Resize (print ($.Site.Params.backgroundImageWidth | default "1200") "x") }}
-    <div class="fixed inset-x-0 top-0 h-[800px] single_hero_background nozoom"
-    style="background-image:url({{ .RelPermalink }});">
-    {{ end }}
-{{ end }}
 
     <div class="absolute inset-0 bg-gradient-to-t from-neutral dark:from-neutral-800 to-transparent mix-blend-normal">
     </div>
@@ -57,6 +56,10 @@
 <div id="background-blur" class="fixed opacity-0 inset-x-0 top-0 h-full single_hero_background nozoom backdrop-blur-2xl"></div>
 {{ $backgroundBlur := resources.Get "js/background-blur.js" }}
 {{ $backgroundBlur = $backgroundBlur | resources.Minify | resources.Fingerprint ($.Site.Params.fingerprintAlgorithm | default "sha512") }}
-<script type="text/javascript" src="{{ $backgroundBlur.RelPermalink }}" integrity="{{ $backgroundBlur.Data.Integrity }}" data-target-id="background-blur"></script>
+<script type="text/javascript" src="{{ $backgroundBlur.RelPermalink }}" integrity="{{ $backgroundBlur.Data.Integrity }}"
+    data-target-id="background-blur"
+    data-image-id="background-image"
+    data-image-url="{{ .RelPermalink }}"
+></script>
 {{ end }}
 {{- end -}}
diff --git a/layouts/partials/hero/thumbAndBackground.html b/layouts/partials/hero/thumbAndBackground.html
index 2a8448cb..6e480deb 100644
--- a/layouts/partials/hero/thumbAndBackground.html
+++ b/layouts/partials/hero/thumbAndBackground.html
@@ -58,30 +58,29 @@
 
 {{- with $background -}}
 
-  {{ if or $disableImageOptimization (strings.HasSuffix . ".svg") }}
-    {{ with . }}
-      <div
-        class="fixed inset-x-0 top-0 h-[800px] single_hero_background nozoom"
-        style="background-image:url({{ .RelPermalink }});">
-        <div
-          class="absolute inset-0 bg-gradient-to-t from-neutral dark:from-neutral-800 to-transparent mix-blend-normal"></div>
-        <div
-          class="absolute inset-0 opacity-30 dark:opacity-60 bg-gradient-to-t from-neutral dark:from-neutral-800 to-neutral dark:to-neutral-800 mix-blend-normal"></div>
-      </div>
+  <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 }}
     {{ end }}
-  {{ else }}
-    {{ with .Resize (print ($.Site.Params.backgroundImageWidth | default "1200") "x") }}
-      <div
-        class="fixed inset-x-0 top-0 h-[800px] single_hero_background nozoom"
-        style="background-image:url({{ .RelPermalink }});">
-        <div
-          class="absolute inset-0 bg-gradient-to-t from-neutral dark:from-neutral-800 to-transparent mix-blend-normal"></div>
-        <div
-          class="absolute inset-0 opacity-30 dark:opacity-60 bg-gradient-to-t from-neutral dark:from-neutral-800 to-neutral dark:to-neutral-800 mix-blend-normal"></div>
-      </div>
-    {{ end }}
-  {{ end }}
-
+    <div
+      class="from-neutral absolute inset-0 bg-gradient-to-t to-transparent mix-blend-normal dark:from-neutral-800"></div>
+    <div
+      class="from-neutral to-neutral absolute inset-0 bg-gradient-to-t opacity-30 mix-blend-normal dark:from-neutral-800 dark:to-neutral-800 dark:opacity-60"></div>
+  </div>
 {{- end -}}
 
 {{ if $shouldBlur | default false }}
@@ -94,5 +93,7 @@
     type="text/javascript"
     src="{{ $backgroundBlur.RelPermalink }}"
     integrity="{{ $backgroundBlur.Data.Integrity }}"
-    data-target-id="background-blur"></script>
+    data-target-id="background-blur"
+    data-image-id="background-image-main"
+    {{ with $background }}data-image-url="{{ .RelPermalink }}"{{ end }}></script>
 {{ end }}
diff --git a/layouts/partials/home/background.html b/layouts/partials/home/background.html
index f2c06872..4e3c7534 100644
--- a/layouts/partials/home/background.html
+++ b/layouts/partials/home/background.html
@@ -1,5 +1,5 @@
 {{ $disableImageOptimization := .Site.Params.disableImageOptimization | default false }}
-<article class="max-w-full prose dark:prose-invert">
+<article class="prose dark:prose-invert max-w-full">
   <div class="relative">
     <div class="absolute inset-x-0 bottom-0 h-1/2 bg-gray-100"></div>
     <div class="mx-auto max-w-7xl p-0">
@@ -22,16 +22,17 @@
           {{ end }}
           {{ if $homepageImage }}
             <img
-              class="w-full h-[1000px] object-cover nozoom mt-0 mr-0 mb-0 ml-0"
+              id="homepage-background-image"
+              class="nozoom mt-0 mr-0 mb-0 ml-0 h-[1000px] w-full object-cover"
               src="{{ $homepageImage.RelPermalink }}"
               role="presentation">
             <div
-              class="absolute inset-0 h-[1000px] bg-gradient-to-t from-neutral dark:from-neutral-800 to-transparent mix-blend-normal"></div>
+              class="from-neutral absolute inset-0 h-[1000px] bg-gradient-to-t to-transparent mix-blend-normal dark:from-neutral-800"></div>
             <div
-              class="opacity-60 absolute inset-0 h-[1000px] bg-gradient-to-t from-neutral dark:from-neutral-800 to-neutral-100 dark:to-neutral-800 mix-blend-normal"></div>
+              class="from-neutral absolute inset-0 h-[1000px] bg-gradient-to-t to-neutral-100 opacity-60 mix-blend-normal dark:from-neutral-800 dark:to-neutral-800"></div>
           {{ end }}
         </div>
-        <div class="relative px-1 py-1 flex flex-col items-center justify-center text-center">
+        <div class="relative flex flex-col items-center justify-center px-1 py-1 text-center">
           {{ with .Site.Params.Author.image }}
             {{ $authorImage := "" }}
             {{ if or (strings.HasPrefix . "http:") (strings.HasPrefix . "https:") }}
@@ -44,7 +45,7 @@
                 {{ $authorImage = $authorImage.Fill (print "288x288 q" ( $.Site.Params.Author.imagequality | default "96" )) }}
               {{ end }}
               <img
-                class="mb-2 rounded-full h-36 w-36"
+                class="mb-2 h-36 w-36 rounded-full"
                 width="144"
                 height="144"
                 alt="{{ $.Site.Params.Author.name | default " Author" }}"
@@ -65,7 +66,7 @@
                 {{ range $links := . }}
                   {{ range $name, $url := $links }}
                     <a
-                      class="px-1 hover:text-primary-400 text-primary-800 dark:text-primary-200"
+                      class="hover:text-primary-400 text-primary-800 dark:text-primary-200 px-1"
                       href="{{ $url }}"
                       target="_blank"
                       aria-label="{{ $name | title }}"
@@ -98,5 +99,7 @@
     type="text/javascript"
     src="{{ $backgroundBlur.RelPermalink }}"
     integrity="{{ $backgroundBlur.Data.Integrity }}"
-    data-target-id="background-blur"></script>
+    data-target-id="background-blur"
+    data-image-id="homepage-background-image"
+    {{ if $homepageImage }}data-image-url="{{ $homepageImage.RelPermalink }}"{{ end }}></script>
 {{ end }}