Passon Reviewer to Bob Pass2 v1 2026 06 01 1742

← The Register
the-reviewer — Passon_Reviewer_to_Bob_Pass2_v1_2026-06-01_1742 · open accessHTML · readPDF ↓MD ↓
filed frontmatter
name: passon-reviewer-to-bob-pass2-v1
title: Passon — Reviewer to Bob — Pass 2 ratified items — v1
type: passon
state: in-flight
workstream: mtg-artefact
date: 2026-06-01
related-ids: [Bob, The-Reviewer, The-Vault-v0.47, WCAG-2.1-AA]
aliases: [Reviewer-Bob Passon Pass 2]

Passon — Reviewer → Bob — Pass 2 ratified items

From: The Reviewer (seventh shore position)

To: Bob the Builder

Via: Paul (ratified 2026-06-01 ~17:41 UTC — "yes to all your questions")

Build under audit: The_Vault_v0.47_banner_swap_2026-06-01_1626.html

Target build: The_Vault_v0.49_pass2_fixes_2026-06-01_[HHMM].html (assuming Pass 1 ships as v0.48 first).

Five open questions ratified by Paul; eleven items across the queue. Ten are yours to implement. One image-compression item Paul may do himself.

RATIFIED CALLS FROM PAUL

ITEMS FOR YOU TO IMPLEMENT IN v0.49

B1 — Reduced-motion handling. 🔴

Add this block to the CSS, after the existing @media print rules:

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .ticker-track { animation: none !important; }
}

Outcome: vestibular-sensitive visitors see a static room when their OS pref is set. WCAG 2.3.3.

B2 — New --accent-text token; rewrite link-text colour. 🔴

Add to :root:

--accent-text: #7a5e22;   /* AA on --bg; deeper bronze for text */

Verify against --bg #f5f3ee — the target ratio is ≥4.5:1. If #7a5e22 doesn't hit it, darken until it does. Then rewrite the following rules to use var(--accent-text) instead of var(--accent) as the foreground colour:

Keep --accent (gold) for:

Outcome: every content text instance meets WCAG AA 4.5:1.

B3 — Focus-visible outline on light surfaces. 🔴

Change:

*:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

to:

*:focus-visible { outline: 2px solid var(--dark-band); outline-offset: 2px; }

If you want gold focus on dark surfaces preserved, add a scoped rule:

.ticker *:focus-visible,
.site-footer *:focus-visible,
.fn-closing *:focus-visible,
.threshold-para *:focus-visible,
.anchor-block *:focus-visible,
.ds-headline *:focus-visible {
  outline-color: var(--accent);
}

Outcome: focus rings meet WCAG 2.2 SC 1.4.11 (3:1 non-text contrast) on every surface.

B4 — Phone breakpoint at 480px. 🔴

Add a new @media (max-width: 480px) block. Recommended contents:

@media (max-width: 480px) {
  /* Five-panel strip: stack from 5-column to 2-column */
  .pyramid-row-3 { grid-template-columns: 1fr 1fr !important; gap: 0.5rem !important; }
  .pyramid-btn-small { padding: 0.85rem 0.7rem !important; }
  .pyramid-btn-small .vft-panel-title { font-size: 0.85rem !important; }
  .pyramid-btn-small .vft-panel-sub { font-size: 0.72rem !important; }
  .pyramid-btn .door-letter,
  .pyramid-btn .vft-panel-letter { font-size: 0.62rem !important; top: 0.4rem !important; left: 0.5rem !important; }

  /* Dialog control buttons: 44×44 minimum touch targets */
  .chat-dialog-close { padding: 0.5rem 0.75rem !important; font-size: 1.85rem !important; }
  .chat-dialog-nav { padding: 0.7rem 1rem !important; font-size: 0.78rem !important; }
  .doc-modal-close { padding: 0.5rem 0.75rem !important; font-size: 1.75rem !important; }

  /* Ticker: slow further on small screens */
  .ticker-track { animation-duration: 150s; }

  /* Numbers tables: wrap each in horizontal-scroll container */
  .ds-table { font-size: 0.82rem; }
}

Outcome: phone rendering is purpose-tuned. Doors stay 3-column from 800px breakpoint downward (already in place); five-panel strip stacks to 2 at 480px. Touch targets meet 44×44 on the dialog controls.

B5 — Touch-target padding on dialog controls (desktop too). 🟡

For consistency, raise the dialog control padding across all breakpoints:

.chat-dialog-close { padding: 0.4rem 0.6rem; font-size: 1.85rem; }
.chat-dialog-nav { padding: 0.55rem 0.95rem; font-size: 0.75rem; }
.doc-modal-close { padding: 0.4rem 0.6rem; font-size: 1.75rem; }

Outcome: ≥44×44 on desktop pointer too; consistent across breakpoints.

B6 — Migrate doc-modal to native <dialog>. 🟡

Replace the current <div class="doc-modal" hidden role="dialog" aria-modal="true"> markup with:

<dialog class="doc-dialog" id="doc-dialog" aria-labelledby="doc-dialog-title">
  <header class="doc-dialog-header">
    <h3 id="doc-dialog-title">Document</h3>
    <button type="button" class="doc-dialog-close" aria-label="Close (Esc)">×</button>
  </header>
  <div class="doc-dialog-body" id="doc-dialog-body" tabindex="0"></div>
</dialog>

Replace the open / close JS with showModal() / close() matching the chat-dialog pattern. Reuse the chat-dialog CSS structure (position: fixed; inset: 0; margin: auto; width: min(820px, 88vw); max-height: 90vh; flex-direction: column;). Native dialog handles focus management, Tab trap, ESC close, and focus return on close.

Outcome: one modal pattern across the build. Keyboard users get parity inside Documents and inside Chats.

B7 — Print stylesheet: force <details> open in print. 🟡

Add to the @media print block (or as a new print block):

@media print {
  details { display: block; }
  details > *:not(summary) { display: block !important; }
  summary { font-weight: 700; padding: 0.5rem 0; border-bottom: 1px solid #ccc; }
  .panel-collapse-summary > .panel-open-affordance { display: none; }
  .chat-dialog, .doc-dialog, .doc-modal { display: none !important; }
}

Outcome: printing the page yields the full room in reading order with panel summaries acting as headings; any open modal is hidden in print to avoid layout surprises.

B8 — Skip-link target. 🟡

Change:

<a href="#book" class="skip-link">Skip to The Book</a>

to:

<a href="#main" class="skip-link">Skip to main content</a>

And add id="main" to the existing <main> element (already in the source — just needs the id).

Outcome: skip-link serves all keyboard-first visitors, not only those heading for the book.

B9 — Image compression. 🟡 (Bob OR Paul)

Compress the three inline JPEG payloads:

Target: ~70–80% JPEG quality, sized to rendered dimensions × 2 for retina. Should cut the 8.5 MB inline payload to ~4–5 MB. Use any image tool (ImageMagick, Squoosh, Photoshop, Affinity Photo).

Outcome: faster first paint on mobile data; no perceptual quality loss at rendered sizes.

B10 — Cover image alt-text. 🟡 (deferred to Pass 3)

Hold current aria-label="Mind the Gap book cover" until Pass 3. The voice-and-copy pass will propose a stronger description Paul or Curator supplies.

DEPENDENCIES

METHOD DISCIPLINE NOTES (for Bob's session journal)

SOURCES

— The Reviewer · 2026-06-01 17:42 UTC

#state/in-flight #workstream/mtg-artefact #type/passon #pass-2 #the-reviewer #bob #wcag

SHaDS™ · SHaDSy™ · Additional Intelligence™ · Paul Roebuck IP, 2026.
The Tomb Map →