iter(g71): 数据表表头补 aria-sort 三态播报

This commit is contained in:
HIsheR
2026-10-26 12:40:24 +08:00
parent 532dcbb84f
commit a6d0692e15
4 changed files with 17 additions and 6 deletions
+10 -2
View File
@@ -102,8 +102,8 @@ export function dataTable<T extends { id: RowKey }>(props: DataTableProps<T>): H
},
);
const th = (col: (typeof props.columns)[number]) =>
h(
const th = (col: (typeof props.columns)[number]) => {
const el = h(
'th',
{
class: `${col.sortable ? 'ua-sortable' : ''}${col.align ? ` ua-align-${col.align}` : ''}`.trim(),
@@ -112,6 +112,14 @@ export function dataTable<T extends { id: RowKey }>(props: DataTableProps<T>): H
col.header ?? col.key,
col.sortable ? sortMark(col.key) : null,
);
if (col.sortable) {
effect(() => {
const rule = state().sorting.find((r) => r.key === col.key); // 与视觉箭头同源
el.setAttribute('aria-sort', rule ? (rule.dir === 'asc' ? 'ascending' : 'descending') : 'none');
});
}
return el;
};
/*** 骨架行:列宽与表头对齐,行数取当前每页条数(上限 6 行防过长) ***/
const skeletonRows = (): Node[] => {
+2 -1
View File
@@ -1596,7 +1596,8 @@
"表头粘性固定(滚动容器 max-height 420px),斑马纹 + 悬停高亮由 CSS 提供",
"数据在途时传 loading(布尔或信号):表格体换成骨架行、筛选与翻页禁用,返回后置回 false 即恢复",
"需要独立分页器联动时传 page 信号:const page = signal(1),dataTable({ page }) 与 pagination({ page }) 共用",
"需要批量操作时传 selected 信号:内部勾选实时写回,外部置空或赋值即同步整表(跨页保留,按 rowKey 存)"
"需要批量操作时传 selected 信号:内部勾选实时写回,外部置空或赋值即同步整表(跨页保留,按 rowKey 存)",
"可排序表头的 aria-sort 跟随排序态同步(ascending / descending / none),读屏能直接播报当前列序,箭头只是视觉补充"
]
},
{