Loading overlay

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

<section class="tui-panel tui-loading" aria-busy="false" aria-label="Invoice 0412">
  <div class="tui-loading__content">
    <!-- the panel, as it always is -->
  </div>
  <div class="tui-loading__pane">
    <div class="tui-loading__plate" role="status" tabindex="-1">
      <span class="tui-spinner tui-spinner--sm">
        <span class="tui-spinner__ring" aria-hidden="true"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span>
      </span>
      <span class="tui-loading__text">Saving your changes</span>
    </div>
  </div>
</section>

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

const panel = document.querySelector('.tui-loading');

setBusy(panel, true, 'Saving your changes');   // glass down: content inert, the plate says why
await save();
setBusy(panel, false);                          // glass up: content live, focus returned

// aria-busy set by hand works too: kit.mjs watches it and keeps the content inert in step.

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

• The panel carries aria-busy, which tells a screen reader its content is changing; the plate is a polite role="status", so its line is said when the glass comes down and again when the words change.
• What is underneath is inert while the glass is down: it cannot be pressed, tabbed to or read, so nobody acts on a form that is mid-save. It is given back, with the focus, when the glass lifts.
• If the focus was inside the panel it moves to the plate, which has a visible 2px ring, and returns to where it was when the work is done.
• The glass dims what is under it, but the words are on an ordinary plate in ordinary ink (the same contrast as any other text), so they read the same in every finish. Where reduced transparency is asked for, the glass is solid.
• Under reduced motion the glass appears at once and the spinner holds on one lit lamp; the words are the same.

The panel is given a second layer, an absolutely placed pane the size of the panel with the panel’s own corners, so the panel is neither replaced nor resized. The glass is the kit’s shadow colour at half strength with a little blur, a faint sheen from the upper left and a lit lip; the plate on it is a float plate, the same one a menu uses. The script does the one thing CSS cannot, making the content inert and looking after the focus.