Dismissible Top Bar Banner Block for React

Edit NEWS at the top of the file: the lead in medium weight (lead), the sentence after it (detail), the link's words (link) and where it goes (href). The sentence can be as long as you like; closed, it is cut at the edge of the line with an ellipsis, so only the lead and the start of the detail have to carry the news. Put the most important words first.

It is a real button with aria-expanded and aria-controls pointing at the message, and its label never changes: the chevron turning over shows the state. The text itself is always in the page, so a screen reader reads the whole message whether or not it is clipped. The changelog link is only rendered while the message is open, so there is never a link you can Tab to that you can't see.

The point of the block is a bar that stays one line tall however long the message is. It is a single line with truncate, and the button sits beside it. Opening the message lets it wrap and the strip grows to fit; closing it again puts it back to one line. The growth is immediate, not animated, so no height is measured in script.

The strip sits in a one-row CSS grid and its padding lives inside that row. Dismissing it eases the row from 1fr to 0fr and the opacity to 0 over 300 ms, so the page below rises smoothly and the block ends up 0 pixels tall; its top rule then lies on the next block's. The bar becomes inert, the section drops its "Announcement" label, focus moves to the first thing after the bar on the page, and a polite line says "Announcement dismissed." With reduced motion on, it closes at once.

Remember the dismissal in a cookie under a key for this announcement, and read it on the server so the bar is left out of the page. Reading localStorage after the first render would show the bar and fold it away on every visit, moving the page under it. The block keeps the choice for the current page only.

Closed, the line gives up the rest of the width to the "More" button and the close, and stays one line down to 320 pixels. Open, the message wraps to as many lines as it needs and the buttons stay at the top of the row. In right-to-left layouts the buttons swap sides and the chevron stays as it is.