Carousel Blog Block for React

Edit POSTS at the top of the file. Each post has a title, a one-line dek, an author, a category, a date as an ISO string, a reading time in minutes, an href, a cover and a reading (what the instrument shows). The count, the screen-reader announcement and the slide names are all computed from the list, so any number of posts works.

Tab reaches the previous and next buttons and then the visible posts' titles; the posts out of view are inert, so Tab never lands on one you can't see. The arrow keys move the carousel by one post, and in a right-to-left page the arrows follow the reading direction, so the end arrow always goes forward. A key pressed on a post's title hands focus to the previous or next button, because that post may have just left the page. The buttons wrap around at the ends, so one never disables while it has focus. A polite status line announces "Showing posts 2 to 4 of 8" for screen readers.

The posts in full view: "1–3 of 8" on a desktop, "1–2 of 8" on a tablet and "1 of 8" on a phone. It is recomputed from the screen width and the current page.

The catalog Carousel, which is Embla: the block reads its snap list, sets the slide width with basis-* classes, and replaces the arrow-key handling so it follows the page's direction.

Each is one SVG at the cover's proportions, built from circles, ticks and a needle or a bubble whose position comes from the post's reading; every stroke stays a hairline at any size and every colour is a theme token, with one foreground chip for the reading. They are artwork, so a right-to-left page never mirrors them.

Yes. The row scrolls from the end of the line, the buttons' chevrons turn, and the count and the reading time are isolated with bdi.