New Feature Top Bar Banner Block for React

It is plain markup in the Preview component: muted bars for the text lines, two chips with a cursor icon for the people, and a bubble for the comment, all from the theme's tokens, in greyscale. It is aria-hidden because it is decoration: the popover's title and sentence say what it shows. Replace it with a screenshot or your own drawing; keep it out of the tab order.

"See it" is a real button that opens the popover and reports aria-expanded. It opens below the button, Escape closes it and returns focus to the button, and a click outside closes it too. The popover is not modal: the page behind stays reachable. Its changelog link is an ordinary link, so you can Tab to it.

Edit FEATURE at the top of the file: the sentence (note), the button's words (open) and the changelog link's words and address (changelog, href). The chip, the sentence and the button should stay under about 60 characters so the line wraps to two at most at 320 pixels. The popover's title and sentence are in the JSX under the button.

The strip folds its height away (the padding is inside the fold, so it reaches 0 pixels; at once under reduced motion), becomes inert, and focus moves on to the first thing after the bar on the page. A polite status line says "Announcement dismissed." Remember the choice in a cookie your server reads, never in localStorage after the first render, which would fold the bar away on every visit.

Yes. The chip, sentence and button mirror, the chevron stays as it is, the changelog link's arrow turns around, and the preview's cursors flip with the page. The popover opens on the logical side of its button.

The line stays centred and wraps to two lines at most at 320 pixels. The popover is as wide as the screen allows, with 16 pixels of margin, and the preview scales to it.