Numbered Announcements Banner Block for React

The title is a link that Link Overlay stretches over the row with a pseudo-element, so the row is one target for a mouse and one tab stop for a keyboard, and a screen reader reads a single link named by the title. The row tints on hover, and on keyboard focus it gets a ring around the whole row, not just the text.

The rows are an ordered list (ol), so the order is exposed to assistive technology on its own; the visible 01, 02, 03 are decoration and hidden from it, which stops a screen reader from reading the digits as part of each title. Change ANNOUNCEMENTS and the numbers follow.

Three is the sweet spot and five is the limit: past that it stops reading as a banner and starts reading as a notification list. If you need more, link to your changelog from the last row instead of adding rows.

The number sits at the start and the arrow at the end, in both directions, and the arrow flips to point the other way. Titles wrap naturally; nothing is positioned with physical sides.

The next block's top rule is this block's bottom edge, so a closing rule would double it. The last row simply ends there.

Titles wrap to two lines beside the number and the arrow, and each row stays one big touch target. Nothing scrolls sideways at 320 pixels.