From a0e6b9d99d0d9e11a6ba757deb5e6ea53fe7f615 Mon Sep 17 00:00:00 2001 From: HerbertJulio Date: Tue, 30 Jun 2026 20:08:46 -0300 Subject: [PATCH] [ENG-46087] fix(webkit): table select-all tri-state (page-aware) and header-cell sorting MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Select-all header checkbox now reflects the current page's selection as a tri-state: checked when all page rows are selected, indeterminate when some are, unchecked when none. Switches to TanStack's page-scoped getIsAllPageRowsSelected / getIsSomePageRowsSelected / toggleAllPageRowsSelected (falls back to the full filtered model when the table is not paginated, so the non-paginated behavior is unchanged). Sorting now triggers from the whole sortable header cell — a pointer click anywhere on it, or Enter/Space while focused — in addition to the sort button. The sort button stops its own click/keydown from bubbling so activating it never double-toggles. Sortable headers are focusable with a focus-visible ring, matching the spec's accessibility intent. --- .../table/table-head-cell/table-head-cell.vue | 20 +++++++++++++++++-- .../src/components/data/table/table.vue | 5 +++-- 2 files changed, 21 insertions(+), 4 deletions(-) diff --git a/packages/webkit/src/components/data/table/table-head-cell/table-head-cell.vue b/packages/webkit/src/components/data/table/table-head-cell/table-head-cell.vue index f8b60409b..a3175d26b 100644 --- a/packages/webkit/src/components/data/table/table-head-cell/table-head-cell.vue +++ b/packages/webkit/src/components/data/table/table-head-cell/table-head-cell.vue @@ -84,6 +84,16 @@ const handleSort = (direction: 'ascending' | 'descending') => { emit('sort', direction) } + + // The whole sortable header is the sort control: a pointer click anywhere on + // it, or Enter/Space while it is focused, toggles the sort — mirroring the + // sort button's own toggle (none/descending → ascending, ascending → descending). + // The sort button stops its own click/keydown from bubbling here, so activating + // the button never double-toggles via this handler. + const toggleSort = () => { + if (!props.sortable) return + handleSort(props.sortDirection === 'ascending' ? 'descending' : 'ascending') + }