iter(g79): 表头排序补键盘可达与 scope 语义

This commit is contained in:
HIsheR
2026-10-26 12:57:15 +08:00
parent 907b8eb09c
commit 2c0b9fdad6
3 changed files with 16 additions and 2 deletions
+8
View File
@@ -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 全绿", "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", "status": "done",
"notes": "自补:布局基础件缺失;间距一律走 --ua-space-* 令牌,几何用内联 style 不进皮肤样式表" "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"
} }
] ]
} }
+1 -1
View File
@@ -1074,7 +1074,7 @@ const content = h(
section( section(
'sec-table', 'sec-table',
'数据表格', '数据表格',
'粘性表头、斑马纹、行选择(全选三态 + 已选计数,选中行低视觉比重)、点表头排序、工具栏筛选、底部分页。', '粘性表头、斑马纹、行选择(全选三态 + 已选计数,选中行低视觉比重)、点表头或 Tab 聚焦后按 Enter/空格 排序、工具栏筛选、底部分页。',
card({ title: '用户表' }, dataTable({ card({ title: '用户表' }, dataTable({
data: users, data: users,
selectable: true, selectable: true,
+7 -1
View File
@@ -103,11 +103,17 @@ export function dataTable<T extends { id: RowKey }>(props: DataTableProps<T>): H
); );
const th = (col: (typeof props.columns)[number]) => { const th = (col: (typeof props.columns)[number]) => {
const toggle = () => col.sortable && table.dispatch({ type: 'toggleSort', key: col.key }); // 鼠标与键盘共用的排序入口
const el = h( const el = h(
'th', 'th',
{ {
class: `${col.sortable ? 'ua-sortable' : ''}${col.align ? ` ua-align-${col.align}` : ''}`.trim(), 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.header ?? col.key,
col.sortable ? sortMark(col.key) : null, col.sortable ? sortMark(col.key) : null,