Disabled Bulk Action - Everyday Interface Patterns

A static empty-selection disabled state shows 0 selected, Archive disabled, Select at least one row recovery, and Disabled action preview status.

Program

A disabled bulk action state should explain what is unavailable and how to recover.

disabled_bulk_action_notice.html

Visuals: captured from real browser rendering

<section class="disabled-bulk" aria-labelledby="disabled-bulk-title"><h2 id="disabled-bulk-title">Disabled bulk action notice</h2><div class="disabled-card" aria-label="Static disabled bulk action preview"><span>0 selected</span><span>Archive disabled</span><span>Select at least one row</span></div><dl>
  <div><dt>Selected</dt><dd>0 selected</dd></div>
  <div><dt>Action</dt><dd>Archive disabled</dd></div><div><dt>Recovery</dt><dd>Select at least one row</dd></div>
  <div><dt>Status</dt><dd><span class="badge">Disabled action preview</span></dd></div></dl>
  <p class="check">Learner check: the disabled state explains how to recover.</p>
  <p class="note">Static disabled bulk action notice only; no selection engine, checkbox event, click handler, keyboard handler, form submit, row mutation, bulk action execution, archive operation, move operation, delete operation, routing, navigation, route, API, network, storage, cookie, script, event listener, timer, analytics, object URL, download, service worker, account/session behavior, live table selection, live toolbar, or live submission runs.</p></section>
<style>
  .disabled-bulk { display: grid; gap: 10px; max-width: 38rem; border: 1px solid #b45309; padding: 12px; background: #fffbeb; }
  .disabled-card { display: grid; gap: 6px; justify-self: start; min-width: 230px; border: 1px solid #b45309; background: #ffffff; padding: 10px; color: #475569; }
  .disabled-card span:first-child { color: #92400e; font-weight: 700; border-bottom: 1px solid #fde68a; padding-bottom: 4px; }
  .disabled-bulk dl { display: grid; gap: 8px; margin: 0; }
  .disabled-bulk dl div { display: grid; grid-template-columns: 8rem 1fr; gap: 8px; }
  .disabled-bulk dt { color: #475569; }
  .disabled-bulk dd, .check, .note { margin: 0; }
  .badge { border-radius: 999px; background: #fde68a; padding: 2px 8px; }
  .note { color: #475569; }
</style>

Label the disabled bulk action notice.
The section is labelled by its visible heading.
Show empty selection row.
The selected count is exact pinned data.
Show disabled action and recovery rows.
The disabled action and recovery text are exact pinned data.
Render disabled-action-preview status.
The status badge says this is a disabled action preview.
Check disabled-state readback.
The check says the disabled state explains how to recover.
Check disabled bulk honesty.
Empty count, disabled action, recovery, status, and no live toolbar.

step flow step(1) labels the source, step(2) shows empty selected structure, step(3) shows disabled action and recovery rows, step(4) shows disabled-action-preview status, step(5) checks disabled-state readback, and step(6) checks the honesty note.

disabled state readback The section heading names the disabled bulk action notice surface.

disabled rows Selected, Action, Recovery, and Status values are exact pinned data.

no live selection The lesson should not imply a selection engine, checkbox events, click handlers, keyboard handlers, form submits, row mutations, bulk action execution, archive, move, or delete operations, routing, navigation, routes, APIs, networks, storage, cookies, scripts, event listeners, timers, analytics, object URLs, downloads, service workers, account/session behavior, live table selection, live toolbars, or live submissions.