feat: support a11y disable blur

assets/icons/a11y.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm161.5-86.1c-12.2-5.2-26.3 .4-31.5 12.6s.4 26.3 12.6 31.5l11.9 5.1c17.3 7.4 35.2 12.9 53.6 16.3l0 50.1c0 4.3-.7 8.6-2.1 12.6l-28.7 86.1c-4.2 12.6 2.6 26.2 15.2 30.4s26.2-2.6 30.4-15.2l24.4-73.2c1.3-3.8 4.8-6.4 8.8-6.4s7.6 2.6 8.8 6.4l24.4 73.2c4.2 12.6 17.8 19.4 30.4 15.2s19.4-17.8 15.2-30.4l-28.7-86.1c-1.4-4.1-2.1-8.3-2.1-12.6l0-50.1c18.4-3.5 36.3-8.9 53.6-16.3l11.9-5.1c12.2-5.2 17.8-19.3 12.6-31.5s-19.3-17.8-31.5-12.6L338.7 175c-26.1 11.2-54.2 17-82.7 17s-56.5-5.8-82.7-17l-11.9-5.1zM256 160a40 40 0 1 0 0-80 40 40 0 1 0 0 80z"/></svg>

assets/js/background-blur.js

@@ -1,10 +1,60 @@
 (() => {
-  const script = document.currentScript;
+  const scripts = document.querySelectorAll('script[data-target-id]');
-  const targetId = script?.getAttribute("data-target-id");
+  
+  const isA11yMode = () => {
+    return localStorage.getItem("a11yMode") === "true";
+  };
 
-  window.addEventListener("scroll", () => {
+  const getScrollOpacity = (scrollDivisor) => {
-    const scroll = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
+    const scrollY = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
-    const backgroundBlur = document.getElementById(targetId);
+    return scrollY / scrollDivisor;
-    backgroundBlur.style.opacity = scroll / 300;
+  };
+
+  const applyBlurState = (blurElement, scrollDivisor, targetId) => {
+    if (!blurElement) return;
+    const isMenuBlur = targetId === "menu-blur";
+
+    if (isA11yMode()) {
+      blurElement.setAttribute("aria-hidden", "true");
+      if (!isMenuBlur) {
+        blurElement.style.display = "none";
+        blurElement.style.opacity = "0";
+      } else {
+        blurElement.style.display = "";
+        blurElement.style.opacity = getScrollOpacity(scrollDivisor);
+      }
+    } else {
+      blurElement.style.display = "";
+      blurElement.style.opacity = getScrollOpacity(scrollDivisor);
+      blurElement.removeAttribute("aria-hidden");
+    }
+  };
+
+  scripts.forEach(script => {
+    const targetId = script.getAttribute("data-target-id");
+    const scrollDivisor = Number(script.getAttribute("data-scroll-divisor") || 300);
+    const blurElement = document.getElementById(targetId);
+
+    if (blurElement) {
+      blurElement.setAttribute("role", "presentation");
+      blurElement.setAttribute("tabindex", "-1");
+      applyBlurState(blurElement, scrollDivisor, targetId);
+
+      window.addEventListener("scroll", () => {
+        if (!isA11yMode() || targetId === "menu-blur") {
+          blurElement.style.opacity = getScrollOpacity(scrollDivisor);
+        }
+      });
+    }
   });
+
+  window.toggleA11yMode = function() {
+    localStorage.setItem("a11yMode", String(!isA11yMode()));
+    scripts.forEach(script => {
+      const targetId = script.getAttribute("data-target-id");
+      const scrollDivisor = Number(script.getAttribute("data-scroll-divisor") || 300);
+      const blurElement = document.getElementById(targetId);
+      applyBlurState(blurElement, scrollDivisor, targetId);
+    });
+  };
 })();

config/_default/params.toml

@@ -9,6 +9,7 @@ colorScheme = "blowfish"
 defaultAppearance = "light" # valid options: light or dark
 autoSwitchAppearance = true
 
+enableA11y = false
 enableSearch = true
 enableCodeCopy = false
 

exampleSite/config/_default/params.toml

@@ -9,6 +9,7 @@ colorScheme = "blowfish"
 defaultAppearance = "dark" # valid options: light or dark
 autoSwitchAppearance = true
 
+enableA11y = true
 enableSearch = true
 enableCodeCopy = true
 

exampleSite/content/docs/configuration/index.it.md

@@ -171,6 +171,7 @@ Many of the article defaults here can be overridden on a per article basis by sp
 | `colorScheme`                   | `"blowfish"` | The theme colour scheme to use. Valid values are `blowfish` (default), `avocado`, `fire`, `ocean`, `forest`, `princess`, `neon`, `bloody`, `terminal`, `marvel`, `noir`, `autumn`, `congo`, and`slate`. Refer to the [Colour Schemes]({{< ref "getting-started#colour-schemes" >}}) section for more details. |
 | `defaultAppearance`             | `"light"`    | The default theme appearance, either `light` or `dark`.                                                                                                                                                                                                                                                       |
 | `autoSwitchAppearance`          | `true`       | Whether the theme appearance automatically switches based upon the visitor's operating system preference. Set to `false` to force the site to always use the `defaultAppearance`.                                                                                                                             |
+| `enableA11y`                   | `false`      | Whether to enable the accessibility toggle button. |
 | `enableSearch`                  | `false`      | Whether site search is enabled. Set to `true` to enable search functionality. Note that the search feature depends on the `outputs.home` setting in the [site configuration](#configurazioni-del-sito) being set correctly.                                                                                        |
 | `enableCodeCopy`                | `false`      | Whether copy-to-clipboard buttons are enabled for `<code>` blocks. The `highlight.noClasses` parameter must be set to `false` for code copy to function correctly. Read more about [other configuration files](#other-configuration-files) below.                                                             |
 | `mainSections`                  | _Not set_    | The sections that should be displayed in the recent articles list. If not provided the section with the greatest number of articles is used.                                                                                                                                                                  |

exampleSite/content/docs/configuration/index.ja.md

@@ -171,6 +171,7 @@ Blowfish は、テーマの機能を制御する多数の設定パラメータ
 | `colorScheme`                   | `"blowfish"` | 使用するテーマのカラースキームです。有効な値は、`blowfish`（デフォルト）、`avocado`、`fire`、`ocean`、`forest`、`princess`、`neon`、`bloody`、`terminal`、`marvel`、`noir`、`autumn`、`congo`、`slate` です。詳細については、[カラースキーム]({{< ref "getting-started#カラースキーム" >}})セクションを参照してください。 |
 | `defaultAppearance`             | `"light"`    | デフォルトのテーマの外観です。`light` または `dark` のいずれかです。                                                                                                                                                                                                                                                      |
 | `autoSwitchAppearance`          | `true`       | 訪問者のオペレーティングシステムの設定に基づいてテーマの外観を自動的に切り替えるかどうかです。`false` に設定すると、サイトは常に `defaultAppearance` を使用します。                                                                                                                                                       |
+| `enableA11y` | `false` | アクセシビリティ切り替えボタンを有効にするかどうか。 |
 | `enableSearch`                  | `false`      | サイト内検索が有効かどうかです。`true` に設定すると、検索機能が有効になります。検索機能は、[サイト設定](#サイト設定)の `outputs.home` 設定が正しく設定されているかどうかに依存することに注意してください。                                                                                                                |
 | `enableCodeCopy`                | `false`      | `<code>` ブロックのクリップボードへのコピーボタンを有効にするかどうかです。コードコピーが正しく機能するには、`highlight.noClasses` パラメータを `false` に設定する必要があります。以下の[その他の設定ファイル](#その他の設定ファイル)について読んでください。                                                             |
 | `mainSections`                  | _未設定_     | 最近の記事リストに表示するセクションです。指定しない場合は、記事数が最も多いセクションが使用されます。                                                                                                                                                                                                                    |

exampleSite/content/docs/configuration/index.md

@@ -173,6 +173,7 @@ Many of the article defaults here can be overridden on a per article basis by sp
 | `colorScheme`                   | `"blowfish"` | The theme colour scheme to use. Valid values are `blowfish` (default), `avocado`, `fire`, `ocean`, `forest`, `princess`, `neon`, `bloody`, `terminal`, `marvel`, `noir`, `autumn`, `congo`, and`slate`. Refer to the [Colour Schemes]({{< ref "getting-started#colour-schemes" >}}) section for more details. |
 | `defaultAppearance`             | `"light"`    | The default theme appearance, either `light` or `dark`.                                                                                                                                                                                                                                                       |
 | `autoSwitchAppearance`          | `true`       | Whether the theme appearance automatically switches based upon the visitor's operating system preference. Set to `false` to force the site to always use the `defaultAppearance`.                                                                                                                             |
+| `enableA11y`                   | `false`      | Whether to enable the accessibility toggle button. |
 | `enableSearch`                  | `false`      | Whether site search is enabled. Set to `true` to enable search functionality. Note that the search feature depends on the `outputs.home` setting in the [site configuration](#site-configuration) being set correctly.                                                                                        |
 | `enableCodeCopy`                | `false`      | Whether copy-to-clipboard buttons are enabled for `<code>` blocks. The `highlight.noClasses` parameter must be set to `false` for code copy to function correctly. Read more about [other configuration files](#other-configuration-files) below.                                                             |
 | `replyByEmail`                  | `false`      | Whether the reply-by-email link is enabled after post. The `params.author.email` parameter in `config/_default/languages.en.toml` must be set.                                                                                                                                                                       |

exampleSite/content/docs/configuration/index.zh-cn.md

@@ -171,6 +171,7 @@ Blowfish 提供了大量控制主题功能的配置参数，下面的表格中
 | `colorScheme`                   | `"blowfish"` | 主题使用的颜色方案。合法的值有： `blowfish` （默认）、`avocado`、`fire`、`ocean`、`forest`、`princess`、`neon`、`bloody`、`terminal`、`marvel`、`noir`、`autumn`、`congo` 和 `slate`。 具体参考[颜色方案]({{< ref "getting-started#colour-schemes" >}})以获取更多信息。 |
 | `defaultAppearance`             | `"light"`    | 默认的主题外观，可以是 `light` 或者 `dark`。                                                                                                                                                                                                                            |
 | `autoSwitchAppearance`          | `true`       | 主题外观是否根据访问者操作系统的偏好自动切换。设置为 `false` 会强制网站始终使用 `defaultAppearance`。                                                                                                                                                                   |
+| `enableA11y`                   | `false`      | 是否启用无障碍切换按钮。 |
 | `enableSearch`                  | `false`      | 是否开启网站的搜索功能，设为 `true` 即为启用。注意，搜索功能依赖于[站点设置](#网站配置)中的 `outputs.home` 设置，请确保此值配置正确。                                                                                                                         |
 | `enableCodeCopy`                | `false`      | 是否可以将`<code>`代码块复制到剪贴板。想要使用代码复制功能，需要将 `highlight.noClasses` 参数设置为 `false`。 阅读 [其他配置文件](#其他配置文件) 以获取更多信息。                                                                                          |
 | `replyByEmail`                  | `false`      | 是否在发布后启用“通过邮件回复”的链接。如果使用，则必须设置 `config/_default/languages.en.toml` 中的 `params.author.email` 参数。                                                                                                                                                                        |

layouts/partials/header/basic.html

@@ -34,6 +34,18 @@
     {{ end }}
 
     {{ partial "translations.html" . }}
+    {{ if .Site.Params.enableA11y | default false }}
+      <button
+        id="a11y-toggle"
+        aria-label="Toggle accessibility background animation"
+        type="button"
+        class="text-base hover:text-primary-600 dark:hover:text-primary-400"
+        onclick="toggleA11yMode()"
+        role="button"
+        aria-pressed="false">
+        {{ partial "icon.html" "a11y" }}
+      </button>
+    {{ end }}
 
     {{ if .Site.Params.enableSearch | default false }}
       <button
@@ -70,6 +82,20 @@
     <span></span>
 
     {{ partial "translations.html" . }}
+
+    {{ if .Site.Params.enableA11y | default false }}
+      <button
+        id="a11y-toggle"
+        aria-label="Toggle accessibility background animation"
+        type="button"
+        class="text-base hover:text-primary-600 dark:hover:text-primary-400"
+        onclick="toggleA11yMode()"
+        role="button"
+        aria-pressed="false">
+        {{ partial "icon.html" "a11y" }}
+      </button>
+    {{ end }}
+
     {{ if .Site.Params.enableSearch | default false }}
       <button
         id="search-button-mobile"