Talks Accordion About Block for React

UPCOMING and PAST at the top of the file are lists of talks: a title, an event, a kind, a speaker, an abstract and how it reads. An upcoming talk also has a date (month and day) for its time element. Keep four in each list so the two panels are about the same height; the first row of each opens on load (OPEN_UPCOMING, OPEN_PAST).

Each row's title is a button inside a heading: Enter or Space opens and closes it, and more than one can be open. Tab moves between the rows. The arrow keys don't move between the rows; use Tab.

They are the library's tabs: one tab stop, the arrow keys move between them, and the list of the chosen tab follows. Both lists, with their first rows open, are stacked unseen under the open one, hidden from assistive technology and inert, so the tallest sets the height and switching never moves the page. Base UI selects a tab as it takes focus.

A date goes stale on a page nobody edits. Upcoming talks show a month and day in a time element; past ones say how long ago in the words you write in the data. These are fixed text, not computed from today, so update them when you update the list.

The switch takes the full width under the header and the rows stack: title, then the event, kind and day. The plus becomes a minus when a row is open. Nothing scrolls sideways at 320 pixels, and in a right-to-left layout the Slides arrow turns around.

The header and the list fade up once on load, the plus turns into a minus, and the answer opens with the library's height transition. With reduced motion the entrance and the turn are off. Base UI and React Aria's panels ignore reduced motion for the height change, so say so if your page needs it off.