Stories Gallery Block for React

Each highlight in STORIES has a label and pages; each page has a date, a day, a line and a scene. Replace the Scene on a page (and the cover in the tray) with <img alt="" className="size-full object-cover" src={…} />; the caption names the picture. Pages are 9 wide for 16 high and the picture is cropped to the viewer, so keep the subject near the middle.

The filling bar is a CSS animation over five seconds; when it ends the viewer goes to the next page, and after the last page into the next highlight. At the end of the last highlight the timer stops and Next says "Done". The Pause toggle holds the animation, and so do the pointer over the viewer and keyboard focus inside it. Under reduced motion the toggle starts pressed and nothing advances until you start it. Change the 5s in FILL to change the pace.

Tab reaches each highlight and Enter or Space opens it. Inside, the arrow keys step through the pages (mirrored in a right-to-left layout) and on into the next or the previous highlight, Tab cycles through the bars, Pause, close, Previous and Next, and Escape closes. The tap zones are for pointers only and are out of the tab order. Moves you make are announced; the timer's are not. Focus returns to the highlight last shown, not the one you opened, so step into another highlight and close and you land on that one. DialogContent takes finalFocus, a function that returns that highlight.

A full ring is a highlight you have not opened in this visit; a thin one has been read. Screen readers hear ", read" after the label. The state is kept in the page only: nothing is saved.

The tray is a snap scroller and the viewer fills the screen, with the bars and the close button at the top and Previous and Next at the foot within reach of a thumb. A tap on the start edge of a page goes back and a tap anywhere else goes on.

Yes. The pictures mix your theme's tokens, and the viewer uses your theme's dialog surface. The tray band ends the block with no closing line.