Announcement Blog Block for React

Edit LEAD and PAST at the top of the file. LEAD has a title, a dek, an author, an ISO date, the reading time, an href and the numeral the panel sets. PAST is a list of a title, a date, a category (Product, Community or Policy) and an href. Dates are fixed and formatted in UTC; the list is newest first.

Each announcement is a date (the term) with its title and its category (the descriptions), which is what a dl means, and a screen reader announces the date before the title. Each row is one link, its title: the link's after: box covers the row. The date has a hidden "Published" in front of it.

A shell with a tint and a hairline holds a raised bg-card panel with a ring and a shadow, and the corner marks are Guides around the shell. The numeral cover is set in container units and hidden from assistive technology; the title and dek beside it carry the meaning. Read the announcement is the only link in the lead, so the title isn't linked twice. The Shine Button renders the link it's given with render, with nativeButton={false}.

The copy comes first, the framed panel follows under a drawn rule, and the past announcements are rows whose title drops under the date and the badge. The Shine Button is on the second screen at most and nothing scrolls sideways at 320 pixels.

Yes. The split, the rows and the arrows mirror, dates and reading times are isolated with bdi, and the panel moves to the other side. The numeral cover is artwork and stays as drawn.

Yes. Replace NumeralCover with an img that has object-cover and size-full inside the same 16:10 frame, keep it aria-hidden and let the title and dek carry the meaning.