iter(g79): 表头排序补键盘可达与 scope 语义
This commit is contained in:
@@ -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
@@ -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,
|
||||||
|
|||||||
@@ -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,
|
||||||
|
|||||||
Reference in New Issue
Block a user