Radio Weekly Programme Profile Block for React

Edit SHOWS in the Ark file: each show has the days it airs (Monday is 0), the hour it starts, how many hours it runs, a host, two genres and its last guest with a day. The grid places every show with a cell that spans its hours, the day lists find the gaps between shows, and the card and the "On air" word are worked out from the data and the fixed date. Change AS_OF and NOW_HOUR to move the now line.

It is a fixed reading: the weekday comes from the date constant and the hour from NOW_HOUR, and the line is placed from the grid's own row height, so it always sits on the top edge of that hour's row. It doesn't tick: nothing reads the clock, so the page looks the same whenever it loads. In your app, feed it the real time and move the line from a timer or a server value.

Every show cell holds a native radio, so Tab enters the grid at the picked show and the arrow keys step through the shows in table order, picking each. A screen reader hears the show, the day and the hours ("Drive Time, Friday, 16:00 to 19:00"). The picked show's other days are tinted so you can see where else it airs, and the card says which days. The now line is decoration; the "On air" word and the table's caption say the same thing in text.

Below 1024 pixels the grid is replaced by one row of day tabs that scrolls sideways, today's tab first selected, and a list of that day's shows in time order with the gaps named. Each list is the same height, so switching days moves nothing, and picking a show fills the same card. The tabs move between days with the arrow keys.

Everything: picking a show only changes the card and the polite status line, and nothing plays, streams or is sent. To wire it up, load your station's schedule into SHOWS (a server component can pass it in), keep the helpers that place shows and find gaps, and replace the fixed "now" with the real time. Last guests are typed sample data.

The grid is a table with a caption, th cells for the days and hours, and today's column marked with aria-current="date". The state is never colour alone: the picked cell has a double ring, the on-air show has a word and a dot, and a gap says what it is. The status line is a polite live region present from the start. The table is laid out left to right in any language (it is a time axis), the names inside it are isolated for mixed scripts, and the entrance is a CSS fade that stops under reduced motion.