Approval request

Contract

Without any one of them the component does not do its work and turns into a decorated "are you sure?".

Accessibility

Anatomy

<ul class="inst-approval-effects">
  <li>heightmap.ts — overwrite</li>
  <li data-tone="warn">config.json — a change of settings</li>
  <li data-tone="error">chunks.bin — deletion</li>
</ul>

A tone here means irreversibility. A deletion is red because it cannot be undone — rather than because it is "bad".

States

<div class="inst-approval" data-state="pending" role="group" aria-label="Waiting">
  <div class="inst-approval-head">Confirmation is required</div>
  <div class="inst-approval-what">Write 4 files</div>
  <div class="inst-approval-actions">
    <button class="inst-btn inst-btn--sm inst-btn--primary" type="button">Allow</button>
    <button class="inst-btn inst-btn--sm" type="button">Deny</button>
  </div>
</div>
<div class="inst-approval" data-state="approved" role="group" aria-label="Allowed">
  <div class="inst-approval-head">Confirmation is required</div>
  <div class="inst-approval-what">Write 4 files</div>
  <div class="inst-approval-verdict">Allowed at 14:32</div>
</div>

After an answer the block neither disappears nor goes out — it steps back. The history of decisions stays readable: a user has to be able to come back and see what exactly they allowed an hour ago. A request that vanished cannot be checked.

JS

Include the module once per page — there is no need to initialise the components one by one, instrument.js works by delegation and sees nodes that arrived later.

<script type="module" src="instrument.js"></script>

What instrument.js does

Nothing. Here it honestly has no part: consent to an agent's action is a decision rather than the behaviour of a widget, and it cannot be faked by styling.

What the application has to do

1. Send the decision to where it is carried out.
2. Move the block into a decided state — otherwise the buttons stay live and a person presses a second time.
3. Leave visible what was decided: a block of consent is a trace in the history rather than a dialog that closed.

block.addEventListener('click', async (e) => {
  const btn = e.target.closest('[data-decision]');
  if (!btn) return;

  for (const b of block.querySelectorAll('button')) b.disabled = true;
  await api.decide(block.dataset.id, btn.dataset.decision);

  block.dataset.decided = btn.dataset.decision;
});

The buttons are disabled before the request. The network takes seconds, and in that time "Allow" gets pressed twice.

Patterns

A request from a real run — with the command, the list of consequences and the mark of the irreversible.

Note the order: what will be done, what it will touch, and only then the decision. A request beginning with the buttons demands an answer before it states the question.

<div class="inst-approval" data-state="pending" role="group" aria-labelledby="ap2">
  <div class="inst-approval-head" id="ap2">The agent asks permission</div>
  <div class="inst-approval-what">rm -rf build/ &amp;&amp; npm run build</div>
  <ul class="inst-approval-effects">
    <li>It will delete the <code>build/</code> directory entire — 1 284 files</li>
    <li data-tone="warn">Irreversible: the contents do not go to a recycle bin</li>
    <li>The rebuild will take about 40 s</li>
  </ul>
  <div class="inst-approval-actions">
    <button class="inst-btn inst-btn--sm inst-btn--primary" type="button">Allow</button>
    <button class="inst-btn inst-btn--sm" type="button">Deny</button>
    <button class="inst-btn inst-btn--ghost inst-btn--sm" type="button">Always allow</button>
  </div>
</div>

API

Related

ModalFailure blockDiffBannerTurn