Single Open Accordion Blog Block for React

No: the accordion is single-open on every target, so opening a row folds the previous one. A row can also be folded again, leaving all four closed. To allow several at once, turn on multiple opening in the Accordion's own props.

Edit POSTS at the top of the file: each post has an id, a title, a dek, an author, a category, an ISO date, the reading minutes and a href. The number in the row comes from the post's place in the list, and the date is formatted from the ISO string in UTC, so it reads the same on the server and in every browser.

Yes. Every trigger sits in an h3 under the block's one h2, so a screen-reader user can move between the posts by heading as well as by arrow keys. The Accordion renders the heading around the trigger itself.

Tab reaches each row's trigger, and Space or Enter opens it. The arrow keys do not move between triggers here: use Tab.

Yes, closed panels stay in the markup, so the dek and the link are in the page source.

The number and the title share a line and the date and reading time drop under the title. The panel lines up with the title, and the byline, category and link wrap onto separate lines when they do not fit. Nothing scrolls sideways at 320 pixels.