From edbace7be073819ed7341b7e89bafa082e8ddf6b Mon Sep 17 00:00:00 2001 From: ZhenShuo Leo <98386542+ZhenShuo2021@users.noreply.github.com> Date: Mon, 21 Jul 2025 16:09:50 +0800 Subject: [PATCH] feat: support a11y disable blur --- assets/icons/a11y.svg | 1 + assets/js/background-blur.js | 62 +++++++++++++++++-- config/_default/params.toml | 1 + exampleSite/config/_default/params.toml | 1 + .../content/docs/configuration/index.it.md | 1 + .../content/docs/configuration/index.ja.md | 1 + .../content/docs/configuration/index.md | 1 + .../content/docs/configuration/index.zh-cn.md | 1 + layouts/partials/header/basic.html | 26 ++++++++ 9 files changed, 89 insertions(+), 6 deletions(-) create mode 100644 assets/icons/a11y.svg diff --git a/assets/icons/a11y.svg b/assets/icons/a11y.svg new file mode 100644 index 00000000..dc17961e --- /dev/null +++ b/assets/icons/a11y.svg @@ -0,0 +1 @@ + diff --git a/assets/js/background-blur.js b/assets/js/background-blur.js index d2d0432b..310b9d95 100644 --- a/assets/js/background-blur.js +++ b/assets/js/background-blur.js @@ -1,10 +1,60 @@ (() => { - const script = document.currentScript; - const targetId = script?.getAttribute("data-target-id"); + const scripts = document.querySelectorAll('script[data-target-id]'); + + const isA11yMode = () => { + return localStorage.getItem("a11yMode") === "true"; + }; - window.addEventListener("scroll", () => { - const scroll = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0; - const backgroundBlur = document.getElementById(targetId); - backgroundBlur.style.opacity = scroll / 300; + const getScrollOpacity = (scrollDivisor) => { + const scrollY = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0; + return scrollY / scrollDivisor; + }; + + 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); + }); + }; })(); diff --git a/config/_default/params.toml b/config/_default/params.toml index 16345db3..c1bc43a6 100644 --- a/config/_default/params.toml +++ b/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 diff --git a/exampleSite/config/_default/params.toml b/exampleSite/config/_default/params.toml index 05f29f4f..60a02011 100644 --- a/exampleSite/config/_default/params.toml +++ b/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 diff --git a/exampleSite/content/docs/configuration/index.it.md b/exampleSite/content/docs/configuration/index.it.md index 096afe15..b3c05e82 100644 --- a/exampleSite/content/docs/configuration/index.it.md +++ b/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 `` 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. | diff --git a/exampleSite/content/docs/configuration/index.ja.md b/exampleSite/content/docs/configuration/index.ja.md index 15bf5e71..fa9d255d 100644 --- a/exampleSite/content/docs/configuration/index.ja.md +++ b/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` | `` ブロックのクリップボードへのコピーボタンを有効にするかどうかです。コードコピーが正しく機能するには、`highlight.noClasses` パラメータを `false` に設定する必要があります。以下の[その他の設定ファイル](#その他の設定ファイル)について読んでください。 | | `mainSections` | _未設定_ | 最近の記事リストに表示するセクションです。指定しない場合は、記事数が最も多いセクションが使用されます。 | diff --git a/exampleSite/content/docs/configuration/index.md b/exampleSite/content/docs/configuration/index.md index ddc689a9..7364b6cb 100644 --- a/exampleSite/content/docs/configuration/index.md +++ b/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 `` 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. | diff --git a/exampleSite/content/docs/configuration/index.zh-cn.md b/exampleSite/content/docs/configuration/index.zh-cn.md index 36aec8b7..90229470 100644 --- a/exampleSite/content/docs/configuration/index.zh-cn.md +++ b/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` | 是否可以将``代码块复制到剪贴板。想要使用代码复制功能，需要将 `highlight.noClasses` 参数设置为 `false`。 阅读 [其他配置文件](#其他配置文件) 以获取更多信息。 | | `replyByEmail` | `false` | 是否在发布后启用“通过邮件回复”的链接。如果使用，则必须设置 `config/_default/languages.en.toml` 中的 `params.author.email` 参数。 | diff --git a/layouts/partials/header/basic.html b/layouts/partials/header/basic.html index 952e774b..80acaffc 100644 --- a/layouts/partials/header/basic.html +++ b/layouts/partials/header/basic.html @@ -34,6 +34,18 @@ {{ end }} {{ partial "translations.html" . }} + {{ if .Site.Params.enableA11y | default false }} + + {{ end }} {{ if .Site.Params.enableSearch | default false }} + {{ end }} + {{ if .Site.Params.enableSearch | default false }}