Announcement Banner Changelog Block for React

Edit AUDIENCES at the top of the file: each audience has an id, a label and its highlights, each an icon, a title and a sentence. Add an audience by adding one entry; the tabs and panels follow. The headline, the version v3.4.0 and its date are plain text in the first column, and the date on screen is spelled out from an ISO day by a small helper, so it reads the same on the server and in every browser. Keep to two or three highlights per audience: the panels share one height, set by the tallest, so the page never moves when you switch.

Edit EARLIER, newest first: each release has a version, a date as an ISO day, a title and an href to its own page. Three is the design: the list is a pointer, not the archive, and View all releases leads to the rest.

The tabs are a real tab list named Audience: Tab moves into it, the Left and Right arrows move between audiences (mirrored in a right-to-left layout), and the panel under it is the next stop. A screen reader hears the selected tab and its panel; the unseen copy that holds the height is hidden from it and from the keyboard.

Read the release notes and View all releases are links (href="#"): point them at the release's page and your archive. Read the release notes is the block's one Shine Button: a band of light sweeps across it once on hover and keyboard focus. Each Earlier title is a link to its own release. Both buttons render the link they're given with render, with nativeButton={false}.

The headline, the tabs and the Earlier list fade up once on load, with CSS transitions (below the first screen on a phone, the button and the list simply appear). With reduced motion the entrances are off and the block simply appears. Switching a tab swaps its panel at once.

Below the lg breakpoint the divider becomes a rule with + marks between the two parts, the three tabs share the row, a highlight's text wraps beside its icon, and the Earlier list follows the button. Nothing scrolls sideways at 320 pixels, and in a right-to-left layout the columns swap sides while the version numbers stay left to right.