demo · v137
Tab walker
Press Tab through a toolbar whose visual order disagrees with its DOM. Toggle the new reading-flow and reading-order properties to bring focus into line with sight without rewriting markup. A live path trace records every focus jump.
Heads upRequires Chrome 137+. Older browsers walk DOM order regardless of the property selection — useful to see the regression.
Press Tab from this label to walk the toolbar. Shift+Tab walks backwards. The path trace below appends every focus event.
trace: —
DOM order
resolved walk
the code
.toolbar {
display: flex;
flex-direction: row-reverse;
reading-flow: flex-visual; /* tab order follows what users see */
}
.toolbar > .save-btn {
reading-order: 1; /* primary action focuses first */
}