Result

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

<!-- success and warning are role="status"; a failure is role="alert". -->
<section class="tui-result" data-result="success" role="status" aria-labelledby="done">
  <div class="tui-result__lens"><span class="tui-lamp" data-on aria-hidden="true"></span></div>
  <h2 class="tui-result__title" id="done" tabindex="-1">Payment received</h2>
  <p class="tui-result__text">Your receipt is on its way to your inbox.</p>
  <div class="tui-result__next">
    <a class="tui-key tui-key--primary" href="/orders/1042">View the order</a>
    <a class="tui-key tui-key--flat" href="/shop">Back to shop</a>
  </div>
</section>

<!-- Amber: data-lamp="amber" with data-result="warning". Red: data-lamp="red" with data-result="failure" and role="alert". -->

import { showResult } from '/kit/kit.mjs';

// A result added to the page, or one that loses its hidden attribute, takes the focus on its own.
host.append(resultElement);

// Or say so yourself:
showResult(document.querySelector('.tui-result'));   // unhides it, focuses the verdict

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

• Focus moves to the verdict when a result appears: one that is added to the page after it has loaded, or that loses its hidden. The verdict has tabindex="-1", so it takes focus from a script but is not a stop of its own, and a screen reader says it at once.
• Success and warning are role="status", read politely. A failure is role="alert", because the person has to know. The plate is named by its verdict with aria-labelledby.
• The verdict says how it went in words (“Imported, with 3 rows skipped”), never “Done” alone. The lamp is hidden from a screen reader and the amber and red lamps are never the only sign.
• The next step is a real key in the reading order straight after the sentence, so Tab from the verdict reaches it. The contrast key is the one that matters; the other key is flat.
• Nothing moves; the lamp does not blink. Keys are 44px on a phone, the plate is as wide as its container and never scrolls sideways, and the verdict’s focus ring is 2px.

The raised plate and bead-blast of a panel, with the recess the kit uses for a well cut into it as a round bezel, and the kit’s lamp enlarged to sit in the middle of it, so every finish draws the lamp as it draws any lamp. The words are the empty state’s: a lead-sized bold title and a sentence in the secondary ink, balanced so they never leave a single word on a line. The focus rule is a small observer in result.mjs that waits for the page to finish loading, then focuses the verdict of any plate that arrives or is unhidden.