Podcasts Team Block for React

Edit EPISODES at the top of the file, newest first: a number, a title, the speakers (a name and a role each) and the length in minutes. The first is the featured episode; the rest are the earlier rows. The bar lengths are worked out from the longest of the earlier episodes, and the sort is computed from the same data.

No. The waveform is a drawing, a row of bars from a list of heights, hidden from assistive technology. Listen and each episode title are plain links (href="#"): point them at your host's page, your feed or a player of your own. The length is written out as text, so it doesn't depend on the drawing.

It is a radio group named "Order earlier episodes": Tab moves into it and the arrow keys move between the two choices, choosing as they go. The rows re-order straight away, a polite status line says which order is showing, and the page keeps its height because every row is the same height.

It is a link. The button renders the link it's given with render, with nativeButton={false}.

The header, the framed cell and the rows stack. The Listen button sits beside the title when there is room and wraps below it when there isn't; each row puts the length bar under the speakers. Nothing scrolls sideways at 320 pixels.

Yes, with one exception on purpose: the waveform and the length bars are drawn left to right in dir="ltr" boxes, because time and length run one way. The episode numbers and lengths are wrapped in bdi.