Sortable tables (v2): announce sort changes + keep focus
Sorting is a state change. The “AFTER” version uses header buttons + aria-sort, keeps focus on the control you used,
and announces the new order politely. It also uses a stable tie-breaker so equal values don’t reshuffle.
BEFORE (broken)
Mouse-only + focus loss
Status: Unsorted.
| Name | Score | Time (ms) |
|---|
Problems: you can’t reach the “controls” with Tab, and this demo intentionally rebuilds the header on each sort, causing focus loss.
AFTER (fixed)
Keyboard + aria-sort + stable ties
Unsorted.
Tip: sort cycles ascending → descending → none. The active column exposes state via aria-sort.