The grid — 500 × 15, compact
A sortable column claims its order (aria-sort + data-sort), a select-all control names itself and every row states its selection, the header and leading column stick inside a focusable named scroll region, and data-density="compact" scales the whole shell. On paper the table cuts to its first four columns (data-print).
building the grid…
The wizard — mid-flow
A shared nav owns an empty <form> wrapping the panels: the app moves exactly one aria-current="step" and one panel per click, panels are hidden — never removed, so back preserves input — and leaving a step runs native validation. The stepper contract is exactly one current step on an <li>.
- Account
- Profile
- Review
Text expansion — DE and AR
Expansion breaks more layouts than direction. The elastic row below absorbs ~30% German and full Arabic right-to-left without a media query; the RTL section mirrors for free through logical properties.
قسم من اليمين إلى اليسار
المحتوى العربي يتبع اتجاه الكتابة دون أي قواعد خاصة — الخصائص المنطقية تتولى الأمر.
Keyboard — every surface reachable
A skip link takes the first Tab stop; tabs and the popover menu are armed (js/barefoot.js), so roving focus and arrow-key navigation work; the filter clears on Escape. Try it with the keyboard only.