Recommended bookshelf About Block for React

The books are BOOKS at the top of the file. Each has a title, a why, a by and a role, plus a height class and a pattern class for the spine. The heading counts BOOKS. The first book starts selected. Add or remove rows freely: the shelf, the scroll and the note are drawn from the array.

The heading is the section's only h2. The shelf is a group named "Books we recommend", and each spine's name is its title. Under the shelf, one h3 ("Why we recommend it") introduces the reason and who recommended it. The other reasons stay in the page but are hidden from assistive technology until that spine is chosen. After you choose a different book, a polite live region repeats the reason. The lines and the plank are hidden from assistive technology.

Pointing at a spine, moving focus onto it, or pressing it selects that book and pulls the spine forward. The selected book stays selected: pressing it again does not clear it. The note under the shelf updates to that book's reason.

Yes. All eight reasons are in the page. The ones you are not looking at are invisible, so the note does not change height, and they are removed from the tab order and from the accessibility tree.

The shelf scrolls sideways and the spines stay on the plank. The note sits under the shelf at full width. Nothing else on the page scrolls sideways at 320 pixels, and in a right-to-left layout the vertical titles flip their writing mode.

The header and the shelf fade up once on load, and a chosen spine eases up. With reduced motion the fade and the ease are off, so a spine changes place at once. The block has no autoplay and nothing loops.