Book Club Team Block for React

Edit CURRENT (title, author, month, the chapter the club has reached and the chapter count) and PAST (a title, an author and a month, newest first) at the top of the file. The bar, the "Chapter 7 of 12" line and the percentage are all worked out from chapter and chapters. Months are words with no year, so the list never goes stale.

No. It is a few boxes: a dark cover with an inner rule, a spine strip, the title and author set in text, and two flat books under it. It is hidden from assistive technology, and the same title and author are in the heading and the line under it, so nothing is lost. To use a real cover, replace the Plate with an image and give it empty alt text.

The words "Chapter 7 of 12" are real text beside the percentage; the bar repeats it as a drawing and is named with the same sentence, so a screen reader hears it once from the text and the drawing adds nothing new. The name is given with aria-label.

It is a heading with a button inside it, with the open state announced and the chevron turned when open. The list opens in place under the band and is the last thing in the block, so the block never draws a line below it. A closed Collapsible keeps its list in the page, hidden until it opens.

The split stacks with the copy first: header, the current read and its bar, the three facts, then a hairline and the framed plate, then the Past reads band. The avatar stack hides below sm and the list of first names remains. Nothing scrolls sideways at 320 pixels.

Yes. The divider moves to the other side, "Chapter 7 of 12", the percentage and the meeting time are wrapped in bdi, and the cover is drawn in a left-to-right box because a book's face is a picture, not text.