Skip to content

fix(index): a11y 对比度 · reveal 兜底 · 去脚手架编号 · 英文文案清理 - #31

Merged
realRoc merged 3 commits into
mainfrom
design/index-a11y-and-copy-polish
Jun 1, 2026
Merged

fix(index): a11y 对比度 · reveal 兜底 · 去脚手架编号 · 英文文案清理#31
realRoc merged 3 commits into
mainfrom
design/index-a11y-and-copy-polish

Conversation

@realRoc

@realRoc realRoc commented Jun 1, 2026

Copy link
Copy Markdown
Owner

首页一轮 impeccable 设计打磨,保留宣言气质(已据此校准 PRODUCT.md)。起点是 /impeccable critique docs/index.html(34/40)。

改了什么

可访问性 / 对比度(主线)

  • 新增令牌 --ink-label(#67645B,5.3:1)、--accent-ink(#B54A27,4.7:1)
  • 修复未达 WCAG AA 的文字:kicker、ritual-num、FAQ 展开态 summary、STEP 标签
  • 暗场 closer kicker 改为继承浅色:2.45:1 → 5.57:1
  • 全局可见焦点环(accent 2px),移除两处 outline:none

健壮性(reveal 不再门控可见性)

  • <html> 预绘制加 .js;新增 html:not(.js) 兜底块;4 个 IntersectionObserver 加不支持兜底
  • JS 禁用/失败、爬虫/预渲染、老浏览器不再空屏(reduced-motion 路径原本已覆盖)

反 AI 脚手架

  • 去掉 Definition 三支柱与 Rituals 的非序列编号;仅保留 workflow 真实有序的 01–06

文案

  • hero 字号上限 144px → 112px
  • index 页英文 em-dash 全部改为冒号/逗号/句号/括号(可见文案 + JSON-LD 结构化数据)
  • 中文破折号 —— 保留(正规标点,非英文 em-dash tell)
  • 宣言点睛句保留

其它

  • 同步重建 docs/en/ 英文镜像
  • 新增 PRODUCT.md 项目设计上下文;.impeccable/ 加入 .gitignore

验证

  • CSS 括号平衡;githire-scroll.js / i18n.js / build-en.mjs 语法 OK
  • 对比度用 WCAG 公式实测达标;build:en 重建成功,英文镜像非注释 em-dash 清零
  • 检测器剩余 3 项均为预期内(single-font 双语 committed 误报、em-dash 中文破折号 CJK 误报、numbered-markers 仅 workflow 真实序列)

注意

  • 改动均为确定性的 CSS/JS/文案,已静态全量校验;建议合并前在浏览器快速过一眼(closer 暗场 kicker、FAQ 展开色、hero 字号、键盘 Tab 焦点环)。

🤖 Generated with Claude Code

wuyupeng @claude
fix(index): a11y 对比度、reveal 兜底、去脚手架编号、英文文案清理
315598a 
围绕首页做一轮 impeccable 设计打磨(保留宣言气质):

- a11y/对比度:新增 --ink-label(5.3:1)与 --accent-ink(4.7:1)令牌,
  修复 kicker、ritual-num、FAQ 展开态、STEP 标签未达 WCAG AA 的问题;
  暗场 closer kicker 改为继承浅色(2.45:1 → 5.57:1);
  补全局可见焦点环(accent 2px)并移除两处 outline:none。
- 健壮性:reveal 动画不再门控内容可见性——<html> 预绘制加 .js,
  新增 html:not(.js) 兜底块,4 个 IntersectionObserver 加不支持兜底;
  JS 禁用/失败、爬虫、老浏览器不再空屏。
- 反 AI 脚手架:去掉 Definition 三支柱与 Rituals 的非序列编号,
  仅保留 workflow 真实有序的 01–06。
- 文案:hero 字号上限 144→112px;index 页英文 em-dash 全部改为
  冒号/逗号/句号/括号(可见文案 + JSON-LD 结构化数据),中文破折号保留;
  宣言点睛句保留。
- 同步重建 docs/en/ 英文镜像;新增 PRODUCT.md 项目设计上下文。

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@realRoc

realRoc commented Jun 1, 2026

Copy link
Copy Markdown
Owner Author

🤖 由 Codex 自动生成

Blocker / 必须修正

  • docs/index.html:15 / docs/en/index.html:13 在 head 里无条件提前给 <html> 加 .js，但 reveal 接管脚本是底部的 type="module"（docs/index.html:651、docs/en/index.html:643）。浏览器不支持 module、module import 失败，或 githire-scroll.js 没加载时，.js 已经存在，html:not(.js) 兜底（docs/githire.css:2457）不会生效；同时 workflow、ritual、closer 仍被 CSS 初始态隐藏（如 docs/githire.css:590、docs/githire.css:856、docs/githire.css:1083）。这与本 PR “JS 禁用/失败、老浏览器不再空屏”的目标相反，用户会看到后续主内容空白。建议只在 reveal 脚本成功接管后启用隐藏态，或为 module 不支持/加载失败路径显式 fail-open。

建议

  • 当前 GitHub 返回 mergeable=MERGEABLE、mergeStateStatus=BEHIND；不是冲突 blocker，但合并前建议更新到最新 main 后再跑一次静态校验/预览。
  • 修复后建议补一个最小回归检查：禁用/阻断 githire-scroll.js 或模拟不支持 module 时，确认 .wf-panel、.ritual-card、closer 文案仍可见。

结论：❌ 暂不可合并（存在 blocker）

wuyupeng and others added 2 commits June 1, 2026 11:10
wuyupeng @claude
fix(reveal): 让 reveal 脚本接管 .js 隐藏态,修复 module 失败时空屏
e87c71d 
review blocker:此前 .js 由 head 普通脚本无条件添加,但 reveal 逻辑在底部
type="module"。module 不支持 / 脚本 404 / `three` import 失败时,.js 已存在
却没有任何代码揭示内容,html:not(.js) 兜底失效 → workflow/ritual/closer 空屏。

- 将 .js 的添加从 head 移入 githire-scroll.js,放在 stage 初始化(try/catch)
  之后、reveal 逻辑之前。module 不跑则 .js 永不添加 → 兜底强制可见(fail-open)。
- 更新兜底块注释说明新机制;重建 en 镜像同步移除 head 注入。
- 新增 scripts/check-reveal-failsafe.mjs + npm run check:failsafe:
  jsdom 模拟脚本不执行,断言 <html> 无 .js、兜底覆盖全部隐藏选择器、
  .js 仅由 reveal 脚本在 stage 之后添加。

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
wuyupeng
Merge remote-tracking branch 'origin/main' into design/index-a11y-and…
27df7a5 
…-copy-polish
@realRoc

realRoc commented Jun 1, 2026

Copy link
Copy Markdown
Owner Author

已处理 review 的 blocker 与建议(commit 27df7a5 + 合并最新 main)。

Blocker — module 失败时空屏:完全成立,已修。
根因:.js 之前由 head 普通脚本无条件添加,而 reveal 逻辑在底部 type="module"。module 不支持 / 脚本 404 / three import 失败时,.js 已存在却无人揭示内容 → html:not(.js) 兜底失效 → workflow/ritual/closer 空屏。

修法(reviewer 的第一个建议:只在 reveal 脚本接管后启用隐藏态):

  • 把 .js 的添加从 head 移入 githire-scroll.js,放在 stage 初始化(已被 try/catch 兜住)之后、reveal 逻辑之前。
  • module 不支持 / 加载失败 / import three 失败 → 整个脚本不执行 → .js 永不添加 → 兜底 fail-open 强制可见。两处 head 的内联注入已移除并重建 en 镜像。

最小回归检查:已补。 scripts/check-reveal-failsafe.mjs(npm run check:failsafe)用 jsdom 模拟脚本不执行,断言:① <html> 无 .js;② 兜底块覆盖全部 13 个隐藏 reveal 选择器并强制 opacity:1 + transform:none;③ .js 仅由 reveal 脚本在 stage.start() 之后添加、HTML 内联不再注入。当前全绿。

BEHIND: 已合并最新 origin/main(含 #30),无冲突,现为 MERGEABLE。

劳烦再 review 一轮 🙏

@realRoc

realRoc commented Jun 1, 2026

Copy link
Copy Markdown
Owner Author

🤖 由 Codex 自动生成

建议

  • docs/githire.css:64 全局 :focus-visible 仍使用 --accent，它和 --paper 的对比度约 2.77:1，低于 3:1。建议改用 --accent-ink 或单独的 focus token，避免这轮 a11y 修复在键盘焦点状态上留下边界不达标点。
  • scripts/check-reveal-failsafe.mjs:64 这条顺序断言在 stage.start() 被删掉时会误通过（indexOf 返回 -1，仍小于 .js 的位置）。建议先断言 startPos >= 0 / addPos >= 0，再比较顺序，让 regression guard 真正覆盖“stage init 之后再加 .js”。

结论：✅ 可以合并

@realRoc
realRoc merged commit 55896e0 into main Jun 1, 2026
1 check passed
@realRoc
realRoc deleted the design/index-a11y-and-copy-polish branch June 1, 2026 03:21
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@realRoc