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

2026-10-26 12:57:15 +08:00
parent 907b8eb09c
commit 2c0b9fdad6
3 changed files with 16 additions and 2 deletions
@@ -103,11 +103,17 @@ export function dataTable<T extends { id: RowKey }>(props: DataTableProps<T>): 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,