Timetable Day in the Life About Block for React

The lanes are LANES and the blocks are BLOCKS at the top of the file. A block has a title, a lane, its start and end as text, a note, and where it sits: from is the first half-hour column it covers, counted from 9:00, and span is how many half-hours it covers. The timetable has 16 half-hour columns; change HOURS and DAY_END with it if your day is longer.

Choosing one block out of several, with exactly one chosen at a time, is what a radio group is. It gives the keyboard for free: Tab enters the group, the arrow keys move through the blocks in reading order, and a screen reader hears each block's name and "1 of 6". The radio itself is visually hidden and the block is its label, so the whole block is the target.

A team block is the people, with a control to pick among them. This is about time: one person's day laid out against the clock, so the story is how a day is balanced between focus, meetings and support, not who works here. See the team category for people-first blocks.

A clock runs the same way for everyone, so the timetable keeps its direction (dir="ltr") and the hours still read left to right; the header, the note and the rest of the page follow the page's direction. Times are isolated so a colon-separated time keeps its order.

The timetable stays 44 rem wide and scrolls inside its own frame, with each lane's name pinned at the start so you always know which lane you are in. The note under it stacks below at the page's width. Nothing scrolls the page sideways at 320 pixels.

The header, the timetable and the note fade up once on load, and a block eases to its inverted colour when you choose it, all with CSS transitions. With reduced motion the transitions are off.