docs: P9-B spec §1/D-F th count corrected to element-level 24 (19 was line-count; adopted from T3 review note 3)

docs/specs/2026-10-01-p9b-a11y-keyboard-design.md

@@ -23,7 +23,7 @@
 
 1. `--color-success: #2fa46a` 对 paper 仅 **2.83**，对 surface 3.16 —— 作为成功 toast 的底色配 `text-paper`（12px 粗体，非大字号）实测 **3.16**，AA 正文需 4.5，**FAIL**。
 2. 错误 toast 用 `bg-accent`（#e8552f）配 `text-paper` 实测 **3.64**，**FAIL**（AA 正文需 4.5）。
-3. 三个管理视图共 **19 个 `<th>` 零 `scope`**，且两个「操作」列的表头是空 `<th class="px-3 py-2" />`（无可访问名）；全仓 `scope="row"` 出现 0 次。屏幕阅读器读表格时无法把单元格与列头关联。
+3. 三个管理视图共 **24 个 `<th>` 元素零 `scope`**（`grep -c '<th'` 的行计数为 19——AdminView 三张表把多个 `<th>` 塞在同一 `<tr>` 行内，故行数 < 元素数；以词界 `<th\b` 的元素计数 24 为准），且两个「操作」列的表头是空 `<th class="px-3 py-2" />`（无可访问名）；全仓 `scope="row"` 出现 0 次。屏幕阅读器读表格时无法把单元格与列头关联。
 4. 五星评分按钮的可访问名就是字形本身「★」/「☆」——读屏逐个念「星 星 星」，无法知道这是几分、当前评了几分、点了会怎样。
 5. 全站**无 skip-link**：键盘用户每个页面都要 Tab 过页头（logo + 3 条导航 + 贴纸 + 登录/用户菜单 4 项）才能到正文。
 6. SPA 导航后**无焦点管理**：`router` 的 `afterEach` 只设 title/description，焦点留在旧位置（通常是 body），读屏用户点链接后听不到任何新页面上下文。
@@ -38,7 +38,7 @@
 | D-C | 对比度守卫测试 | 新增 `app/lib/contrast.test.ts`：解析 `main.css` 的 `@theme` 令牌，按 WCAG 2.1 相对亮度算比值，钉死关键配色对 ≥4.5（焦点环 ≥3） | 仿既有 `app/lib/no-gradient.test.ts` 的源码级守卫范式，让「不许再引入低对比配色」成为可执行约束而非口头纪律。放弃逐组件视觉回归：成本高且测不到令牌层。 |
 | D-D | skip-link | `App.vue` 根 div 首子元素插 `<a href="#main" class="skip-link …">跳到主内容</a>`；`<main id="main" tabindex="-1">`；样式走 Tailwind `sr-only` + `focus:not-sr-only` 组合，**不新增 CSS 规则** | 原生锚点跳转会同时移动焦点（href 指向带 tabindex=-1 的 main），无需 JS。`focus:z-[80]` 压过 toast 的 `z-[70]`。放弃自绘 `.skip-link` CSS：工具类已足够，少一处需维护的样式。 |
 | D-E | 路由后焦点管理 | `attachTitleHook` 的 `afterEach` 改为 `(to, from)`，当 `to.path !== from.path` 时对 `#main` 调 `focus({ preventScroll: true })`；`#main` 不存在时静默 no-op | 只在**路径**变化时移焦：`/games → /games?tag=数字`（P10 T3 的标签点击）属同页筛选，抢焦点会打断用户；路径变化才是真正的「换页」。`preventScroll` 因为 `scrollBehavior` 已负责滚动，双重滚动会抖。放弃聚焦各页 h1：17 个视图有 2 个含双 h1（GameView / OutboundView 的 notFound 分支），聚焦目标不唯一，且 h1 加 tabindex 会污染 Tab 序。 |
-| D-F | 表格列头语义 | 三个管理视图全部 `<th>` 加 `scope="col"`；两个空的操作列表头改为 `<th scope="col" class="px-3 py-2"><span class="sr-only">操作</span></th>` | `scope="col"` 是最小且正确的修复。**不**改 `<td>` → `<th scope="row">`：那要把每行首格的排版结构（含 `<span>` 嵌套、font-bold 混排）重写成表头单元格，视觉回归风险大而收益有限（列头关联已解决读屏的主要痛点）。空表头补 sr-only 文本，否则操作列在读屏里是「无名第 5 列」。 |
+| D-F | 表格列头语义 | 三个管理视图全部 `<th>` 加 `scope="col"`（元素级 24 个：AdminView 13 + AdminUsersView 6 + AdminAuditView 5）；两个空的操作列表头改为 `<th scope="col" class="px-3 py-2"><span class="sr-only">操作</span></th>` | `scope="col"` 是最小且正确的修复。**不**改 `<td>` → `<th scope="row">`：那要把每行首格的排版结构（含 `<span>` 嵌套、font-bold 混排）重写成表头单元格，视觉回归风险大而收益有限（列头关联已解决读屏的主要痛点）。空表头补 sr-only 文本，否则操作列在读屏里是「无名第 5 列」。 |
 | D-G | 表格守卫测试 | 新增 `app/lib/tableScope.test.ts`：扫描 `app/**/*.vue`，断言每个 `<th` 都带 `scope=` | 与 D-C 同为源码级守卫，覆盖现有 5 张表与将来新增的表，比逐视图单测便宜且不随表格增删失效。放弃只测两个有单测的视图：AdminView 无测试文件，逐视图补测是 3 份重复劳动。 |
 | D-H | 五星评分可访问名 | 分组 `<span role="group" :aria-label="rated ? \`评分：${score} 星\` : '评分'">`；每颗星 `:aria-label="\`评 ${i} 星\`"`，内层字形 `<span aria-hidden="true">` | `aria-label` 覆盖字形成为可访问名，读屏念「评 3 星」而非「星」。分组标签携带当前值（已评几分），补齐「点了会怎样/现在是什么」。**不**用 `radiogroup`/`radio` + `aria-checked`：本控件支持「点当前分 = 撤评」，radio 无法表达取消选中；也**不**用逐星 `aria-pressed`——点亮是 `i <= litStars` 的连续区间，逐星 pressed 会把「4 分」播报成「1、2、3、4 星都按下」，语义反而更糊。 |
 | D-I | toast 实时区重构（收口 P10 T1(d)）**D-I′ re-pin，见 §3.5** | 容器与每条 toast 均**不带**任何播报语义；另设一个**常驻**的 `sr-only` 播报区 `<p role="status" aria-live="polite">`，其文字在挂载后由 watch 驱动变更 | 播报区必须**先存在**再变更文字，读屏才会播报。初稿方案（把 `role=status` 挂在每条 toast 的文本 `<p>` 上）被 T1 实现者指出为缺陷：**播报区与文字同时创建**，在多个读屏+浏览器组合下不播报首条——等于把「按钮噪音」问题换成「彻底静默」问题。改为 Radix Toast / Headless UI 等无障碍组件库的标准做法：视觉层与播报层解耦。放弃「容器保留 role、按钮 aria-hidden」：按钮对读屏消失，鼠标用户能关、读屏用户关不掉，更糟。放弃「每条 toast 各自 role=status」：即初稿，见上。 |