Error state

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

<!-- The empty state's tray. Name the failure; role="alert" only if it appeared after an action. -->
<div class="tui-empty tui-error-state">
  <div class="tui-empty__outline" aria-hidden="true"><i></i><i></i><i></i></div>
  <h2 class="tui-status tui-error-state__title"><span class="tui-lamp" data-lamp="red" data-on aria-hidden="true"></span>The invoices did not load</h2>
  <p class="tui-empty__text">The server took too long to answer. Nothing was lost.</p>
  <span class="tui-error-state__said" role="status"></span>
  <div class="tui-error-state__actions">
    <button class="tui-key tui-key--primary" type="button" data-error-retry>Retry</button>
    <a class="tui-key tui-key--flat" href="/status">Check the status page</a>
  </div>
</div>

import { setRetrying } from '/kit/kit.mjs';   // wires every [data-error-retry]

tray.addEventListener('tui-error-retry', async () => {
  // The key is already held and the lamp amber.
  try { show(await load()); }                                  // success: replace the tray with the view
  catch { setRetrying(tray, false, 'Still not loading.'); }     // failure: put the key back, say so
});

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

• The title is a heading, so a screen reader user can find what failed from the heading list. The words say what happened; the red lamp is hidden from a screen reader and is only a second sign.
• Use role="alert" only when the failure appears after an action, such as a save, so it interrupts. A view that fails on load is simply read in its place.
• Tab reaches Retry and Enter or Space presses it. Retry keeps the focus. The key is aria-disabled, not disabled, while it works, so the person is not thrown out of it, and the polite status region says “Retrying” and, if it fails again, what you tell it to.
• The key says what it does: “Retry”, or “Check again” when the cause is the connection. A way round is a link or a flat key with its own words, never a bare “Learn more”.
• The lamp turns amber and blinks while retrying; the blink stops under reduced motion and the lamp stays lit amber. Keys are 44px on a phone and the tray never scrolls sideways.

No new tray. It is .tui-empty with a lit lamp and an added row for the keys, so the recess, the printed outline and the way each finish draws them are the empty state’s own. The held key is the kit’s aria-disabled key with its words swapped by about thirty lines of script, and the lamp turns amber because the tray says aria-busy, which is also what a screen reader hears.