Share Not Started - Everyday Interface Patterns

A static screen-share preflight state shows Project slides target, Not sharing visibility, Choose screen next step, and Share not started status.

Program

Screen-share preflight states should show what might be shared before any display-capture picker opens.

screen_share_not_started.html

Visuals: captured from real browser rendering

<section class="share-not-started" aria-labelledby="share-not-started-title"><h2 id="share-not-started-title">Screen share not started</h2><div class="share-card" aria-label="Static screen share preflight"><span>Project slides</span><span>Not sharing</span></div><dl>
  <div><dt>Share target</dt><dd>Project slides</dd></div>
  <div><dt>Visibility</dt><dd>Not sharing</dd></div><div><dt>Next step</dt><dd>Choose screen</dd></div>
  <div><dt>Status</dt><dd><span class="badge">Share not started</span></dd></div></dl>
  <p class="check">Learner check: the share state is visible before any picker opens.</p>
  <p class="note">Static screen-share preflight only; no getUserMedia, getDisplayMedia, enumerateDevices, Permissions API, MediaStream, media capture, camera preview, microphone meter, screen-share picker, browser prompt, device labels, storage, cookie, route, API, network, script, event listener, form submit, input, textarea, contenteditable, analytics, timer, object URL, download, service worker, account/session behavior, live meeting join, live share, or live submission runs.</p></section>
<style>
  .share-not-started { display: grid; gap: 10px; max-width: 38rem; border: 1px solid #1d4ed8; padding: 12px; background: #eff6ff; }
  .share-card { display: grid; gap: 6px; width: 180px; min-height: 86px; align-content: center; justify-items: center; border: 1px solid #1d4ed8; background: #ffffff; color: #0f172a; font-weight: 700; }
  .share-card span { border-radius: 999px; background: #dbeafe; padding: 3px 10px; }
  .share-not-started dl { display: grid; gap: 8px; margin: 0; }
  .share-not-started dl div { display: grid; grid-template-columns: 8rem 1fr; gap: 8px; }
  .share-not-started dt { color: #475569; }
  .share-not-started dd, .check, .note { margin: 0; }
  .badge { border-radius: 999px; background: #dbeafe; padding: 2px 8px; }
  .note { color: #475569; }
</style>

Label the screen-share preflight.
The section is labelled by its visible heading.
Show share target row.
The share target is exact pinned data.
Show visibility and next step rows.
The visibility and next step are exact pinned data.
Render share-not-started status.
The status badge says the share has not started.
Check screen-share readback.
The check says the share state is visible before any picker opens.
Check screen-share honesty.
Share target, visibility, next step, status, and no live share.

step flow step(1) labels the source, step(2) shows the share target, step(3) shows visibility and next step rows, step(4) shows share-not-started status, step(5) checks the screen-share readback, and step(6) checks the honesty note.

screen share readback The section heading names the screen share not started surface.

share rows Share target, Visibility, Next step, and Status values are exact pinned data.

no display capture The lesson should not imply getUserMedia, getDisplayMedia, enumerateDevices, Permissions API, MediaStream, media capture, camera previews, microphone meters, screen-share pickers, browser prompts, device labels, storage, cookies, routes, APIs, networks, scripts, event listeners, form submits, inputs, textareas, contenteditable surfaces, analytics, timers, object URLs, downloads, service workers, account/session behavior, live meeting joins, live shares, or live submissions.