ref(tables): Share one sortable header cell across table shells#120587
Draft
JoshuaKGoldberg wants to merge 1 commit into
Draft
Conversation
github-actions
Bot
added
the
Scope: Frontend
Contributor
Sentry Snapshot Testing
No base snapshots found to compare against. Make sure snapshots are uploaded from your main branch. |
Contributor
Story previewsPreview the stories changed in this PR on the Vercel deployment:
Preview deployment: https://sentry-a2va0imzy.sentry.dev |
JoshuaKGoldberg
force-pushed
the
joshgoldberg/de-1399-shared-sortable-header-cell-aria-sort
branch
from
July 24, 2026 21:09
80a9d88 to
53e5fc0
Compare
JoshuaKGoldberg
force-pushed
the
joshgoldberg/de-1399-shared-sortable-header-cell-aria-sort
branch
from
July 24, 2026 21:17
53e5fc0 to
1ad9061
Compare
SimpleTable.HeaderCell, the explore table kit, and the replay grids each drew their own sortable header: a label, an optional tooltip, and an arrow whose direction was recomputed from a different sort shape every time. Consolidate them into one SortableHeaderCell in components/tables. Each shell keeps its own padding, border, background, and typography; the shared cell owns the interactive element, the label, truncation, and the sort indicator. Sortable headers now behave the same everywhere: a <button> when the column can be sorted, an aria-hidden arrow for the active direction beside its label, and a label that clips with an ellipsis and reveals its full text on hover. Previously only the explore kit truncated, only SimpleTable hid the arrow from screen readers, the explore kit sorted from a click-handled <div> that keyboard users could not reach, and the replay grids pushed the arrow to the far edge of the column, away from the label it describes. Also thread aria-sort through the gridEditable lineage from columnSortBy, which GridEditable accepted but never used, so the discover, performance, insights, and profiling tables announce their sort state. The replay network grid's Status column was 76px, too narrow for its label alongside the info tooltip, so widen it to fit rather than routing a special case through the shared cell. Deletes the duplicate Directions union, TableHeadCellContent and its isFrozen prop, SimpleTable's isSorted prop and SortIndicator, and dead ref props on the replay header cells. Fixes DE-1399
JoshuaKGoldberg
force-pushed
the
joshgoldberg/de-1399-shared-sortable-header-cell-aria-sort
branch
from
July 24, 2026 21:33
1ad9061 to
f41a886
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Stacked on #120560.
SimpleTable.HeaderCell, the explore table kit, and the replay grids each drew their own sortable header — a label, an optional tooltip, and an arrow whose direction was recomputed from a different sort shape every time. This consolidates them into oneSortableHeaderCellincomponents/tables. Each shell keeps its own padding, border, background, and typography; the shared cell owns the interactive element, the label, truncation, and the sort indicator.Sortable headers now behave the same everywhere:
<button>when the column can be sorted, so columns are keyboard-sortable — the explore kit previously sorted from a click-handled<div>aria-sorton thecolumnheader, including the whole gridEditable lineage (discover, performance, insights, profiling), threaded from thecolumnSortBypropGridEditablealready accepted but never usedaria-hiddenarrow for the active directionDeleted along the way: the duplicate
Directionsunion,TableHeadCellContentand itsisFrozenprop,SimpleTable'sisSortedprop andSortIndicator, and deadrefprops on the replay header cells.Screenshots
Row content is blanked with
visibility: hidden(layout preserved, so columns are identical) because these are production tables and the rows carry customer data. The change is confined to the header row.Header children go
div→button; sorted column gainsaria-sort="descending". No visual delta.Same as above, plus the empty first head cell no longer renders a placeholder
div.Two fixes. The sort arrow and the ⓘ tooltip sat at the column's right edge, far from the label they describe — they now sit beside it, and unsorted columns no longer reserve an invisible arrow.
Statuswas 76px, too narrow for its label plus the ⓘ, so it is now 104px and fits.Every column reserved an invisible arrow before (5 svgs); now only the sorted column draws one, and it sits beside its label.
Sortable headers stay
buttons and the sorted Last Issue column gainsaria-sort="descending"; Assignee stays a non-interactivediv. Production renders fewer columns here than the local build (flag difference, unrelated to this change).