Expanding Strips Accordion Gallery Block for React

Each entry in WALKS has a title, a place, a year, a distance, a label for the closed strip, a blurb and a scene. Add your image's address and replace the Scene in the strip with <img alt="" className="size-full object-cover" src={…} />; the button already has a name for screen readers. The picture is cropped to the strip as an object-cover image is, so it shows more of itself as the strip widens. The comment above Scene says where.

Every strip is a button, so Tab reaches each one and Enter or Space opens it. Left and Right (mirrored in a right-to-left layout) and Up and Down move to the next or previous strip and open it, with focus following; Home and End go to the first and last. The strips are in one list, so a screen reader hears "Round the lake, Harrowmere, 2025, button, expanded".

Text laid straight over a picture can fall below a readable contrast anywhere the picture is light. The caption is a solid panel in your page background, clipped away with clip-path: inset() while the strip is closed and out of the tab order and the accessibility tree (inert and aria-hidden), so a closed strip's text is never read. The label chip on a closed strip is solid for the same reason.

Strips change width under the pointer, which makes a hover trigger flicker where two strips meet. It opens on a click or tap and on a key, which also works on touch screens, where there is no hover.

The strips become five rows in a fixed-height stack: the open row is tall and the others are slim bars with their number and name. Opening a row grows it in height while the others shrink, so the block never changes height. The long sentence is hidden on a phone; the title, place, year and distance stay.

Yes. The grow transition and the caption reveal are CSS and turn off under prefers-reduced-motion; the strips then change at once. Nothing moves by itself.