Error Alert Banner Block for React

The failure is on the page from the first paint, so it is a section named by its heading, a landmark people can find and skip. role="alert" only fires when content changes after load and interrupts whatever is being read. If your build fails while someone is on the page, put role="alert" on an element that is already in the page, empty, and fill it with the heading when the failure arrives.

Edit EXCERPT at the top of the file: each line is its number, the code before the marked word, the marked word and the code after it. A line with a marked word gets the destructive edge, the tint and the wavy underline; a line without one is plain. The gutter numbers are drawn but neither selected, copied nor read out. Keep it to three or four lines: it is a quote, not a viewer.

Yes. The excerpt is a named list that scrolls sideways, and it takes focus with a visible ring, so the arrow keys scroll it. Code reads the same way in every layout: the excerpt keeps its own direction on purpose, even in a right-to-left page.

No. The heading says the deploy failed, the sentence names the type error, and the marked line has a wavy underline and a gutter edge as well as the colour, so it reads the same without colour. The destructive token is only on the icon and on that line; the text stays in your theme's foreground colours.

Both are links (href="#"): point Retry build at your retry route and View build logs at the log page. Retry build is an outline Shine Button, small, so it stays quieter than the page's main call to action; a band of light sweeps across it once on hover and keyboard focus. It renders the link it's given with render, with nativeButton={false}.

The icon, heading, sentences and both actions stack in one column; the excerpt follows under them at the full width of the page column, inside its + corner marks. At 320 pixels the page itself doesn't scroll sideways, only the excerpt does, and the commit hash is kept in reading order in a right-to-left layout.