Questions By Audience About Block for React

Edit AUDIENCES at the top of the file. Each audience has an id, a label for the tab, a title for the panel, and answers. An answer has a question, a short lead and a detail. The first audience starts open. Add a question or an audience and the list, the panel and the height of the block follow the array.

The list stays a vertical tab list, including on a phone where it looks like a row of chips, so Up and Down move between the audiences, Home and End jump to the first and last, and Tab moves into the open list. The open row is the selected tab, marked by a bar on a large screen and a filled chip on a phone.

The open audience's answers are a definition list, each one a bold short answer and then the rest, and none of them folds away. Choosing another audience shows that audience's list. The other lists are not mounted in the tab panel.

The lists differ in length. An unseen, inert copy of every list sits in the same grid cell as the open one, so the cell keeps the height of the tallest. Those copies are out of the accessibility tree and the tab order, and they are not a second set of answers to read.

The heading stays above a single row of chips that scrolls sideways inside its band, and the open list sits under the chips. A question and its answer stack. Nothing else scrolls sideways at 320 pixels.

The heading fades up once when the page loads, and the open list fades in when you choose another audience. With reduced motion the entrances are off and the list swaps at once.