From 2c0b9fdad615df94185ee7c4c43966b3668f68fa Mon Sep 17 00:00:00 2001 From: HIsheR Date: Mon, 26 Oct 2026 12:57:15 +0800 Subject: [PATCH] =?UTF-8?q?iter(g79):=20=E8=A1=A8=E5=A4=B4=E6=8E=92?= =?UTF-8?q?=E5=BA=8F=E8=A1=A5=E9=94=AE=E7=9B=98=E5=8F=AF=E8=BE=BE=E4=B8=8E?= =?UTF-8?q?=20scope=20=E8=AF=AD=E4=B9=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .ua/backlog.json | 8 ++++++++ apps/demo/main.ts | 2 +- packages/skin/ui/src/dataTable.ts | 8 +++++++- 3 files changed, 16 insertions(+), 2 deletions(-) diff --git a/.ua/backlog.json b/.ua/backlog.json index 7a036e0..a339fcf 100644 --- a/.ua/backlog.json +++ b/.ua/backlog.json @@ -988,6 +988,14 @@ "acceptance": "新增 space(props, ...children)：direction / size（sm|md|lg 走令牌，数字按像素）/ align / justify / wrap / block；manifest 参数表 + 手把手步骤 + api.exports 登记；demo 有 sec-space 区块真实调用；README 计数与分组同步；npm run check 全绿", "status": "done", "notes": "自补：布局基础件缺失；间距一律走 --ua-space-* 令牌，几何用内联 style 不进皮肤样式表" + }, + { + "id": "g79", + "title": "数据表可排序表头补键盘可达与列作用域", + "motivation": "表头只绑了 onClick，键盘用户聚焦不到、也按不出来——README 声称「关键交互都有键盘等价」，表格排序是唯一漏网的；th 还缺 scope=col，读屏无法把列标题与数据格关联", + "acceptance": "可排序 th 进 Tab 序（tabindex=0，不可排序的不抢焦点），Enter/空格 触发与点击相同的 toggleSort（空格不滚页），补 scope=col；悬停/聚焦视觉沿用既有 ua-sortable 与全局 focus-visible；dataTable 仍 ≤ 200 行；npm run check 全绿", + "notes": "自补：无障碍；排序入口收敛为单个 toggle 闭包，鼠标与键盘同源，不改核心签名", + "status": "open" } ] } diff --git a/apps/demo/main.ts b/apps/demo/main.ts index 9e36c67..5bf7dcb 100644 --- a/apps/demo/main.ts +++ b/apps/demo/main.ts @@ -1074,7 +1074,7 @@ const content = h( section( 'sec-table', '数据表格', - '粘性表头、斑马纹、行选择（全选三态 + 已选计数，选中行低视觉比重）、点表头排序、工具栏筛选、底部分页。', + '粘性表头、斑马纹、行选择（全选三态 + 已选计数，选中行低视觉比重）、点表头或 Tab 聚焦后按 Enter/空格 排序、工具栏筛选、底部分页。', card({ title: '用户表' }, dataTable({ data: users, selectable: true, diff --git a/packages/skin/ui/src/dataTable.ts b/packages/skin/ui/src/dataTable.ts index 43f5def..c209037 100644 --- a/packages/skin/ui/src/dataTable.ts +++ b/packages/skin/ui/src/dataTable.ts @@ -103,11 +103,17 @@ export function dataTable(props: DataTableProps): H ); const th = (col: (typeof props.columns)[number]) => { + const toggle = () => col.sortable && table.dispatch({ type: 'toggleSort', key: col.key }); // 鼠标与键盘共用的排序入口 const el = h( 'th', { class: `${col.sortable ? 'ua-sortable' : ''}${col.align ? ` ua-align-${col.align}` : ''}`.trim(), - onClick: () => col.sortable && table.dispatch({ type: 'toggleSort', key: col.key }), + scope: 'col', // 表头单元格语义：读屏据此把列标题与数据格关联 + tabindex: col.sortable ? '0' : null, // 可排序表头进 Tab 序，不可排序的不抢焦点 + onClick: toggle, + onKeydown: (e: KeyboardEvent) => { + if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); toggle(); } // Enter / 空格 等价鼠标点击 + }, }, col.header ?? col.key, col.sortable ? sortMark(col.key) : null,