Success Alert Banner Block for React

Edit DEPLOY at the top of the file: the heading, the line, the link and checks, the number of checks. The segments are drawn from that number (SEGMENTS), and the sentence prints it, so the two cannot disagree. The phone layout is two rows of nine: if you change the number of checks, change grid-cols-9 to half of it.

No. It is decoration: the sentence says "18 of 18 checks passed", so a screen reader hears the same fact in words and the bar is hidden from it. The count sits in a bdi element so a right-to-left layout keeps it whole, and the bar keeps one direction (dir="ltr") so it fills the same way on every page.

Fill only the passed segments with bg-foreground and leave the rest bg-border, then change the sentence to "17 of 18 checks passed". Keep the failure's meaning in words, and move to the warning or error alert when the run did not succeed, rather than recolouring this one.

The band fades in once when the page loads and the segments grow and fade in one after another, a short CSS transition each with a 35 ms step. With reduced motion turned on nothing animates and every segment is simply there.

The notice is part of the page from the first paint, so it is a section named by its heading, which screen readers list with the page's regions. A live region only announces content that changes after load. If you show it after a deploy finishes, render an empty role="status" element from the start and fill it when the result arrives.

The text takes the full width and the segments drop under it, indented to line up with the heading, in two rows of nine. Nothing scrolls sideways at 320 pixels, and in a right-to-left layout the icon, the text and the arrow mirror.