Author Look Inside Profile Block for React

Edit BOOKS: each has a title, year, kind, a score and the number of ratings, an optional prize, the drawing for its cover (house, light, orchard or slate, each with its own greys) and pages, the passages as two pages of short paragraphs. The words under each cover, the stars and the page count all come from that data. To show real covers, replace Cover with an image at the same 3 by 4 shape and keep the rest.

No. The stars only draw the score: they are hidden from assistive technology and unfocusable, and the score and the number of ratings are written beside them ("4.4 out of 5, 1,284 ratings"). The stars take the foreground colour, not the library's amber, and the empty ones are a faint tint, so the Follow toggle and the reading controls stay the only strong marks on the card.

Following, the ratings and the passages. Follow moves the reader count by one in the page and says so in the status line; nothing is sent. In your app, save the follow to the reader's account, read the ratings from your reviews and load the passages from the book's sample file.

The pane is a labelled region that you can scroll with the keyboard, set in a serif with a drop cap on the first paragraph of the first page. The three A buttons change the text size for both pages, Next and Previous move between the two pages and say when you reach an end, and the pane keeps its height at every size. All the passages are written for the example and are not from any real book.

The books are a named group of radio buttons, each named by its title and described by its year, kind, rating and prize, so the covers add nothing a screen reader would miss and are hidden from it. The text sizes are a named group with labels such as Larger text. The status line is a polite live region present from the start.

The four books sit in a row that scrolls sideways above the reader, each with its cover over its words. The reading pane keeps its height, and the status line and the Previous and Next buttons come under it.