demo · v137

Flex Layout Fix

The accessibility bug reading-flow was designed to fix: a flex-direction: row-reverse visually reorders cards from RTL to LTR, but keyboard Tab still follows the DOM. Screen readers and tab focus jump around the screen unpredictably. reading-flow: flex-visual snaps them to what the user actually sees.

probing…

row-reverse lane

DOM 1Card A
DOM 2Card B
DOM 3Card C
DOM 4Card D

column-reverse lane

DOM 1Card A
DOM 2Card B
DOM 3Card C
DOM 4Card D

nested flex lane

DOM 1Card A
DOM 2Card B
DOM 3Card C
DOM 4Card D

Click any first visible card in a lane, then press Tab. With bug mode active, focus follows DOM order. With the fix, the row, column, and nested flex lanes resolve through the visual order.

[no focus moves yet]
visual orders:
row: D · C · B · A
column: D · C · B · A
nested: D · C · B · A
DOM order:
A · B · C · D per lane
focus order (reported by browser):
—

the code

/* Before reading-flow: visual layout and tab order disagree. */
.row { display: flex; flex-direction: row-reverse; }

/* v137: the fix — focus + a11y tree follow the visual flow. */
.row {
  display: flex;
  flex-direction: row-reverse;
  reading-flow: flex-visual;
}

/* Also valid: flex-flow (follows main + cross axes),
   source-order (explicit override). */

see also