Banner

Both finishes, side by side. Hover, pressed and focus are forced with .is-hover, .is-down and .is-focus; checked and disabled are real.

<!-- A labelled region at the very top of the page. The lamp only agrees with the words. -->
<section class="tui-banner" aria-label="Announcement">
  <div class="tui-banner__row">
    <div class="tui-banner__line">
      <span class="tui-lamp" data-lamp="white" data-on aria-hidden="true"></span>
      <p class="tui-banner__text"><b>Lode 4.2 is out.</b> Exports now run in the background.</p>
    </div>
    <a class="tui-key tui-key--flat tui-key--sm tui-banner__link" href="/releases/4-2">Read the notes …→…</a>
    <button class="tui-key tui-key--flat tui-key--icon tui-key--sm tui-banner__dismiss" type="button"
            aria-label="Dismiss announcement" data-tip="Dismiss" data-banner-dismiss>…×…</button>
  </div>
</section>

<!-- Only for something urgent that appears while someone works: add role="alert". -->

import '/kit/kit.mjs';   // wires every [data-banner-dismiss], now and later

document.addEventListener('tui-banner-dismiss', (e) => remember(e.target.id));   // the page decides what to remember
// From a script:
import { dismissBanner } from '/kit/kit.mjs';
dismissBanner(document.querySelector('#release-banner'));

Needs kit.css and kit.mjs. How to install the kit.

• It is a <section> with an aria-label, so it is a named region a screen reader user can jump to and skip, and it is read in its place in the page. It is not role="alert": a banner that is there when the page loads does not interrupt anyone.
• The lamp is hidden from a screen reader. The line says what the announcement is, so nothing depends on the lamp’s colour, and the words are in --tui-ink-2 with the first clause in full ink, above 4.5:1 on the plate.
• The cross is a real button with an aria-label: Tab reaches it after the key, and Enter or Space lets the banner go. After it goes, focus moves to the next focusable thing on the page, never to the top of the document or to nothing.
• The page does not jump: the row closes with an ease, so what is under it rises smoothly, and if you have scrolled past the banner it goes at once and your place is given back. Under reduced motion it goes at once.
• On a phone the cross and the key are 44px tall, and the line wraps with the key under it so nothing scrolls sideways. Focus is a 2px ring.

The raised plate the kit gives a panel, with the same bead-blast, cut across the page with square corners and a hairline under it. The row is one grid row of 1fr that eases to 0fr when the banner leaves, so the strip is never given a height of its own, and its contents are hidden as it closes so nothing can be pressed on the way out. The dismiss is about twenty lines in banner.mjs, delegated from the document so banners added later work too, and it borrows the Alert’s way of finding where focus goes next.