Role Change - Everyday Interface Patterns

A static role review card shows Nina Patel, current role Editor, new role Reviewer, and Pending confirmation.

Program

Role change summaries should show the member and role rows clearly without saving, mutating permissions, or calling user services.

role_change_summary.html

Visuals: captured from real browser rendering

<section class="role-change" aria-labelledby="role-change-title">
  <h2 id="role-change-title">Role change summary</h2>
  <dl>
    <div><dt>Member</dt><dd>Nina Patel</dd></div>
    <div><dt>Current role</dt><dd>Editor</dd></div>
    <div><dt>New role</dt><dd>Reviewer</dd></div>
    <div><dt>Status</dt><dd><span class="badge">Pending confirmation</span></dd></div>
  </dl>
  <p class="note">Static role review only; no auth service, user service, permission mutation, save route, storage, API, network, form submit, script, or live role change runs.</p>
</section>
<style>
  .role-change { display: grid; gap: 10px; max-width: 38rem; border: 1px solid #64748b; padding: 12px; }
  .role-change dl { display: grid; gap: 8px; margin: 0; }
  .role-change dl div { display: grid; grid-template-columns: 8rem 1fr; gap: 8px; }
  .role-change dt { color: #475569; }
  .role-change dd, .note { margin: 0; }
  .badge { border-radius: 999px; background: #fef3c7; padding: 2px 8px; }
  .note { color: #475569; }
</style>

Label the role change summary.
The section is labelled by its visible heading.
Show the member row.
The member is exact pinned data.
Show the current role.
The current role is exact pinned data.
Show the new role.
The new role is exact pinned data.
Show the pending status.
The status is visible as a static badge.
Check role change honesty.
Member, current role, new role, status, and no live role change.

static markup The section heading names the role change summary surface.

role rows Member, current role, new role, and status rows are exact pinned data.

no role change The lesson should not imply auth services, user services, permission mutations, save routes, storage, APIs, scripts, or live role changes.